博客园客户端UAP开发随笔 -- 适配不同尺寸的屏幕

Windows 8诞生之初，Modern apps被设计在运行于全屏模式下。为了让Windows在运行Modern app时继续拥有前台多任务能力，Windows引入了一种全新的分屏技术“SnapView”。它允许将支持这种视图的Modern app贴在屏幕一边，以1/4 （实际上是逻辑分辨率宽度333左右）屏幕尺寸运行。这种视图特别适于工具类应用（如词典）和即时通讯类应用（如QQ）。分屏多任务也成了Windows 8区别于iPad和安卓Pad系统的重要特征。

当时程序员在考虑Modern App适配不同视图和屏幕分辨率时，一般主要考虑Landscape View (FullScreenSize, Fill)、Portriat View和SnapView，以及一些常见的分辨率如1366*768、1920*1080等。

可能是Windows的开发者们觉得仅仅是SnapView还不够，也可能是再次感悟到“Windows”的真谛，自Windows 10开始，Modern app允许以窗口形式运行。因此Modern app的窗口几乎可以是任何尺寸，Windows Store App的显示适配问题就需要再次拿出来聊聊了。

一般来说，Modern app尺寸变化的判断和适配有以下4个时机：

· VisualStateManager

· DetermineVisualState

· Window.SizeChanged

· OnApplyTheme

1. VisualStateManger 是最常用的方法，也是最方便的方法。它的用法也相对简单。先看一段XAML代码：

<Page>
<Grid x:Name=”LayoutGrid”>
<VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state inside the FlipView -->
            <VisualStateGroup>
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AutoCompleteContainer" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="800"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SP_Main" Storyboard.TargetProperty="Orientation">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigationBarContainer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SV_Main" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VerticalScrollViewerStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SP_Main" Storyboard.TargetProperty="Orientation">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="searchBarControl" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="10,0,10,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="searchBarControl" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="300"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
</Grid>
</Page>

VisualStateManager代码位于Page的LayoutGrid下，以Storageboard的形式给出了不同视图下需要做的适配性变化。以“SnapView”为例，我们通常给予SnapView更多关照，如container宽度的调整，ScrollView方向的调整，一些辅助的显示控件的隐藏等等。值得欣慰的是，使用VisualStateManager的XAML代码，你只需要考虑怎么来的，不需要考虑怎么回去。当VisualState发生变化时，StateManager会先让视图回到初始状态，然后再执行新的变化。

必应词典的SnapView就是用这种方式实现的:

2. DetermineVisualState

DetermineVisualState像是VisualStateManager的C#版本，它是一个重载函数，用于继承了LayoutAwarePage的Page。来看一段代码：

protected override string DetermineVisualState(ApplicationViewState viewState)
        {
            if (viewState == ApplicationViewState.Snapped)
            {
                if (_DefinitionControl != null)
                {
                    _DefinitionControl.SetToSnapStyle();
                }

                Grid_Layout.RowDefinitions[0].Height = new GridLength(60);
……
……
            }
            else
            {

             if (_DefinitionControl != null)
                {
                    _DefinitionControl.SetToLandscapeStyle();
                }

                Grid_Layout.RowDefinitions[0].Height = new GridLength(80);
                // semanticZoom.IsZoomOutButtonEnabled = true;

            }
…….
……
            return viewState.ToString();
        }

在DetermineVisualState中，可以手动添加一些代码，做一些特殊处理，或者用VisualStateManager不容易表达的变化。但DetermineVisualState用起来就没有VisualStateManager那么方便了，要知道怎么来的，还要知道怎么回去。这里的代码应该尽可能的少一些。

3. Window.Current.SizeChanged

如果想更精细的控制窗口变化时的界面效果，可以抓住在Window. Current .SizeChanged这个时机:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
            Window.Current.SizeChanged += Current_SizeChanged;
}
Protected override void OnNavigatedFrom(NavigationeventArgs e)
{
        Window.Current.SizeChanged-=Current_SizeChanged;
}

void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
{
//do something here            
}

4. OnApplyTheme

在自定义控件显示前，OnApplyTheme是一个比较常用的函数用来灵活的给页面元素赋值、修改控件外观。举个”栗“子：

protected override void OnApplyTemplate()
 {
            Grid layoutGrid = GetTemplateChild("Grid_Layout") as Grid;
            if (_counter % 2 == 0)
                layoutGrid.Background = Application.Current.Resources["HomepageDataContainerBackground1"] as SolidColorBrush;
            else
                layoutGrid.Background = Application.Current.Resources["HomepageDataContainerBackground2"] as SolidColorBrush;

            StackPanel SP_KeyWords = GetTemplateChild("SP_KeyWords") as StackPanel;
            int counter = 1;
            foreach (KeyWord keyWord in _DailyNews.KeyWords)
            {
                KeyWordTile keyWordTile = new KeyWordTile(keyWord, counter);
                keyWordTile.KeyWordClicked += dailyNewsTile_KeyWordTileClicked;
                SP_KeyWords.Children.Add(keyWordTile);
                counter++;
            }
…. Do other things.
            base.OnApplyTemplate();
        }

掌握了以上四点，相信大家都能做出看起来很美、适配广泛的的Modern App。

分享代码，改变世界！

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/博客园-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

GitHub open source link:

https://github.com/MS-UAP/cnblogs-UAP

MSDN Sample Code:

https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab