title: How to make a expandable GridView with variable length items in UWP?
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/q8NL1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q8NL1.png" alt="GridView Image"></a></p>
  
  <p>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.</p>
  
  <p>Code that I have tried like below:</p>
  
  <pre><code>
  &lt;GridView x:Name="GridViewPane"
          Grid.Row="0"
        FlowDirection="LeftToRight"
        CharacterSpacing="1"
        CenterPoint="0,0,0"
        HorizontalContentAlignment="Left"
        ItemsSource="{x:Bind data}"
        IsItemClickEnabled="True"&gt;
  &lt;GridView.ItemTemplate&gt;
      &lt;DataTemplate x:DataType="local:List"&gt;
          &lt;Grid x:Name="TextBorder"
                Width="Auto"
                CornerRadius="14"
                BorderBrush="Aqua"
                BorderThickness="1"
                Height="24"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="9" /&gt;
                  &lt;ColumnDefinition /&gt;
                  &lt;ColumnDefinition Width="16" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Image HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     Height="9"
                     Width="9"
                     Source="/Assets/Images/page_ic.svg" /&gt;
              &lt;TextBlock Grid.Column="1"
                         FontSize="11"
                         FontFamily="Segoe UI"
                         FontWeight="SemiBold"
                         Foreground="Black"
                         VerticalAlignment="Center"
                         HorizontalAlignment="Center"
                         FontStretch="Expanded"
                         Text="{x:Bind DisplayName}" /&gt;
              &lt;Button x:Name="DeleteTagButton"
                      Grid.Column="2"
                      Height="16"
                      Width="16"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      &gt;
                  &lt;Image HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Source="/Assets/Images/page_delete.svg" /&gt;
              &lt;/Button&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  &lt;/GridView.ItemTemplate&gt;
  &lt;GridView.ItemsPanel&gt;
      &lt;ItemsPanelTemplate&gt;
          &lt;VariableSizedWrapGrid Orientation="Vertical"
                                 MaximumRowsOrColumns="1"
                                 /&gt;
  
      &lt;/ItemsPanelTemplate&gt;
  &lt;/GridView.ItemsPanel&gt;
  
  &lt;/GridView&gt;
  
  </code></pre>