1. 引言
Windows Phone 7平台只支持WVGA分辨率(480*800)的设备,这对于应用程序的UI设计来说是有利的,因为设计人员不用考虑多分辨率对UI控件布局的影响。但是,Windows Phone 8平台打破了这个局面,支持三种分辨率,分别为WVGA、WXGA(768*1280)和720p(720*1280)。随之而来的问题就是,开发者该如何应对多分辨率对应用程序的影响?这仿佛又把我们带回了Windows Mobile那个多分辨率的时代。那个时候,我们的应对方法就是使用控件的Docking and Anchoring属性,或者利用本地代码创建Orientation-Aware and Resolution-Aware的应用程序。其实,在Windows Phone 8平台上,我们处理的方式和方法也是类似的。
2. 分辨率对比
名称 | 分辨率 | 比例 | Windows Phone 7 | Windows Phone 8 |
WVGA | 480 × 800 | 15:9 | 支持 | 支持 |
WXGA | 768 × 1280 | 15:9 | 不支持 | 支持 |
720p | 720 × 1280 | 16:9 | 不支持 | 支持 |
表1:Windows Phone 7与Windows Phone 8分辨率对比
下图1展示了同一个页面在三种不同分辨率设备上的呈现。注意,图1以高度640为基准,将三种分辨率的Start页面进行等比例缩放得到。
图1:三种分辨率设备的Start页面
3. 控件自适应布局
从屏幕的比例上来看,由于Windows Phone 8支持15:9和16:9这两种比例,因此,控件的外观和布局在这两种分辨率下会呈现不同的效果。为了使得控件在不同分辨率的设备下展现合适的外观,开发者设计XAML布局的时候,不要设置固定的高度和宽度值。例如,为了创建一个自适应的控件布局界面,开发者可以使用类似Grid的容器,将其他控件放入该容器,并将其行和列的高度和宽度值设置为“*”和“Auto”。这样,应用程序会根据用户设备的实际分辨率对UI界面元素进行自适应拉伸。相反,若在代码中将控件的宽度和高度设置为固定值,那么界面布局就不会根据设备的实际分辨率进行自适应调整了。
以下的XAML代码就是一个很好的例子:
1: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
2: <Grid.RowDefinitions>
3: <RowDefinition Height="Auto" />
4: <RowDefinition Height="*" />
5: <RowDefinition Height="*" />
6: <RowDefinition Height="*" />
7: <RowDefinition Height="*" />
8: <RowDefinition Height="*" />
9: </Grid.RowDefinitions>
10: <Grid.ColumnDefinitions>
11: <ColumnDefinition Width="*" />
12: <ColumnDefinition Width="*" />
13: <ColumnDefinition Width="*" />
14: <ColumnDefinition Width="*" />
15: </Grid.ColumnDefinitions>
16:
17: <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
18: BorderThickness="3" BorderBrush="White" Padding="4"
19: Margin="12">
20: <TextBlock Text="423 + 61 = 484" FontSize="35" Padding="6" Height="69" />
21: </Border>
22: <Button Grid.Row="1" Grid.Column="0" Content="Clear" />
23: <Button Grid.Row="1" Grid.Column="1" Content="/" />
24: <Button Grid.Row="1" Grid.Column="2" Content="*" />
25: <Button Grid.Row="1" Grid.Column="3" Content="-" />
26: <Button Grid.Row="2" Grid.Column="0" Content="7" />
27: <Button Grid.Row="2" Grid.Column="1" Content="8" />
28: <Button Grid.Row="2" Grid.Column="2" Content="9" />
29: <Button Grid.Row="2" Grid.Column="3" Content="+" Grid.RowSpan="2" />
30: <Button Grid.Row="3" Grid.Column="0" Content="4" />
31: <Button Grid.Row="3" Grid.Column="1" Content="5" />
32: <Button Grid.Row="3" Grid.Column="2" Content="6" />
33: <Button Grid.Row="4" Grid.Column="0" Content="1" />
34: <Button Grid.Row="4" Grid.Column="1" Content="2" />
35: <Button Grid.Row="4" Grid.Column="2" Content="3" />
36: <Button Grid.Row="4" Grid.Column="3" Content="=" Grid.RowSpan="2" />
37: <Button Grid.Row="5" Grid.Column="0" Content="0" Grid.ColumnSpan="2" />
38: <Button Grid.Row="5" Grid.Column="2" Content="." />
39: </Grid>
40:
该XAML代码在三种不同分辨率的设备上展现如下图2所示:
图2:三种分辨率设备的应用程序界面
从图中我们可以发现,WXGA和WVGA设备界面中,控件的比例大小一致,而在720p分辨率的界面上,控件的比例做了自适应的调整。另外,开发者可以使用MinHeight 和MaxHeight属性来设置控件的最小高度和最大高度,因为高度小于8mm时,应用程序接收用户的指尖操作就有可能会变得不可靠。
4. 创建与设备分辨率相关的背景与资源
应用程序的资源包含了图片、视频、音频、图标等文件,它们往往占据了应用程序空间的很大比例。如果说在一个应用程序中包含三种不同分辨率的资源,那么其占用的程序空间可想而知。一般情况下,我们推荐开发者在工程中只包含WXGA分辨率的资源文件。因为WXGA分辨率的资源的解析度已经很高,而且能够在WVGA和720p分辨率下进行自动缩放。
当然,对于应用程序的背景图片来说,如果开发者想针对不同的分辨率采用不同的背景图片,那么我们可以采用下面的步骤来进行动态地加载。
(1)在工程中加入三种不同分辨率的图片,如wvga.jpg、wxga. jpg和720p. jpg。
(2)将图片的Copy to Output Directory属性修改为copy always。
(3)为工程添加一个名字为ResolutionHelper.cs的类文件,加入以下代码:
1: public enum Resolutions { WVGA, WXGA, HD720p };
2:
3: public static class ResolutionHelper
4: {
5: private static bool IsWvga
6: {
7: get
8: {
9: return App.Current.Host.Content.ScaleFactor == 100;
10: }
11: }
12:
13: private static bool IsWxga
14: {
15: get
16: {
17: return App.Current.Host.Content.ScaleFactor == 160;
18: }
19: }
20:
21: private static bool Is720p
22: {
23: get
24: {
25: return App.Current.Host.Content.ScaleFactor == 150;
26: }
27: }
28:
29: public static Resolutions CurrentResolution
30: {
31: get
32: {
33: if (IsWvga) return Resolutions.WVGA;
34: else if (IsWxga) return Resolutions.WXGA;
35: else if (Is720p) return Resolutions.HD720p;
36: else throw new InvalidOperationException("Unknown resolution");
37: }
38: }
39: }
40:
该类使用ScaleFactor属性来获取当前设备的分辨率。
(4)添加一个名为MultiResImageChooser.cs的类文件,并加入以下代码。
1: using System.Windows.Media.Imaging;
2:
3: public class MultiResImageChooserUri
4: {
5: public Uri BestResolutionImage
6: {
7: get
8: {
9: switch (ResolutionHelper.CurrentResolution)
10: {
11: case Resolutions.HD720p:
12: return new Uri("Assets/ 720p.jpg", UriKind.Relative);
13: case Resolutions.WXGA:
14: return new Uri("Assets/.jpg", UriKind.Relative);
15: case Resolutions.WVGA:
16: return new Uri("Assets/ wvga.jpg", UriKind.Relative);
17: default:
18: throw new InvalidOperationException("Unknown resolution type");
19: }
20: }
21: }
22:
23: }
24:
该类使用ResolutionHelper.cs中的方法来获取当前设备的分辨率,然后返回对应的BitmapImage。
(5)在主页面的xaml文件中,加入Image元素,并将其Source属性绑定到MultiResImageChooser.cs类所返回的Uri。代码如下:
1: <!--ContentPanel - place additional content here-->
2: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
3: <Image Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>
4: </Grid>
5:
(6)在App.xaml文件的<Application>元素中,加入以下xmlns命名空间的映射:
xmlns:h="clr-namespace: MultiResolutionDemo "
(7)在App.xaml文件的< Application.Resources>元素中,加入:
1: <!--Application Resources-->
2: <Application.Resources>
3: <h:MultiResImageChooser x:Key="MultiResImageChooser"/>
4: </Application.Resources>
该XAML代码在三种不同分辨率的设备上展现如下图3所示:
图3:三种分辨率设备的应用程序背景
5. 创建与设备分辨率相关的应用程序启动画面
应用程序启动画面(也称为splash screen),是在应用程序启动之后,第一个页面显示完成之前,这一段时间内,应用程序呈现给用户的图片画面。它有两个重要的作用:一个是提示用户应用程序正在启动过程中,另一个是可以展现诸如商标或者Logo等特定的信息。
一般来说,我们可以使用一个WXGA分辨率的图片(768 x 1280)来作为splash screen,因为对于其他两种分辨率的设备(WVGA和720p)来讲,应用程序会自动对图片进行拉伸,使其合适该屏幕。
如果我们要针对不同的设备设定不同的启动画面,那么我们可以为应用程序添加三种对应分辨率的jpg图片,注意,需要添加在应用程序的根目录,且文件名分别为:SplashScreenImage.screen-WVGA.jpg、SplashScreenImage.screen-720p.jpg和SplashScreenImage.screen-WXGA.jpg。并且,三个文件的Build Action属性必须设置为Content。如下图4所示。
图4:启动画面文件设置
参考链接:
1. Multi-resolution apps for Windows Phone 8
2. How to create a splash screen for Windows Phone
源代码下载:点此下载。
本文转自灵动生活博客园博客,原文链接:http://www.cnblogs.com/dearsj001/archive/2012/12/02/WindowsPhone8MultiResolution.html,如需转载请自行联系原作者