如何在 UWP 中制作具有可变长度项目的可扩展 GridView？

Question

我有一个拆分视图窗格，我想在其中放置一个 GridView。在 gridview 中，项目的宽度应该是可变的并且左对齐。除了我有一个更多按钮，不适合排成一行的项目应该垂直放置。 GUI 应该如下图所示：

在上图中，1 到 8 是可变长度项目，其中项目 6-8 放置在更多按钮下方，因为它们不适合打开的窗格长度。

我尝试过的代码如下：

<GridView x:Name="GridViewPane"
        Grid.Row="0"
      FlowDirection="LeftToRight"
      CharacterSpacing="1"
      CenterPoint="0,0,0"
      HorizontalContentAlignment="Left"
      ItemsSource="{x:Bind data}"
      IsItemClickEnabled="True">
<GridView.ItemTemplate>
    <DataTemplate x:DataType="local:List">
        <Grid x:Name="TextBorder"
              Width="Auto"
              CornerRadius="14"
              BorderBrush="Aqua"
              BorderThickness="1"
              Height="24">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="9" />
                <ColumnDefinition />
                <ColumnDefinition Width="16" />
            </Grid.ColumnDefinitions>
            <Image HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch"
                   Height="9"
                   Width="9"
                   Source="/Assets/Images/page_ic.svg" />
            <TextBlock Grid.Column="1"
                       FontSize="11"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       Foreground="Black"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       FontStretch="Expanded"
                       Text="{x:Bind DisplayName}" />
            <Button x:Name="DeleteTagButton"
                    Grid.Column="2"
                    Height="16"
                    Width="16"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    >
                <Image HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Source="/Assets/Images/page_delete.svg" />
            </Button>
        </Grid>
    </DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <VariableSizedWrapGrid Orientation="Vertical"
                               MaximumRowsOrColumns="1"
                               />

    </ItemsPanelTemplate>
</GridView.ItemsPanel>

</GridView>

Answer 1

如果要在 GridView 中添加可变长度项，可以尝试使用 Windows Community Toolkit 中的WrapPanel。使用前需要添加Microsoft.Toolkit.Uwp.UI.Controls nuget包，然后覆盖GridView的ItemsPanel，例如：

xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <toolkit:WrapPanel Orientation="Horizontal" AllowDrop="True">
        </toolkit:WrapPanel>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

或者的话，你也可以尝试使用Command bar来实现。