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:
Windows Store App link:
http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059
GitHub open source link: