CODEWITHSUNDEEP
c#xamluwpwindows-phone-8.1windows-10-mobile
esdoodle
esdoodle

Reputation: 347

How to give dynamic width to gridview items (text block)?

I am developing a Windows 10 UWP, and a Windows Phone 8.1 project. In the project, there are tags like in Instagram, which can be seen in the picture. These tags are printed on the screen using a GridView. The problem is that I couldn't make the GridView items' width dynamic by their content. It takes the first item's width and gives all the other items the same width. For the shorter words, it's not a problem but some letters of the longer words are not visible.

Here is a screen shot of the problem.

Screen Shot

The code I wrote;

<GridView SelectionMode="None" ItemsSource="{Binding TagsArray}" ScrollViewer.IsHorizontalRailEnabled="True">
  <GridView.ItemTemplate>
    <DataTemplate>
      <Grid>
         <TextBlock x:Name="tagButton" Tapped="tagButton_Tapped" FontWeight="Medium" Text="{Binding}" Foreground="#063076" FontSize="11" HorizontalAlignment="Left"/>
      </Grid>
    </DataTemplate>
  </GridView.ItemTemplate>
  <GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
      <Setter Property="Margin" Value="0,-15,0,-15"/>
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
  </GridView.ItemContainerStyle>
  <GridView.ItemsPanel>
    <ItemsPanelTemplate>
      <ItemsWrapGrid Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </GridView.ItemsPanel>
</GridView>

Upvotes: 2

Views: 592

Answers (1)

Mikael Koskinen
Mikael Koskinen

Reputation: 12906

I would recommend you to use WrapPanel from UWP Community Toolkit for this.

You can use it inside the GridView by replacing the ItemsPanel:

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

Here's a full example:

    <GridView x:Name="ItemGrid" Width="450" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        <GridView.ItemTemplate>
            <DataTemplate >
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <controls:WrapPanel Orientation="Horizontal" AllowDrop="True">
                </controls:WrapPanel>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>

When used with the following collection:

        var ite = new ObservableCollection<string>();
        ite.Add("#tag1");
        ite.Add("#a");
        ite.Add("#tag3");
        ite.Add("#differ");
        ite.Add("#tag5");
        ite.Add("#longertag");
        ite.Add("#verylongtag");
        ite.Add("#tag1");

        this.ItemGrid.ItemsSource = ite;

Provides the following output:

WrapPanel custom width

Upvotes: 3

Related Questions