Stretch GridViewItem to full GridView width

Question

I'm working on a schedule app for Windows 10 and using GridView to show lesson cards. They should have fixed width when window is wide and use full GridView width when it is narrow (actually, it should look like ListView).

I'm using VisualStateManager to set fixed GridViewItem width in Wide state, but I can't understand how to make it stretch.

Here are my styles:

    <Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
        <Setter Property="Margin" Value="10, 10, 10, 10" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
    </Style>

    <Style x:Key="NarrowGridViewItemStyle" BasedOn="{StaticResource ResourceKey=GridViewItemStyle}" TargetType="GridViewItem">
        <Setter Property="Width" Value="{Binding ActualWidth, ElementName=TimetableGrid}" />
    </Style>

    <Style x:Key="WideGridViewItemStyle" BasedOn="{StaticResource ResourceKey=GridViewItemStyle}" TargetType="GridViewItem">
        <Setter Property="Width" Value="450"/>
    </Style>

Visual States:

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveStates" CurrentStateChanged="AdaptiveStates_OnCurrentStateChanged">
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TimetableGrid.ItemContainerStyle" Value="{StaticResource ResourceKey=NarrowGridViewItemStyle}" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="NavigationSplitView.DisplayMode" Value="CompactOverlay"/>
                    <Setter Target="HamburgerButton.Background" Value="#3F51B5"/>
                    <Setter Target="HamburgerButton.Foreground" Value="White"/>
                    <Setter Target="HeaderBorder.Margin" Value="20,0,0,0"/>
                    <Setter Target="TimetableGrid.ItemContainerStyle" Value="{StaticResource ResourceKey=WideGridViewItemStyle}" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

And the GridView itself:

 <GridView x:Name="TimetableGrid"
        Margin="20, 0, 20, 10"
        ItemTemplate="{StaticResource LessonTemplate}"
        ItemsSource="{Binding Source={StaticResource TimetableViewSource}}">
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate x:DataType="data:Day">
                    <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Margin="0, 20, 0, 0">
                       <Run Text="{Binding DayOfWeek}" />
                       <Run Text=", " />
                       <Run Text="{Binding Date}" />
                    </TextBlock>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </GridView.GroupStyle>
</GridView>

Actual result:

Wide State:

Narrow State:

I'm new to UWP development and XAML and appreciate any help. Thanks.

Answer 1

You'll need to replace the ItemsPanelTemplate for the items to stretch.

Try defining a new resource in Page.Resources:

<ItemsPanelTemplate x:Key="NarrowItemsPanelTemplate">
    <ItemsStackPanel />
</ItemsPanelTemplate>

Then modify your VisualStateManager to additionally set the ItemsPanel property for the NarrowState:

<VisualState x:Name="NarrowState">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="0" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="TimetableGrid.ItemContainerStyle" 
            Value="{StaticResource ResourceKey=NarrowGridViewItemStyle}" />
        <Setter Target="TimetableGrid.ItemsPanel" 
            Value="{StaticResource ResourceKey=NarrowItemsPanelTemplate}" />
    </VisualState.Setters>
</VisualState>

There's no need to modify the WideState in any way.