转自: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 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 分辨率下的位置。
可以使用 MinHeight 和MaxHeight 属性设置最小高度和最大高度。请务必记住,屏幕上的在任何方向上不足 8mm 的任何元素都将难以用手指可靠地按下。可以使用MinHeight 属性和MinWidth 以确保交互式元素不会过度收缩。您可以组合这些属性,以允许 WVGA 分辨率下的布局收缩,但不可用于 720p 分辨率下的拉伸。
分辨率相关的背景和资产
资产,如图形、视频、音频和图标等,在应用的大小中占据了很大比例。包括应用中所有分辨率的资产使用了应用的大量空间。对于大多数应用,我们建议仅包含 WXGA 资产。WXGA 资产的质量最高,并且它们将自动缩放以在其他分辨率下显示良好。
由于 WXGA/WVGA 和 720p 分辨率的纵横比不同,某些情况下,您可能想要在应用中包含用于不同分辨率的独特背景图像。当您想要在应用中包含用于所有支持的分辨率的图像时,可先使用以下步骤以检测设备分辨率,然后在运行时加载相关的图像。
在运行时加载分辨率相关的图像的步骤
-
在项目文件中,添加用于 WVGA、WXGA 和 720p 分辨率的图像。在此示例中,我们将文件命名为 MyImage.screen-wvga.png、MyImage.screen-wxga.png 和 MyImage.screen-720p.png。
-
将图像的“复制到输出目录”属性设置为“始终复制”。
-
将名为 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 属性确定设备的分辨率。
-
添加包含以下代码的名为 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"); } } } }
-
在 MainPage.xaml 中,添加 Image 元素并将其Source 属性绑定到由MultiResImageChooser.cs 类返回的 URI。
XAML<!--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>
-
在 App.xaml 的 <Application> 元素中,添加以下 xmlns 命名空间映射。
XAMLxmlns:h="clr-namespace:MultiResSnippet"
-
在 App.xaml 中,添加以下应用程序资源。
<!--Application Resources--> <Application.Resources> <h:MultiResImageChooser x:Key="MultiResImageChooser"/> </Application.Resources>
图块和应用图标
今天的文章多分辨率适配_win系统安装怎么用分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/58284.html