創建分辨率自適應的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頁面進行等比例縮放得到。

圖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

源代碼下載：點此下載。