如何根据屏幕大小更改样式？

Question

我想根据屏幕大小更改StackPanel 的方向。

我一直在关注this answer，但还没有开始工作。

这是我目前得到的：

<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>

有什么想法吗？

Answer 1

根据您的代码，您将VisualStateManager 放在了错误的位置。要将其标记为有效，您可以将 VisualStateManager.VisualStateGroups 添加到页面的根元素中。

控件作者或应用程序开发人员使用VisualStateManager.VisualStateGroups 附加属性将VisualStateGroup 对象元素添加到XAML 中控件模板定义的根元素。

更多信息，请查看VisualStateManager.VisualStateGroups attached property。

所以我改变了你的代码如下：

<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>

而且效果很好。

Answer 2

你也可以用旧的方式来做。
在 XAML 中添加两种视觉状态：

    <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>
   .....

并处理页面大小改变事件：

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