UWP内のStrech ListBoxとListBoxItems

Question

ListBoxをListBoxItemでストレッチしたいと思います。 ListBox自体をストレッチすることは問題ではありません。問題は、リストボックスの空き領域を使用するようにListBoxItemに指示することです。

<Page.Content> 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="200"> 
     <ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green" ItemsSource="{x:Bind Path=ChessFieldList}" > 
      <ListBox.ItemTemplate> 
       <DataTemplate > 
        <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow" BorderBrush="Red" BorderThickness="3" > 
        </StackPanel> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </Grid> 
</Page.Content> 

以下のイメージは、上記と予想される結果を示しています。

どのように私は期待される結果を達成することができますか？

[編集]他と私の意見では、正しい解決策：Set Width and Height of ItemsControl Children

Answer 1

これは共通の問題です。あなたがやらなければならないことは、あまりにもListBoxItem秒のHorizontalContentAlignmentに設定されます。

<ListBox Background="Green" ItemsSource="{x:Bind ChessFieldList}"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Background="Yellow" BorderBrush="Red" BorderThickness="3" Height="50"> 
      </StackPanel> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
    <ListBox.ItemContainerStyle> 
     <Style TargetType="ListBoxItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     </Style> 
    </ListBox.ItemContainerStyle> 
</ListBox> 

StackPanelは、任意のコンテンツが含まれていないので、それは任意の高さを持っていないので、私はそれにHeight="50"を単に追加しましたこのデモンストレーションの目的。

<ListView.GroupStyle> 
    <GroupStyle HidesIfEmpty="False"> 
     <GroupStyle.HeaderContainerStyle> 
      <Style TargetType="ListViewHeaderItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
       <Setter Property="VerticalContentAlignment" Value="Stretch" /> 
      </Style> 
     </GroupStyle.HeaderContainerStyle> 
    </GroupStyle> 
</ListView.GroupStyle> 

をそれはあなたが尋ねたよりも少しですが、それはあまり知られて技術です：

Answer 2

単にあなたがグループ化を使用する場合は、あなたが含まれている必要があり

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    </Style> 
</ListBox.ItemContainerStyle> 

を追加します。