Windows phone 多分辨率适配问题

因为之前的 windows phone 应用是基于 7.1 SDK 开发的，现在随着 Windows Phone 8 产品的上市，之前的应用需要做一下分辨率适配。目前，新版的 Windows Phone CSDN 文档还只有英文版，想着就把它翻译一下，加深印象。大概浏览了一下新闻，即将上市的 Windows Phone 8 的手机中，Lumia 920 是 1024x768 的分辨率，为 15:9 ,所以和之前的 800x480 的比例相同,所以之前的应用不会出现黑边,而三星和 HTC 的旗舰机都是 1024x720 的分辨率, 为 16:9, 所以如果这两款机型运行 7.1 OS 上面的应用,会出现黑边。其它的中、低端的 wp8 都是 800x480 的分辨率，所以跑起来无障碍。

原文链接：http://msdn.microsoft.com/zh-CN/library/windowsphone/develop/jj206974(v=vs.105).aspx#BKMK_Supportedresolutions

翻译如下:

Windows Phone 8 的多分辨率适配

应用平台: 只有 Windows Phone 8

在 Windows Phone 8 支持 WVGA、WXGA、和 720p 的屏幕，不同于 Windows Phone 7 只支持 WVGA 屏幕分辨率。这篇主题讨论

Windows Phone 8 上面的不同分辨率支持，并且解释如何对于不同目标手机采用不同解决方案。

这篇文章包含下面的章节:

支持的分辨率
调整适应布局
根据分辨率选择背景和资源
启动画面
Tile 和应用 icons
相关主题

支持的分辨率:

下面的表描述了在 Windows Phone 8 中不同的分辨率和宽高比:

The following table describes the resolutions and aspect ratios that are supported in Windows Phone 8.

类型	分辨率	宽高比	与Windows Phone OS 7.1 的转移	按比例缩小
WVGA	480 × 800	15:9	不需做改变	480 × 800
WXGA	768 × 1280	15:9	放大 1.6 被	480 × 800
720p	720 × 1280	16:9	放大 1.5 倍,多出了80像素的高(放大后,多出 53 像素的高)	480 × 853

下面的描述显示了一个页面在不同的手机分辨率中呈现的区别:

调整适应布局:

因为所有的 Windows Phone OS 7.1 的手机只有一个分辨率。所以在 7.1 的手机上内容的布局会在其它手机上很好地显示相同的布局。你不需要考虑的内部每个控件如何伸展和流动。

在 Windows Phone 8 中，你必须控件和其它 UI 元素，从而使它们在不同的宽高比中看起来都不错。因为 WP8 可能是宽高比为 15:9 和 16:9 中的之一，所以不同的宽高比会在另一个宽高比中会有不希望的呈现。

使一个页面在 WVGA、WXGA、720P 这几种分辨率中正确的呈现，不能硬编码控件的宽、高和它们的 Margin 属性。在

你从工具栏中拖放控件到页面中时，删除或者仔细测试这些自动添加的 Margin 属性。

要创建一个可适应的布局,你可以使用一个像 Grid 这样的容器控件。替换掉控件硬编码的宽和高，把它们放到 grid 控件中，

并使用 * 和 Auto 值去设置 grid 的行和列。使用这种方法,应用程序会根据不同用户的手机收缩控件,从而延伸到合适的高度和宽度。如果你硬编码控件的宽和高,布局系统不能适应到其它的分辨率中。

下面的 XAML 代码展示了,为一个布局使用 Grid 控件来显示宽高。

xaml ：

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="3" BorderBrush="White" Padding="4" 
        Margin="12">
            <TextBlock Text="423 + 61 = 484" FontSize="35" Padding="6" Height="69" />
        </Border>
        <Button Grid.Row="1" Grid.Column="0" Content="Clear" />
        <Button Grid.Row="1" Grid.Column="1" Content="/" />
        <Button Grid.Row="1" Grid.Column="2" Content="*" />
        <Button Grid.Row="1" Grid.Column="3" Content="-" />
        <Button Grid.Row="2" Grid.Column="0" Content="7" />
        <Button Grid.Row="2" Grid.Column="1" Content="8" />
        <Button Grid.Row="2" Grid.Column="2" Content="9" />
        <Button Grid.Row="2" Grid.Column="3" Content="+" Grid.RowSpan="2" />
        <Button Grid.Row="3" Grid.Column="0" Content="4" />
        <Button Grid.Row="3" Grid.Column="1" Content="5" />
        <Button Grid.Row="3" Grid.Column="2" Content="6" />
        <Button Grid.Row="4" Grid.Column="0" Content="1" />
        <Button Grid.Row="4" Grid.Column="1" Content="2" />
        <Button Grid.Row="4" Grid.Column="2" Content="3" />
        <Button Grid.Row="4" Grid.Column="3" Content="=" Grid.RowSpan="2" />
        <Button Grid.Row="5" Grid.Column="0" Content="0" Grid.ColumnSpan="2" />
        <Button Grid.Row="5" Grid.Column="2" Content="." />
    </Grid>

截图:

这个应用在 WVGA、WXGA 和 720P 的屏幕中有一个动态的布局。在 WXGA WVGA 屏幕的手机中显示相同, 因为 Height 属性设置为 Auto ,从而按钮会收缩均匀适合其余的可用空间。在 720P 分辨率,按钮将略高于在 WVGA 和 WXGA 的分辨率。

你可以设置元素的 MinHeight 和 MaxHeight 来限制它的最小高度和最大高度。需要着重注意的是屏幕中的任何元素在不同的方向下，低于 8mm 时，用户点击起来都会很费劲。同理你可以设置元素的 MinHeight 和 MinWidth 属性。你可以结合使用这些属性,允许一个布局缩减了 WVGA分辨率 ,但不要缦伸了 720 p分辨率。

根据分辨率选择背景和资源

在应用程序中,资产如图像、视频、音频和图标会占很大的比例。对于大多数应用程序,我们建议您只包括并且 WXGA 资产。并且 WXGA 资产有最高的质量,他们自动扩展到适合其他的屏幕分辨率。

由于 WXGA、WVGA 和 720P 的屏幕的区别，在有些情况下你可以想为不同的分辨率使用不同的背景图片。当你想要在你的应用程序中包含所有支持的分辨率图片,使用以下步骤来检测设备分辨率,然后在运行时间加载相关的图像。

在运行时加载图像分辨率依赖：

1、在你的项目文件中，分别为 WVGA、WXGA 和 720P 的屏幕添加图片。在这个示例中，我们把文件分别命名为

MyImage.screen-wvga.png, MyImage.screen-wxga.png, and MyImage.screen-720p.png.

2、把图片的 Copy to Output Directory 设置为 copy always

3、在工程中添加一个类文件，命名为 ResolutionHelper.cs，然后把下面的代码黏贴到这个新类中：

C#:

public enum Resolutions { WVGA, WXGA, HD720p };

public static class ResolutionHelper
{
   private static bool IsWvga
   {
      get
      {
         return App.Current.Host.Content.ScaleFactor == 100;
      }
   }

   private static bool IsWxga
   {
      get 
      { 
         return App.Current.Host.Content.ScaleFactor == 160; 
      }
   }
     
   private static bool Is720p
   {
      get 
      { 
         return App.Current.Host.Content.ScaleFactor == 150; 
      }
   }

   public static Resolutions CurrentResolution
   {
      get
      {
         if (IsWvga) return Resolutions.WVGA;
         else if (IsWxga) return Resolutions.WXGA;
         else if (Is720p) return Resolutions.HD720p;
         else throw new InvalidOperationException("Unknown resolution");
      }
   }
}

上面的类使用 ScaleFactor 属性来确定设备的分辨率。

4、添加一个新类文件命名为 MultiResImageChooser.cs ，并且包含下面的代码。这个类使用 ResolutionHepler.cs 类来判断设备

的分辨率，然后，根据之前添加到工程中的图片的路径，为 BitmapImage 返回正确的 URI。

C# ：

using System.Windows.Media.Imaging;

    public class MultiResImageChooserUri
    {
        public Uri BestResolutionImage
        {
            get
            {
                switch (ResolutionHelper.CurrentResolution)
                {
                    case Resolutions.HD720p:
                        return new Uri("Assets/MyImage.screen-720p.jpg", UriKind.Relative);
                    case Resolutions.WXGA:
                        return new Uri("Assets/MyImage.screen-wxga.jpg", UriKind.Relative);
                    case Resolutions.WVGA:
                        return new Uri("Assets/MyImage.screen-wvga.jpg", UriKind.Relative);
                    default:
                        throw new InvalidOperationException("Unknown resolution type");
                }
            }
        }

    }

5、在 MainPage.xaml 文件中，添加一个 Image 元素，然后把它的 Source 属性绑定到 MultiResImageChooser.cs 类返回的 URI。

xaml：

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Image Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>
</Grid>

6、在 App.xam 文件的 <Application> 节点中添加下面的 xmlns 命名空间映射：

xaml：

xmlns:h="clr-namespace:MultiResSnippet"

7、在 App.xaml 文件中，添加下面的资源：

<!--Application Resources-->
<Application.Resources>
   <h:MultiResImageChooser x:Key="MultiResImageChooser"/>
</Application.Resources>

启动画面

要为所有分辨率的手机显示一个开始屏幕，使用唯一的名称为 SplashScreenImage.jpg 的一张 768x1280 的图片文件。手机会自动调整缩放比来正确的显示尺寸。

如果你想为所有分辨率的屏幕提供相应的启动画面,你可以添加图像并指定相应文件的名字：

SplashScreenImage.Screen-WVGA.jpg
SplashScreenImage.Screen-WXGA.jpg
SplashScreenImage.Screen-720p.jpg

所有的启动图片必须放到你的工程中的根目录下。

想要了解更新的信息，看 How to create a splash screen for Windows Phone.

Tile 和应用 icons：

对于 Tile 和应用的 icons ，你只为 WXGA 分辨率准备的图片。手机会为 WVGA 和 720P 的屏幕自动缩放图片。关于 TIle 和它们的尺寸：Tiles for Windows Phone.