UWP中的Strech ListBox和ListBoxItems

Question

我想使用 ListBoxItem 拉伸ListBox。拉伸ListBox本身并不是问题。问题似乎是，告诉ListBoxItem使用ListBox中的可用空间。

<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

这是一个常见问题。您需要做的就是设置HorizontalContentAlignment的{​​{1}}：

ListBoxItem

由于<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。

Answer 2

只需添加

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

如果您使用分组，则应包括：

<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>

比你要求的要多一些，但这是一个鲜为人知的技术。