WPFの自動サイズ描画コンテナ

Question

私は現在、オフィスでの座席順を視覚化するために、小さなC＃プロジェクトに取り組んでいます。複数の部屋があるため、デスクレイアウトは動的に作成されます。データは、jpgイメージ（ルームレイアウト）がbase64でエンコードされた文字列として格納されているXMLから取得されます。さらに、XMLファイルには、画像上に絶対ピクセル位置を持つすべてのデスクのリストが含まれています。

これまで、別々の部屋の画像を、別々のタブページとすべてのデスク（「デスク」オブジェクトのリストに格納されている）にイメージ上のその位置に描画することができました。これはすべてウィンドウのxamlファイルで行われます。

私の問題は、親の（タブページの）サイズに従って、キャンバスが子、すなわち画像と机のサイズを変更しないということです。

私は既に、ビューボックスにキャンバスを置き、MeasureOverride（）関数をオーバーライドしてカスタムキャンバスクラスを作成するグリッドを使用してみました。ここで

は私のXAMLファイルの最小限の作業例です：

<TabControl x:Name="tabControl" Grid.Column="0"> 
    <TabControl.ItemTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding Name}" /> 
     </DataTemplate> 
    </TabControl.ItemTemplate> 
    <TabControl.ContentTemplate> 
     <DataTemplate> 

      <Canvas> 
       <Image 
        Source="{Binding Image}" > 
       </Image> 
       <ItemsControl ItemsSource="{Binding Docks}"> 
        <ItemsControl.ItemsPanel> 
         <ItemsPanelTemplate> 
          <Canvas/> 
         </ItemsPanelTemplate> 
        </ItemsControl.ItemsPanel> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <Border 
            Height="34" 
            BorderThickness="1" 
            Tag="{Binding Self}" 
          > 
           <TextBlock 
            Text="{Binding Caption}" 
            RenderTransformOrigin="0.5,0.5" 
            Width="{Binding DockWidth}" 
            TextAlignment="Center" 
            VerticalAlignment="Center" 
            TextWrapping="Wrap" 
           > 
           </TextBlock> 
           <Border.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform/> 
             <SkewTransform/> 
             <RotateTransform/> 
             <TranslateTransform X="{Binding Position.Item1}" Y="{Binding Position.Item2}"/> 
            </TransformGroup> 
           </Border.RenderTransform> 
          </Border> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </Canvas> 
     </DataTemplate> 
    </TabControl.ContentTemplate> 
</TabControl> 

誰も私が何ができるかのアイデアを持っていますか？私はキャンバスに縛られていません。仕事をする良い方法がある場合は、私に知らせてください。

Answer 1

Viewboxが動作するはずです。たとえば、これは正しくサイズが変更されます（あなたが96のdpiのとJPEGを持っている場合は、いいえ、私が思う場合は、キャンバスのサイズを再計算する必要があります）：

<Grid HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch"> 
     <Viewbox Stretch="Fill" 
       HorizontalAlignment="Stretch" 
       VerticalAlignment="Stretch"> 
      <Canvas Width="{Binding ElementName=img, Path=ActualWidth}" 
        Height="{Binding ElementName=img, Path=ActualHeight}"> 
       <Image Name="img" 
         Source="pack://siteoforigin:,,,/images/img1.jpg" /> 
       <Canvas Canvas.Left="100" 
        Canvas.Top="50"> 
       <Rectangle Width="50" 
          Height="100" 
          Fill="Beige" /> 
       <TextBlock Text="AAA" /> 
      </Canvas> 
      </Canvas> 
     </Viewbox> 
    </Grid>