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?

回答1:

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.

回答2:

You can also do it in the old good manner.
Add in XAML two visual states:

    <StackPanel x:Name="GuidesList">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="HorLayout">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GuidesList" Storyboard.TargetProperty="Orientation">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Horizontal"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="VertLayout">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GuidesList" Storyboard.TargetProperty="Orientation">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
   .....

And handle page size changed event:

  private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (e.NewSize.Width < 700)
        {
            VisualStateManager.GoToState(this, "VertLayout", true);
        }
        else
        {
            VisualStateManager.GoToState(this, "HorLayout", true);
        }
    }

来源：https://stackoverflow.com/questions/37865729/how-to-change-style-depending-on-screen-size