Size GridViewItems to fill GridView?

Question

I have the opposite of this problem: How do I dynamically size a GridView Item?

I have a GridView with two rows and four columns. The desired behavior is for the GridViewItems to fill the cell, and I can't figure out a way to do this. The GridViewItem is a Grid with some other content, which I have as a DataTemplate. I can provide a Width and Height for an item, but that only works for one resolution, and I need the items to be dynamic and proportional, so if they are displayed on a different device they will continue to be 2 rows of 4 items.

On a different page, I have a static Grid with the same layout, containing Rectangles in each cell. These stretch automatically, and I've tried storing their width and height in DependencyProperties that I get on the Rectangle's SizeChanged, but I can't figure out how to bind to them.

The page XAML is this:

                    <Grid x:Name="Pane2LayoutGrid" 
                    Grid.Column="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="90"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <TextBlock x:Name="TitleText" Text="Favorites" Style="{StaticResource TitleBarHeader}"/>

                    <GridView x:Name="GridView" 
                        Grid.Row="1" 
                        Margin="0,10,0,8" 
                        Style="{StaticResource GridView}" 
                        ItemsSource="{Binding Items, Source={StaticResource vm}}" 
                        />

                </Grid>

And the DataTemplate:

                <DataTemplate>
                <Grid>

                    <Border x:Name="Border" Style="{StaticResource GridBorder}">

                        <Grid x:Name="grid" Style="{StaticResource Grid}" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1.3*"/>
                                <ColumnDefinition Width="2*"/>
                            </Grid.ColumnDefinitions>
                            <!-- rows for alignment -->
                            <Grid.RowDefinitions>
                                <RowDefinition Height="1*"/>
                                <RowDefinition Height="3*"/>
                                <RowDefinition Height="1*"/>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="Text1" Grid.Row="1" Text="{Binding Title}" Style="{StaticResource Title}" />
                            <TextBlock x:Name="Text2" Grid.Row="1" Text="{Binding Subtitle}" Style="{StaticResource SubTitle}" />
                        </Grid>

                    </Border>
                </Grid>
            </DataTemplate>

desired layout of gridviewitems

dex3703 dex3703 · Accepted Answer · 2013-02-22T21:18:28

My teammate Dwayne had the solution, but it took us a while to figure it out.

Create DependencyProperties for the GridViewItem's desired width and height.
Measure the size of the GridView on its SizeChanged event. (Our problem was trying to get a value that wasn't zero--other events wouldn't render the panel at the right time.)
Bind the ItemContainer WrapGrid's ItemWidth and ItemHeight to these DependencyProperties. Setting the width and height in the DataTemplate won't work.

One of those problems with a bunch of separate little pieces needing stitching together.

Size GridViewItems to fill GridView?

1 Answers