Windows phone 多分辨率适配问题

最新推荐文章于 2023-10-07 19:57:36 发布

qxue2000

最新推荐文章于 2023-10-07 19:57:36 发布

阅读量729

点赞数

分类专栏： WP7

WP7 专栏收录该内容

57 篇文章

订阅专栏

本文介绍 Windows Phone 8 的多分辨率适配方法，包括 WVGA、WXGA 和 720p 屏幕的支持策略。文章详细讲解了如何调整布局以适应不同分辨率，如何根据分辨率选择背景资源，以及启动画面的适配技巧。

Windows phone 多分辨率适配问题

2012/11/8 10:48:32 | 阅读 28次

因为之前的 windows phone 应用是基于 7.1 SDK 开发的，现在随着 Windows Phone 8 产品的上市，之前的应用需要做一下分辨率适配。目前，新版的 Windows Phone 优快云文档还只有英文版，想着就把它翻译一下，加深印象。大概浏览了一下新闻，即将上市的 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 ：

截图:

这个应用在 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：

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