创建分辨率自适应的WP8应用程序.doc

创建分辨率自适应的Windows Phone 8应用程序 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 8和Windows Phone 7平台支持的分辨率情况如下表所示： 名称 分辨率 比例 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页面进行等比例缩放得到。 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