WP8开发中多分辨率支持详解
支持的分辨率
Windows Phone 8中支持三种分辨率,下表中描述相应分辨率以及与OS 7.1分辨率的缩放关系
Resolution | 分辨率 | 横纵比例 | OS7.1缩放关系 | 按比例缩放后分辨率 |
WVGA | 480 × 800 | 15:9 | 未缩放 | 480 × 800 |
WXGA | 768 × 1280 | 15:9 | 为7.1系统的1.6倍 | 480 × 800 |
720p | 720 × 1280 | 16:9 | 为7.1系统的1.5倍, 高度另增加80, 缩放前增加53 | 480 × 853 |
为不同分辨率设备准备不同的背景和asset
利用binding函数,运行时根据屏幕分辨率动态加载背景图片。
步骤如下:
1. 创建一个c# application工程--MyMultiBg
2. 准备三张图片,分别为MyImage.screen-wvga.jpg, MyImage.screen-wxga.jpg, and MyImage.screen-720p.jpg,放到Assets目录下,设置Copy to Output Directory 属性为copy always.
3. 工程添加ResolutionHelper.cs,代码如下:
public enum Resolutions { WVGA, WXGA, HD720p };
{
private static bool IsWvga
{
get
{
return Application.Current.Host.Content.ActualHeight == 800
&& Application.Current.Host.Content.ScaleFactor == 100;
}
}
private static bool IsWxga
{
get
{
return Application.Current.Host.Content.ScaleFactor == 160;
}
}
private static bool Is720p
{
get
{
return Application.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");
}
}
}
4. 工程添加MultiResImageChooser.cs,代码如下:
public class MultiResImageChooser
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,修改为如下内容:
x:Class="MyMultiBg.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>
</Grid.Background>
</Grid>
</phone:PhoneApplicationPage>
6. 运行效果如图,分别对应为WVGA/WXGA/720p设备截图,从图中我们可以看出,在不同分辨率的设备中背景图片是不同的。
Splash screens,即应用程序启动过程中显示图片
Windows Phone 8中已经将默认的480*800的SplashScreenImage.jpg替换为768*1280。如果不提供其他尺寸的图片,程序启动时候会根据手机分辨率对SplashScreenImage.jpg缩放。
另外,我们也可以为每种分辨率提供一个splash screen图片,
为每种分辨率提供不同的splash screen不像设置背景和asset那么复杂,把以下文件添加工程中就可以:
SplashScreenImage.Screen-WVGA.jpg
SplashScreenImage.Screen-WXGA.jpg
SplashScreenImage.Screen-720p.jpg
除了这些文件以外,工程中必须要包含SplashScreenImage.jpg文件。
Tile和应用程序图标
Tile和应用程序图标只需要提供WXGA分辨率的,框架将自动为WVGA/720p缩放。
下表为WXGA中Tile的尺寸
Tile size | WXGA |
App list(图标) | 100 × 100 |
Small | 159 × 159 |
Medium | 336 × 336 |
Large | 691 × 336 |