UWP 中的拉伸 ListBox/ItemsControl答案

【问题标题】：Strech ListBox/ItemsControl in UWPUWP 中的拉伸 ListBox/ItemsControl
【发布时间】：2017-02-26 21:26:34
【问题描述】：

我想在 UWP 中水平和垂直拉伸列表框。我尝试了一些 WPF 解决方案，但都没有奏效。 (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 中拉伸列表框？

【问题讨论】：

标签： xaml uwp win-universal-app winrt-xaml

【解决方案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>

这未经测试，但应该可以按预期工作。

【讨论】：

HorizontalAlignment 和 VerticalAlignment 不是必需的。