Change GridViewItem.Width on Window.Current.SizeChanged for UWP

Question

I am trying to change the GridViewItem's width property when the window size is changed (Window.Current.SizeChanged) on UWP.

    <GridView x:Name="gv" Grid.Row="1" Background="Gray">
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Height" Value="80"/>
                <Setter Property="Width" Value="80"/>
            </Style>
        </GridView.ItemContainerStyle>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Rectangle x:Name="rect" Fill="Red"/>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

I plan to change the GridViewItem's width when the window is resized on windows 10 so that there are no blank spaces on the end.

P.S. image for reference.

Please help.

Answer 1

I don't think change each of GridViewItem's width is a appropriate way.

You can register GridView's SizeChanged event. In the event handler, you can get ItemsWrapGrid in the GridView, then change ItemsWrapGrid's ItemWidth as you want depend on the size of GridView.

private void appView_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ItemsWrapGrid appItemsPanel = (ItemsWrapGrid)appView.ItemsPanelRoot;

    double optimizedWidth = 140.0;
    double margin = 12.0;
    var number = (int)e.NewSize.Width / (int)optimizedWidth;
    appItemsPanel.ItemWidth = (e.NewSize.Width - margin) / (double)number;
}

Answer 2

I will recommend you change the GridViewItem's width property by using the AdaptiveTrigger, in this way you do not need to handle the Window.Current.SizeChanged event, it will change the GridViewItem's width property automaticly:

 <Page.Resources>
    <Style x:Key="GridViewItemStyleBig" TargetType="GridViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Height" Value="80"/>
        <Setter Property="Width" Value="80"/>
    </Style>
    <Style x:Key="GridViewItemStyleSmall" TargetType="GridViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Width" Value="30"/>
    </Style>

</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="GridViewWith">
            <VisualState x:Name="MyVisaulState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="800"></AdaptiveTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="gv.ItemContainerStyle" Value="{StaticResource GridViewItemStyleBig}"></Setter>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="MyVisaulState1">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="gv.ItemContainerStyle" Value="{StaticResource GridViewItemStyleSmall}"></Setter>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <GridView x:Name="gv" Grid.Row="1" Background="Gray">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Rectangle x:Name="rect" Fill="Red"/>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

For more information, please refer to how to use the AdaptiveTrigger in UWP app.

You can also donwload the sample on GitHub about the AdaptiveTrigger.