Adjusting gridview's items size to the window size at runtime

Question

I have no idea how to resize items and font size of textblock in the gridview at runtime? I don't know how to change Item's properties. Should I use DependencyProperties in my "ProductDataTemplate"?

<Page x:Name="page"
x:Class="app.SearchPage"

...

<Page.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="ProductDataTemplate">
            <Grid Background="Gray" Width="480" Height="360">
                <Image Source="{Binding LargeThumbnail}"/>
                <Border Background="#A5000000" Height="120" VerticalAlignment="Top">
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Title}" VerticalAlignment="Top" Style="{StaticResource SubheaderTextBlockStyle}" Margin="5,0" FontSize="12" Foreground="White"/>
                </Border>
            </Grid>
        </DataTemplate>
    </ResourceDictionary>
</Page.Resources>
<Page.DataContext>
    <local:DataSource/>
</Page.DataContext>

...

    <Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"  >
        <ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
            <GridView x:Name="gridresult" ItemTemplate="{StaticResource ProductDataTemplate}" ItemsSource="{Binding Miniatures}" Margin="0,10,0,0" ItemClick="gridresult_ItemClick" IsItemClickEnabled="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" SizeChanged="gridresult_SizeChanged">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
        </ScrollViewer>
    </Grid>

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

You could bind ItemWidth and ItemHeight on the ItemsWrapGrid to properties of a view model. Put that view model as a resource in your page and set the Source of the binding to that StaticResource. Something like this:

<Page.Resources>
    <ResourceDictionary>
        <local:PageSizeViewModel
            x:Key="PageSizeViewModel" />

...

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsWrapGrid
            ItemWidth="{Binding ItemWidth, Source={StaticResource PageViewModel}"
            ItemHeight="{Binding ItemHeight, Source={StaticResource PageViewModel}"
            Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

Then you can change these properties in your PageSizeViewModel as your page gets resized.

Similar to this question: GridView with 2 columns, fill width

edited May 23 '17 at 12:16

Community

1
1

answered Jun 15 '16 at 20:57

Filip Skakun

31,624
6
74
100

Ok, thank you but how can I edit properties of DataTemplate's Controls like FontSize of TextBlock ? – bkdi Jun 20 '16 at 21:34
What do you mean by "edit"? You can type them in any text editor in your `DataTemplate`... – Filip Skakun Jun 27 '16 at 13:01
I mean about changing value of FontSize at runtime? When user changes size of window I would like to adjust items and font size. – bkdi Jul 01 '16 at 20:00
So? A `FontSize` is just a `double` property. You can bind it to a view model, use visual state triggers, implement a behavior, use separate `DataTemplates` for different window sizes etc. You have plenty of ways to approach it. – Filip Skakun Jul 05 '16 at 13:05

Adjusting gridview's items size to the window size at runtime

1 Answers1