Как сделать расширяемый GridView с элементами переменной длины в UWP?

Question

У меня есть разделенная область просмотра, где я хочу разместить 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, вы можете попробовать WrapPanel из Windows Community Toolkit. Перед его использованием необходимо добавить пакет Microsoft.Toolkit.Uwp.UI.Controls nuget, а затем переопределить ItemsPanel GridView, например:

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

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

или в этом случае вы также можете попытаться использовать Панель команд для достижения этого.