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頁面進行等比例縮放得到。

圖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，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的创建分辨率自适应的Windows Phone 8应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。