Win10开发：视觉状态VisualState与自适应UI

Visual State Manager，也就是视觉状态管理器并不是Win10的新东西，早在Sliverlight时代就有了。以下简称VSM。

VSM可以根据程序的设置，在设定的条件下更改某些UI的呈现状态。在Win10中因为自适应UI的需求，因此需要VSM的助攻。在Win10中常常可以根据程序的运行环境，或者说运行平台（Phone，Tablet，PC等），或者运行平台的尺寸等各因素修改UI，以达到自适应的目的。

Microsoft Blend 提供了强大的VSM工具。要使用VSM，首先要知道在哪里打开它。有两种方法(实际是一种)

1、打开Blend，打开/新建一个工程，然后打开你要设计的XAML页面。在"状态"面板中就是VSM工具。如果找不到“状态”面板，可以在菜单->视图->状态窗口(Ctrl+Alt+S)中打开。

2、在VS中，在你要设计的XAML页面右键选择“在Blend中设计”，后面的就同1了。

默认的状态面板是空的：

注意右上角有两个Button

第一个作用是添加状态组，各种不同的State就是在基于状态组下的。

第二个的作用是选择是否打开过渡状态。打开之后，状态切换过渡时有动画就可以方便查看效果。

实例讲解VSM的使用

Demo目标：根据窗体的大小改变StackPanel子元素的堆叠方向，即Orientation值。

XAML：

<StackPanel x:Name="stackPanel">
      <Rectangle Fill="Blue" Width="250" Height="250"/>
      <Rectangle Fill="Yellow" Width="250" Height="250"/>
</StackPanel>

在状态面板中添加一个状态组，默认名字叫VisualStateGroup，添加状态组之后又会有两个按钮，一个是加号代表"添加状态"(在当前状态组中添加)，另一个是删除状态组。

添加两个状态，并修改其默认名称。效果如下：

每个状态的右边都有三个操作按钮，从左到右作用依次是：

“闪电”：编辑触发状态的条件

“+”：添加状态的过渡，点击之后看到如下：

注：*代表任意状态

“-”：删除当前状态

现在来具体操作“状态”

鼠标点击“VisualStateLandscape”，则代表当前编辑的这个状态

然后在“对象和时间线”面板上选择stackPanel，在属性面板上讲Orientation值设置为Horizontal

接着编辑VisualStatePortrait状态，同上面的方法一样将Orientation值设置为Vertical

现在看看XAML的代码：

<Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="VisualStateLandscape">
                    <VisualState.Setters>
                        <Setter Target="stackPanel.(StackPanel.Orientation)" Value="Horizontal"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="VisualStatePortrait">
                    <VisualState.Setters>
                        <Setter Target="stackPanel.(StackPanel.Orientation)" Value="Vertical"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <StackPanel x:Name="stackPanel">
            <Rectangle Fill="Blue" Width="250" Height="250"/>
            <Rectangle Fill="Yellow" Width="250" Height="250"/>
        </StackPanel>
    </Grid>

代码并不复杂，多出来的那些其实就是刚刚的操作产生的，如果你喜欢手动敲XAML当然也可以手写

现在添加触发条件Trigger

添加简单的几行，修改后的VisualStateGroup：

<VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="VisualStateLandscape">
                    <VisualState.Setters>
                        <Setter Target="stackPanel.(StackPanel.Orientation)" Value="Horizontal"/>
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="501"/>
                </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="VisualStatePortrait">
                    <VisualState.Setters>
                        <Setter Target="stackPanel.(StackPanel.Orientation)" Value="Vertical"/>
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>

其实就是添加了两段：

 <VisualState.StateTriggers>
           <AdaptiveTrigger MinWindowWidth=".."/>
  </VisualState.StateTriggers>

MinWindowWidth代表触发的最小窗体宽度，也可以用MinWindowHeight(最小窗体高度)

运行应用，通过改变窗体的宽度，就可以看到效果了

 窗体宽大于500时：

窗体宽小于500时：

除了根据窗体的宽或高触发状态，还可以自定义Trigger类(Custom triggers)，要继承自StateTriggerBase类

OrientationTrigger类根据窗体的横向或纵向来触发状态：

class OrientationTrigger:StateTriggerBase
    {
        public OrientationTrigger()
        {
            Window.Current.SizeChanged += (s, e) =>
            {
                SetActive(ApplicationView.GetForCurrentView().Orientation.Equals(this.Orientation));
            };
            SetActive(ApplicationView.GetForCurrentView().Orientation.Equals(this.Orientation));
        }
        public ApplicationViewOrientation Orientation { get; set; }
    }

然后修改状态的触发条件：

 <VisualState.StateTriggers>
           <t:OrientationTrigger Orientation="Landscape"/>
 </VisualState.StateTriggers>

和

<VisualState.StateTriggers>
            <t:OrientationTrigger Orientation="Portrait"/>
  </VisualState.StateTriggers>

此处t是个命名空间的引用

xmlns:t="using:App1.Triggers"

将应用部署到手机上，当横竖屏切换时就能看到效果了

State状态可以做的修改有很多，包括控件的字体、颜色、布局、大小等等，都可以在Blend中实现

i