Windows Phone 8 的多分辨率应用

转载 2013年05月06日 16:12:20

转自:http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/jj206974(v=vs.105).aspx

适用于:仅限于 Windows Phone 8。

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

 

支持的分辨率

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

分辨率

分辨率

纵横比

与 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

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

Examples of app running on multiple resolutions
适应您的布局

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

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

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

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

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

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

 

分辨率相关的背景和资产

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

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

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

  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, 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 的类。此类使用在上一步中创建的 ResolutionHelper.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。

    <!--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

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

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

 

图块和应用图标

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

 

windows phone:Windows Phone 8 的多分辨率应用

转载于 http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/jj206974(v=vs.105).aspx#BKMK_Supp...
  • afei198409
  • afei198409
  • 2013年04月22日 14:58
  • 596

Windows Phone 8细节:更人性化的多任务管理

大家知道,Windows Phone从7.5版本开始加入多任务管理机制,被切掉的任务冻结在后台(最多冻结5个),平时只占用极少内存,一旦通过长按后退键出现的任务管理器激活,就瞬间恢复到之前的运行状态。...
  • roc1010
  • roc1010
  • 2012年10月31日 20:12
  • 617

注册成为Windows Phone开发者并且解锁Windows Phone 8.1手机

上篇文章介绍了如何使用Qt Creator和Visual Studio构建Windows Phone 8.1应用并且在Windows Phone 8.1模拟器上运行。当然了,能够运行在模拟器只能算第一...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2014年08月28日 13:02
  • 3699

Windows 8.1 下 Windows Phone 开发环境的搭建流程

转载:Windows 8.1 下 Windows Phone 开发环境的搭建流程 Windows 8.1 下 Windows Phone 开发环境的搭建流程...
  • LH806732
  • LH806732
  • 2014年04月14日 19:24
  • 3802

UTF-8字符在WindowsPhone的WebBrowser控件中显示(解决乱码)

International UTF-8 Characters in Windows Phone 7 WebBrowser Control 我已经好久没有更新博客了,好像最近没有什么好要分享给大家的。...
  • huangliangjie
  • huangliangjie
  • 2012年01月12日 17:34
  • 5279

将现有C++代码移植到Windows 8/Windows Phone 8

将 C++ 应用程序向 Windows 8/Windows Phone 8 迁移时,首先要考虑的是用户界面。几乎没有哪个应用的界面能适合以触摸为中心的 Windows 8 界面。UI 层有四个选项: ...
  • zhaogengzi
  • zhaogengzi
  • 2014年11月17日 17:50
  • 380

WindowsPhone消息推送服务

一.WP消息推送工作方式 如果了解C/S架构,我们可以知道客户端到服务器的消息传输可以是双向的,客户端既可以主动从服务器获取消息,也可以被动接受来自服务器通知,而不像纯B/S架构浏览器只能主动从服务...
  • moxiaomomo
  • moxiaomomo
  • 2012年07月14日 17:26
  • 7640

win 10 mobile VS2015 开发环境搭建【App开发】

下载VS2015 community英文版,并安装,选择安装windows 10 mobile emulator,模拟器启动后如下:...
  • code_style
  • code_style
  • 2015年10月21日 16:46
  • 3572

windows phone:WP8多分辨率解决方案

转载于 http://www.cnblogs.com/beyoung/archive/2012/08/07/2627448.html   看见你出剪刀我再出石头 由于之前Windows Phon...
  • afei198409
  • afei198409
  • 2013年04月18日 17:36
  • 591

Windows phone 多分辨率适配问题

Windows phone 多分辨率适配问题 2012/11/8 10:48:32 | 阅读28次       因为之前的 windows phone 应用是基于 7.1...
  • qxue2000
  • qxue2000
  • 2013年01月17日 23:56
  • 504
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Windows Phone 8 的多分辨率应用
举报原因:
原因补充:

(最多只允许输入30个字)