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

来源：互联网发布：金刚经知乎编辑：程序博客网时间：2024/05/20 16:10

在新的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的自适应

1 0