How to change style depending on screen size?

I would like to change the orientation of a StackPanel depending on the screen size.

I've been following this answer but haven't got things working yet.

Here's what I've got so far:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="SharedVisualStates">
        <VisualState x:Name="DefaultLayout">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="GuidesList.Style" Value="{StaticResource DefaultGuidesList}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="NarrowLayout">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="GuidesList.Style" Value="{StaticResource NarrowGuidesList}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Page.Resources>
    <Style x:Key="DefaultGuidesList" TargetType="StackPanel" >
        <Setter Property="Orientation" Value="Horizontal"/>
    </Style>

    <Style x:Key="NarrowGuidesList" TargetType="StackPanel" >
        <Setter Property="Orientation" Value="Vertical"/>
    </Style>
</Page.Resources>

<StackPanel
    x:Name="GuidesList">
    <StackPanel ... />
    <StackPanel ... />
</StackPanel>

Any ideas?

Solution

According to your code, you've put the VisualStateManager in a wrong place. To mark it work, you can add the VisualStateManager.VisualStateGroups to the root element of your page.

Control authors or app developers add VisualStateGroup object elements to the root element of a control template definition in XAML, using the VisualStateManager.VisualStateGroups attached property.

For more info, please see VisualStateManager.VisualStateGroups attached property.

So I changed your code like following:

<Page x:Class="UWP.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:UWP"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="DefaultGuidesList" TargetType="StackPanel">
            <Setter Property="Orientation" Value="Horizontal" />
        </Style>
        <Style x:Key="NarrowGuidesList" TargetType="StackPanel">
            <Setter Property="Orientation" Value="Vertical" />
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SharedVisualStates">
                <VisualState x:Name="DefaultLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="GuidesList.Style" Value="{StaticResource DefaultGuidesList}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="GuidesList.Style" Value="{StaticResource NarrowGuidesList}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel x:Name="GuidesList">
            <StackPanel Width="400"
                        Height="200"
                        Background="Red" />
            <StackPanel Width="400"
                        Height="200"
                        Background="Blue" />
        </StackPanel>
    </Grid>
</Page>

And it works well.