WP8开发中多分辨率支持详解
支持的分辨率
Windows Phone 8中支持三种分辨率，下表中描述相应分辨率以及与OS 7.1分辨率的缩放关系
为不同分辨率设备准备不同的背景和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.
另外，我们也可以为每种分辨率提供一个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的尺寸
Windows Phone 8中支持三种分辨率，下表中描述相应分辨率以及与OS 7.1分辨率的缩放关系
为不同分辨率设备准备不同的背景和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 };
public static class ResolutionHelper
{
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");
}
}
}
{
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");
}
}
}
}
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，修改为如下内容：
<phone:PhoneApplicationPage
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>
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的尺寸
