在 UWP 中拉伸 ListBox/ItemsControl

Question

我想在 UWP 中水平和垂直拉伸列表框。我尝试了一些 WPF 解决方案，但其中 none 有效。 (Stretch line to width of Itemstemplate canvas in itemscontrol)

我尝试了什么：

<Page.Content>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
                    <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
                    <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                    <Setter Property="Background" Value="AliceBlue" />
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.Template>
                <ControlTemplate TargetType="ListBox">
                    <ItemsPresenter  Height="252" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem>asdf</ListBoxItem>
            <ListBoxItem>asdfasdf</ListBoxItem>
            <ListBoxItem>asdfsdf</ListBoxItem>
            <ListBoxItem>34</ListBoxItem>
            <ListBoxItem>as2df</ListBoxItem>
            <ListBoxItem>asdf</ListBoxItem>
        </ListBox>
    </Grid>
</Page.Content>

结果如下：

如何在 uwp 中拉伸列表框？

Answer 1

您已明确设置 Height="252"。这就是它没有出现的原因。此外，您将实际 ListBox 的背景设置为 Green，但它被您的 ItemsPanelTemplate 覆盖，因此 Green 不会显示。

您的最终 XAML 应该如下所示。

<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
            <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
            <Setter Property="Background" Value="AliceBlue" />
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBoxItem>asdf</ListBoxItem>
    <ListBoxItem>asdfasdf</ListBoxItem>
    <ListBoxItem>asdfsdf</ListBoxItem>
    <ListBoxItem>34</ListBoxItem>
    <ListBoxItem>as2df</ListBoxItem>
    <ListBoxItem>asdf</ListBoxItem>
</ListBox>

这还没有经过测试，但应该可以正常工作。

在 UWP 中拉伸 ListBox/ItemsControl

Strech ListBox/ItemsControl in UWP

xaml

uwp

win-universal-app

winrt-xaml