可視性の問題を最小限にするためにコンテナ要素を自動サイズ調整するにはどうすればよいですか？

Question

私はItemsControlを持っていて、私のCustomObjectからいくつかの文字列を表示します。

それは文字列AとBは、複数の線が長くなること

String A 
String B 
String C 

ようなものだが、Cはできません。私はHeight="Auto"とDockPanelを考えていました。しかし、ストリングAの高さは、そうする必要があります。ストリングBも同様です。

この

は私がこれまでに思い付いたものです：唯一のマージンプロパティは文字列AとBの高さを作っている残念ながら

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Background="Black"> 
    <ItemsControl Name="ItemsControl1"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Vertical" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Border BorderBrush="#FF126eb1" BorderThickness="1.5" CornerRadius="8,8,8,8" Background="#FF074e84" Width="350" Height="Auto"> 
        <DockPanel Width="350" Margin="0,10,0,0" Height="Auto" Background="Transparent"> 
         <Canvas DockPanel.Dock="Top" Height="Auto" Width="350" Margin="0,10,0,0"> 
          <TextBlock Text="{Binding Headline}" Canvas.Left="5" Canvas.Top="5" Foreground="White" FontSize="15" FontWeight="Bold" MaxWidth="340" TextWrapping="Wrap" Height="Auto"/> 
         </Canvas> 
         <Canvas DockPanel.Dock="Top" Height="Auto" Width="350" Margin="0,10,0,0"> 
          <TextBlock Text="{Binding Description}" Canvas.Left="5" Canvas.Top="20" Foreground="White" FontSize="13" MaxWidth="340" TextWrapping="Wrap" Height="Auto" /> 
         </Canvas> 
         <Canvas DockPanel.Dock="Top" Width="350" Height="40" Margin="0,10,0,0" Background="Transparent"> 
          <TextBlock Text="{Binding DeadlineOn, StringFormat='Deadline: {0}'}" Canvas.Left="5" Canvas.Top="5" Foreground="White"/> 
          <!-- and other controls --> 
         </Canvas> 
        </DockPanel> 
       </Border> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</ScrollViewer> 

私は、これを行うことができますどのようであれば、それぞれの高さアイテムは不明ですか？

Answer 1

多くのレイアウト要素がありますが、多くの選択肢がありますが、特定の状況でどのレイアウト要素を使用するのが適切かを判断するのが難しい場合があります。

一般的に、Canvasは、その便利な固定位置決め機能に役立ちます。 Canvas.LeftとCanvas.Topのプロパティを使用して、どこにでも配置することができます。しかし、Canvasのサイズは固定されており、その子に依存しないため、可変サイズのコンテンツに使用することは困難です。 Canvasの親はCanvasの子のサイズから「絶縁」されており、これは実際には状況によっては有益です。これとは対照的に

、Gridこれは、あなたが新しいWindowかUserControlを作成する理由は、デフォルトであるなど、はるかに柔軟なレイアウト要素であり、行と列のグリッドからレイアウトのために有用である、とのまたはspanningなし。しかし、Canvasとは異なり、Gridのサイズは、指定されておらず、利用可能なスペースに伸ばされていないときは、すべての子のサイズの和集合です。

Gridまた、それはいくつかの子供を持っており、それらが行または列に配置されていない場合、それらは、後で子供がZオーダーに高いことで、互いの上にを重ねているという特性を有しています。これはCanvasのようなものですが、Canvas.LeftとCanvas.Topがない場合、どのように子供の位置を細かく制御できますか？

例を見てみましょう。それはdoesnのために、我々は特定のCanvasの高さを持っていた最初のケ​​ースで

<Grid> 
    <StackPanel> 
     <Canvas Height="120"> 
      <Rectangle Canvas.Left="10" Canvas.Top="10" Height="100" Width="100" Fill="Red"/> 
      <Rectangle Canvas.Left="120" Canvas.Top="10" Height="100" Width="100" Fill="Green"/> 
     </Canvas> 
     <Grid HorizontalAlignment="Left"> 
      <Rectangle Margin="10,10,10,10" Height="100" Width="100" Fill="Red" HorizontalAlignment="Left"/> 
      <Rectangle Margin="120,10,10,10" Height="100" Width="100" Fill="Green" HorizontalAlignment="Left"/> 
     </Grid> 
    </StackPanel> 
</Grid> 

：ここでは、2つの小さなスペースに並べて配置四角形、および同じことをやってGridとCanvasですt自動サイズ。第2のケースでは、Margin〜の絶対位置をシミュレートしましたとGridのサイズは、その内容のサイズに適応しています。