3

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

Community
  • 1
  • 1
dex3703
  • 2,077
  • 4
  • 28
  • 45

1 Answers1

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.

dex3703
  • 2,077
  • 4
  • 28
  • 45
  • I just summarized because it would be a lot to paste in. Do you need an example for a specific part? – dex3703 Apr 08 '13 at 22:26
  • Nm I found that ListView actually did what I wanted in a cleaner way, and this post made the horizontal stretch do exactly as desired: http://stackoverflow.com/questions/15067309/listviewitem-wont-stretch-to-the-width-of-a-listview – swinefeaster Apr 09 '13 at 04:53
  • I could use a code snippet, too. I don't really know what you mean by creating DependencyProperties for desired width and height. I know how to bind the width and height to a static resource but when I change them nothing happens. – Stefan Fabian Aug 06 '14 at 13:37