新時尚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);