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>

Answer 1

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.