本文主要是介绍新时尚Windows8开发（27）：根据应用程序的视图状态调整UI，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
我们知道，在Win8的屏幕显示中，应用程序会有几种呈现状态，比如“完全占有”、“靠边站”、“填空”，还有屏幕方向的不同而产生不同的UI布局。
可能有朋友查看SDK内裤的时候，已经找到了Windows.UI.ViewManagement命名空间下的ApplicationView，通过它的Value属性得到一个关于呈现视图状态的枚举值。就是这个：
但是，你可能会想，这值我当然知道如何获取，问题是，我怎么知道应用程序什么时候被“靠边站”了？或者什么时候用户把它“填空”了呢？
我给你一个提示吧，你想一下，在发生上面四个状态时，你说当前窗口的什么地方会改变？或者说窗口的哪些属性变了？
想想吧。
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
时间到，想到了没有？对，就是窗口的尺寸大小变了，现在你明白了吧？只要我们处理当前窗口的SizeChanged事件就行了，我们都知道，Windows8的“板砖”风格应用默认都是全屏的，所以一旦他上课不认真，被老师罚他“靠边站”或者用户说“你一边玩去”，这时候窗口的Size肯定会改变的，你说，是不是这个道理？
好了，关键技术点找到了，而根据不同的视图状态而改变布局那就好办了，你可以用代码来改变。当然还可以用状态切换来处理。
不知道在自定义控件模板时发现了没有？都有VisualStateGroup和VisualState的出现，是不是？好的，那么我们为什么不把这个也应用到我们的Page里面呢？
理论永远都那么抽象的，所以，我的吹牛风格就是“less theory more actions”，这是我独创的英文词组，中文叫做“多干活，少吹牛”。因此，下面我们还是以事实来说话吧。
1、新建一个W8“板砖”风格应用，此处省略39个字。
2、打开主页MainPage.xaml，参考下面代码，直接上。
<Page
x:Class="AppViewExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppViewExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="navtbStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="3,30,8,8"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="黑体"/>
<Setter Property="FontSize" Value="45"/>
</Style>
<Style x:Key="ckitemStyle" TargetType="CheckBox">
<Setter Property="Margin" Value="0,2,30,1"/>
</Style>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="pnlLeft" Grid.Column="0" Margin="3">
<TextBlock Text=">> 我的主页" FontFamily="Global User Interface" Style="{StaticResource navtbStyle}"/>
<TextBlock Text=">> 精彩回顾" FontFamily="Global User Interface" Style="{StaticResource navtbStyle}"/>
<TextBlock Text=">> 作品展区" FontFamily="Global User Interface" Style="{StaticResource navtbStyle}"/>
<TextBlock Text=">> 关于 Me" FontFamily="Global User Interface" Style="{StaticResource navtbStyle}"/>
</StackPanel>
<StackPanel Grid.Column="1" Margin="21">
<TextBlock Text="你的姓名："/>
<TextBox/>
<TextBlock Margin="0,22,0,0" Text="你的出生日期："/>
<TextBox />
<TextBlock Text="选择你喜欢的体育运动：" Margin="0,38,0,0"/>
<StackPanel x:Name="plChoices" Orientation="Horizontal">
<CheckBox Content="羽毛球" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="跑步" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="乒乓球" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="足球" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="武术" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="踢键子" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="跳绳" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="跳楼" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="打群架" Style="{StaticResource ckitemStyle}" />
<CheckBox Content="单挑" Style="{StaticResource ckitemStyle}" />
</StackPanel>
<TextBlock FontSize="45" x:Name="tbState" Margin="1,60,1,0" TextWrapping="Wrap" HorizontalAlignment="Center"/>
</StackPanel>
<!-- 状态组 -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="appViews">
<VisualState x:Name="Nomal"/>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pnlLeft" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="plChoices" Storyboard.TargetProperty="Orientation">
<DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pnlLeft" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="plChoices" Storyboard.TargetProperty="Orientation">
<DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FullScreenLandscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pnlLeft" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="plChoices" Storyboard.TargetProperty="Orientation">
<DiscreteObjectKeyFrame KeyTime="0" Value="Horizontal"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Filled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pnlLeft" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="plChoices" Storyboard.TargetProperty="Orientation">
<DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Page>
别看这代码那么长，其实很简单，第一部分就是UI布局， 这个你随便，第二部分，就是声明，四种不同状态，注意，VisualStateManager.VisualStateGroups要包含在Grid里面，不要包含在Page里面，不然，待会你在代码里面调用VisualStateManager.GoToState方法时会变成Go to hell了。
3、接下来就是处理窗口大小改变的事件。
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// 引入以下命名空间
using Windows.UI.ViewManagement;
namespace AppViewExample
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.Loaded += (page, argp) =>
{
Window.Current.SizeChanged += Current_SizeChanged;
};
this.Unloaded += (page, argp) =>
{
Window.Current.SizeChanged -= Current_SizeChanged;
};
}
void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
switch (ApplicationView.Value)
{
case ApplicationViewState.Filled:
VisualStateManager.GoToState(this, "Filled", false);
tbState.Text = "当前视图：Filled";
break;
case ApplicationViewState.FullScreenLandscape:
VisualStateManager.GoToState(this, "FullScreenLandscape", false);
tbState.Text = "当前视图：FullScreenLandscape";
break;
case ApplicationViewState.FullScreenPortrait:
VisualStateManager.GoToState(this, "FullScreenPortrait", false);
tbState.Text = "当前视图：FullScreenPortrait";
break;
case ApplicationViewState.Snapped:
VisualStateManager.GoToState(this, "Snapped", false);
tbState.Text = "当前视图：Snapped";
break;
default:
break;
}
}
}
}
在页面不显示的时候，处理Window.Current.SizeChanged事件没啥意思，所以，我这里，在页面Loaded之后附加事件处理程序，而当页面被Unloaded后就解除事件绑定。
测试的时候，最好使用模拟器，因为在模拟器中可以通过以下工具条来旋转屏幕。
一切准备好了，在调试按钮的下拉列表中选择“模拟器”，然后开始运行，接着就看你的操作了，看看我截的几个图，试一试你会不会操作。
【补充】
上面的代码有些复杂了，其实我们可以用一行代码就完成了。
VisualStateManager.GoToState(this, Windows.UI.ViewManagement.ApplicationView.Value.ToString(), false);
这篇关于新时尚Windows8开发（27）：根据应用程序的视图状态调整UI的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
