在 UWP 中拉伸 ListBox 和 ListBox 项

Question

我想用 ListBoxItem 拉伸一个 ListBox。拉伸 ListBox 本身不是问题。问题似乎是，告诉 ListBoxItem 使用 ListBox 中可用的 space。

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

下图显示了上述结果和预期结果。

怎样才能达到预期的效果？

[编辑] 另一个我认为正确的解决方案：

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

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>

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

在 UWP 中拉伸 ListBox 和 ListBox 项

Strech ListBox and ListBoxItems in UWP

xaml

uwp

winrt-xaml

uwp-xaml