CODEWITHSUNDEEP
c#xamluwp
Habibur Rahman
Habibur Rahman

Reputation: 54

How to make a expandable GridView with variable length items in UWP?

I have a split view pane, where I want to place a GridView. In the gridview, width of the items should be variable and left aligned. As well as I have a more button, where the items that are not fit in a row, should to be placed vertically. GUI of should to be like the image below:

GridView Image

In this above figure, 1 to 8 are the variable length items where the item 6-8 are placed under the more button as they are not fitted in the open pane length.

Code that I have tried like below:


<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>

Upvotes: 1

Views: 175

Answers (1)

Faywang - MSFT
Faywang - MSFT

Reputation: 5868

If you want to add variable length items in GridView, you can try to use WrapPanel from Windows Community Toolkit. Before using it, you need to add Microsoft.Toolkit.Uwp.UI.Controls nuget package and then override the ItemsPanel of GridView, for example:

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

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

Or in that case, you can also try to use Command bar to achieve it.

Upvotes: 2

Related Questions