博客园客户端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