4

I have a Grid View that is used to display "tags" which is a list of strings that are dynamic in size. Using the following code:

<GridView ItemsSource="{Binding Tags}" 
          ItemTemplate="{StaticResource TagTemplate}" 
          VerticalAlignment="Bottom"
          Grid.RowSpan="2"
          SelectionMode="None"
          />

I use the following Template for the items:

<DataTemplate x:Name="TagTemplate">
    <Border BorderBrush="Gray" BorderThickness="1" Opacity="75">
        <TextBlock Text="{Binding}"/>
    </Border>
</DataTemplate>

When added to the Grid, the size of each of the items are the same size as the first:

enter image description here

How do I dynamically size the items within the GridView?

James Mertz
  • 8,459
  • 11
  • 60
  • 87
  • Is the size of your GridView dynamic or static? Any way you can use the `RowDataBound` event to change the cell size depending on the values inserted. – Nick.T Nov 06 '12 at 15:25
  • @Nick.T It's statically sized, however the tags are scrollable as [seen here](http://i.stack.imgur.com/Z2kQn.png). – James Mertz Nov 06 '12 at 15:28
  • 1
    Why not just use an ItemsControl with a StackPanel or WrapPanel as your ItemsPanelTemplate instead? You can easily get the same look you're going for. – Chris W. Nov 06 '12 at 15:53
  • @ChrisW. Mainly because I didn't know about it :P That seems to be exactly what I want, with the exception that I wasn't able to get the items to be scrollable. – James Mertz Nov 06 '12 at 16:11
  • Put them in a ScrollViewer then – Filip Skakun Nov 06 '12 at 16:28

1 Answers1

1

So something like; 

<ScrollViewer>
    <ItemsControl ItemsSource="{Binding Tags}">
        <!-- ItemsPanelTemplate -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
                <!-- Or use WrapPanel depending on its display -->
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <!-- ItemContainerStyle -->
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Gray" BorderThickness="1" Opacity="75" Padding="3" Margin="3,0">
                     <TextBlock Text="{Binding}"/>
                </Border>                             
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>
Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • Of course this is not really resizing the GridView; the only way to resize a GridView is to use the VariableSizedWrapGrid – Jerry Nixon Nov 06 '12 at 18:56
  • Nah, it eliminates the GridView all together with another alternative. – Chris W. Nov 06 '12 at 19:06
  • @JerryNixon How would you do that? – James Mertz Nov 06 '12 at 21:17
  • See the only thing I don't like about the gridview, is all cells are the same dimensions, I use ItemsControl's a lot more for more flexible design instances. At least that was part of my thinking for this instance anyway. – Chris W. Nov 06 '12 at 21:36
  • You can also add Row/ColumnDefinitions for the Grid and set it to "auto" which will calculate the optimal size of the row/column. – Viktor Benei Nov 07 '12 at 08:36