GridView 项目宽度

Question

得到一个 GridView，其项目宽度由第一个宽度设置（屏幕截图）

如何为每个项目设置一些自动宽度？

<GridView ItemsSource="{x:Bind PopularItems}" Style="{StaticResource GVStyle}" Height="230">
<GridView.ItemTemplate>
    <DataTemplate x:Name="GVTemp" x:DataType="models:LessDetails">
        <StackPanel>
            <Image Height="180" Width="132" Source="{x:Bind Img}" />
            <TextBlock Margin="4,4,0,4" HorizontalAlignment="Stretch" TextAlignment="Center"
       Text="{x:Bind Name}" Style="{ThemeResource BodyTextBlockStyle}" />
        </StackPanel>
    </DataTemplate>
</GridView.ItemTemplate>

Answer 1

您不能在 GridView 控件中自动调整每个项目的宽度，它被设计为使用第一个项目的大小作为统一大小（每个项目的 ListViewItemPresenter 具有相同的大小）。

对于自动调整大小的场景，我建议您使用 StackPanel 或创建自定义 ItemsControl。

Answer 2

使用 ItemsStackPanel：

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsStackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" />
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

唯一的缺点是它不包装项目。为此你可以使用 ItemsWrapGrid 但你失去了自动宽度功能（第一个项目决定所有项目的宽度）。

还有VariableSizedWrapGrid可以通过给物品一定的ColumnSpan/RowSpan来使用，但它与自动计算宽度不太一样。

如果您想两全其美，可能需要编写自己的自定义面板。

更新： 对于允许自动宽度和项目换行的解决方案，您可以使用 WrapPanel control from the UWP Community Toolkit.

GridView 项目宽度

GridView Items Width

xaml

windows-8.1

winrt-xaml

windows-10

windows-10-mobile