4(共 4)对本文的评价是有帮助 - 评价此主题

Windows Phone 8 的多分辨率应用

2013/12/5

适用于:仅限于 Windows Phone 8。

支持具有 WVGA、WXGA、720p 和 1080p 分辨率的手机。这与仅支持 WVGA 分辨率的 Windows Phone OS 7.1 不同。本主题将介绍 支持的分辨率,以及如何开发面向具有不同分辨率的手机的应用。

本主题包含以下各节。

下表描述了 中支持的分辨率和纵横比。

分辨率

分辨率

纵横比

与 Windows Phone OS 7.1 相比的新增内容

按比例缩放的分辨率

WVGA

480 × 800

15:9

无。这是 Windows Phone OS 7.1 唯一支持的分辨率。

480 × 800

WXGA

768 × 1280

15:9

1.6x 方向缩放

480 × 800

720p

720 × 1280

16:9

1.5x 方向缩放,高度增加 80 个像素(缩放后为 53 个像素)

480 × 853

1080p

1080 x 1920

16:9

1.5x 方向缩放,高度增加 80 个像素(缩放后为 53 个像素)

480 × 853

在 1080p 分辨率的屏幕上,尽管操作系统在内部使用 2.25x 方向缩放,但 ScaleFactor 属性将返回 1.5。

下图所示为同一屏幕显示在具有不同分辨率的手机中。

Examples of app running on multiple resolutions

由于所有 Windows Phone OS 7.1 手机均具有相同的分辨率,您可以布局内容以使之在 Windows Phone OS 7.1 手机上显示良好,并确定它将在所有 Windows Phone OS 7.1 手机上显示良好。您无需考虑每个控件如何伸展和流动等内部问题。

在 中,您需要布局控件和其他 UI 元素,以使之在每种支持的纵横比中显示良好。因为 手机可能具有两种纵横比(15:9 或 16:9)之一,针对一种纵横比布局的控件可能在另一种纵横比下出现意外布局。

要使页面正确呈现在具有 WVGA、WXGA、720p 和 1080p 分辨率的手机上,请不要硬编码控件的长和宽或边距。从工具箱中拖放控件后,请删除或仔细测试自动添加的边距。

若要创建可适应布局,您可以使用像网格控件之类的容器。不是对控件的高和宽进行硬编码,而是将控件放置在网格中,并使用 *Auto 值设置其行和列的高和宽。如此一来,应用可以拉伸或缩放控件以使之适合用户手机的高和宽。如果您对控件的高和宽进行硬编码,布局不适应其他分辨率。

重要说明重要说明:

确保使用每个纵横分辨率(15:9 和 16:9)测试您的应用。除非您针对每个分辨率具有不同的图像资产,否则无需在每个像素分辨率下进行测试。

以下 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 和 1080p 的动态布局。WVGA 和 WXGA 手机上的输出框具有相同大小,由于 Height 属性被设置为 Auto,按钮将均匀收缩以适应剩余的可用空间。在 720p 和 1080p 分辨率下,按钮稍微高于其在 WVGA 和 WXGA 分辨率下的位置。

可以使用 MinHeightMaxHeight 属性设置最小高度和最大高度。请务必记住,屏幕上的在任何方向上不足 8mm 的任何元素都将难以用手指可靠地按下。可以使用 MinHeight 属性和MinWidth 以确保交互式元素不会过度收缩。您可以结合这些属性以允许 WVGA 分辨率下的布局收缩,但不可用于较高分辨率下的拉伸。

资产,如图形、视频、音频和图标等,在应用的大小中占据了很大比例。包括应用中所有分辨率的资产使用了应用的大量空间。对于大多数应用,我们建议仅包含 WXGA 资产。WXGA 资产的质量最高,并且它们将自动缩放以在其他分辨率下显示良好。

由于 WXGA/WVGA 和 720p/1080p 分辨率的纵横比不同,某些情况下,您可能想要在应用中包含用于不同分辨率的独特背景图像。当您想要在应用中包含用于所有支持的分辨率的图像时,可先使用以下步骤以检测设备分辨率,然后在运行时加载相关的图像。

在运行时加载分辨率相关的图像的步骤

  1. 在项目文件中,添加用于 WVGA、WXGA 和 720p 分辨率的图像。在此示例中,我们将文件命名为 MyImage.screen-wvga.png、MyImage.screen-wxga.png 和 MyImage.screen-720p.png。

  2. 将图像的“复制到输出目录”属性设置为“始终复制”

  3. 将名为 ResolutionHelper.cs 的类添加到项目,然后将以下代码复制并粘贴到新类中。

    public enum Resolutions { WVGA, WXGA, HD };
    
    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 IsHD
       {
          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 (IsHD) return Resolutions.HD;
             else throw new InvalidOperationException("Unknown resolution");
          }
       }
    }
    

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

  4. 添加包含以下代码的名为 MultiResImageChooser.cs 的类。此类使用在上一步中创建的 ResolutionHelper.cs 类来确定设备的分辨率。然后,它将返回新的 BitmapImage(从对应于检测到的分辨率的图像的 URI 中创建出)。

    using System.Windows.Media.Imaging;
    
        public class MultiResImageChooserUri
        {
            public Uri BestResolutionImage
            {
                get
                {
                    switch (ResolutionHelper.CurrentResolution)
                    {
                        case Resolutions.HD:
                            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。

    
    <!--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.xaml 的 <Application> 元素中,添加以下 xmlns 命名空间映射。

    xmlns:h="clr-namespace:MultiResSnippet"
    
  7. 在 App.xaml 中,添加以下应用程序资源。

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

若要显示所有分辨率的初始屏幕,则使用分辨率为 768 × 1280 的名为 SplashScreenImage.jpg 的单个图像文件。手机会自动将图像缩放至适当大小。

如果想要提供各种像素的像素完美的初始屏幕,可以使用以下文件名添加图像:

  • SplashScreenImage.Screen-WVGA.jpg

  • SplashScreenImage.Screen-WXGA.jpg

  • SplashScreenImage.Screen-720p.jpg

默认情况下, 将在 1080p 手机上使用 720p 初始屏幕文件。

重要说明重要说明:

所有初始屏幕图像必须包含在应用项目的根文件夹中。

有关更多信息,请参见如何为 Windows Phone 创建初始屏幕

对于图块和应用图标,必须只包含适用于 WXGA 分辨率的图像。手机会自动将图像缩放为适用于 WVGA、720p 和 1080p 屏幕的合适大小。有关图块及其大小的更多信息,请参见 Windows Phone 的图块

显示:
© 2014 Microsoft. 版权所有。