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：啓動畫面文件設置
參考鏈接：
