[c#][Windows 10 | Windows 10 mobile]UWP自适应UI——VisualStateManager

在新的UWP中，写一份代码即可将应用在多种不同的分辨率上运行，那么怎么去自适应各种大小的UI，我们可以采用VisualStateManager。

目标：实现以下界面



我们先在xaml的根Grid中。写两个Grid，分别是第一页和第二页

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="redgrid" Grid.Column="0"/>
<Grid x:Name="yellowgrid" Grid.Column="1"/>
</Grid>

然后我们有两种方式，一种是打开Blend，另一种是通过代码的方式，初学者可以用Blend熟悉下VisualStateManager的使用方法
在Blend中，

，在状态页面添加VisualStateGroup，在VisualStateGroup内添加两个VisualState。

之后我们先选择小UI，在“对象和时间线”窗口中将yellowgrid的Visiblity设置为Collapsed，既在小页面中将第二页隐藏。

然后返回Visual Studio，我们发现Blend已经帮我们添加了一段代码

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="VisualState000">
<VisualState.Setters>
<Setter Target="yellowgrid.(FrameworkElement.Visibility)" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualState750">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

接下来我们设置下对UI的选择

在对应页面的构造函数中

this.SizeChanged += (s, e) =>
{
var state = "VisualState000";
if (e.NewSize.Width > 000 && e.NewSize.Width < 750)
{
}
if (e.NewSize.Width > 750)
{
state = "VisualState750";
}
VisualStateManager.GoToState(this, state, true);
};

之后，在小UI的页面跳转时，记得显示刚才隐藏的第二页，在返回上一页的时候再次隐藏第二页，即可实现对UI的自适应