日期:2014-05-17  浏览次数:20758 次

新时尚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}" />
                <