Win10系列:UWP界面布局进阶1
全新的Windows 10 操作系统支持多种视图模式,用户可以根据需要选择不同的视图模式显示应用。当用户同时浏览或操作多个应用程序时,可以将应用视图调整为辅屏视图或填充视图,这样在一个屏幕中可以同时对两个应用进行操作,并且两个应用之间不会相互受到影响。除此之外当用户在使用平板电脑阅读电子书时,可以选择使用全屏竖直视图以获得更加真实的阅读体验。在图5-1中列出了Windows 10系统中几种常用的视图模式。
(1)全屏水平视图 (2)辅屏视图
(3)填充视图 (4)全屏竖直视图
图5-1 四种不同的视图模式
其中,辅屏视图和填充视图对屏幕的分辨率有一定的要求,辅屏视图的水平宽度为320像素,其余的空间需要分配给拆分器(22像素)和填充视图,所以显示屏的水平分辨率应在1366像素以上,这样填充视图才能具有至少1024像素的水平分辨率。当视图模式发生变化时,需要重新调整应用界面中元素的布局,以确保用户可以正常的浏览和操作应用界面。下面通过一个示例来介绍如何判断当前应用的视图模式以及根据不同的视图模式来调整应用界面的布局,在本示例中将为页面添加两个图形,当视图模式发生变化时调整图形在页面中的位置。
启动Visual Studio 2012,新建一个Windows应用商店的空白应用程序项目并将其命名为ViewMode。打开MainPage.xaml文件,在Grid元素中添加Rectangle(矩形)元素和Ellipse(椭圆)元素,分别设置两个元素的Name属性值为ViewRectangle与ViewEllipse,通过Height、Width及Margin属性设置图形大小并调整图形到页面的中间位置,完成后的代码如下所示:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Rectangle x:Name="ViewRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="260" Margin=" 773,221,0,0 " Stroke="Black" VerticalAlignment="Top" Width="260"/>
<Ellipse x:Name="ViewEllipse" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="260" Margin=" 376,221,0,0 " Stroke="Black" VerticalAlignment="Top" Width="260"/>
</Grid>
界面效果如图5-2所示。
图5-2 图形效果
接下来编写后台代码实现当视图发生改变时调整界面元素的位置,打开MainPage.xaml.cs文件,在MainPage构造方法中为SizeChanged事件注册事件处理方法,将其命名为MainPage_SizeChanged,当视图尺寸发生变化时会调用这个方法。MainPage构造方法代码如下所示:
public MainPage()
{
this.InitializeComponent();
SizeChanged += MainPage_SizeChanged;
}
下面定义MainPage_SizeChanged方法,在方法中通过对当前视图模式进行判断,并根据不同的视图模式重新调整图形在页面中的位置。MainPage_SizeChanged方法代码如下所示:
private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
//视图模式为全屏水平视图
if (ApplicationView.Value == ApplicationViewState.FullScreenLandscape)
{
ViewRectangle.Width = 260;
ViewRectangle.Height = 260;
ViewEllipse.Width = 260;
ViewEllipse.Height = 260;
ViewRectangle.Margin = new Thickness(846, 221, 0, 0);
ViewEllipse.Margin = new Thickness(283, 221, 0, 0);
}
//视图模式为辅屏视图
else if (ApplicationView.Value == ApplicationViewState.Snapped)
{
ViewRectangle.Width = 166;
ViewRectangle.Height = 166;
ViewEllipse.Width = 166;
ViewEllipse.Height = 166;
ViewRectangle.Margin = new Thickness(81, 460, 0, 0);
ViewEllipse.Margin = new Thickness(81, 92, 0, 0);
}
//视图模式为填充视图
else if (ApplicationView.Value == ApplicationViewState.Filled)
{
ViewRectangle.Width = 220;
ViewRectangle.Height = 220;
ViewEllipse.Width = 220;
ViewEllipse.Height = 220;
ViewRectangle.Margin = new Thickness(582, 261, 0, 0);
ViewEllipse.Margin = new Thickness(182, 261, 0, 0);
}
//视图模式为全屏竖直视图
else if (ApplicationView.Value == ApplicationViewState.FullScreenPortrait)
{
ViewRectangle.Width = 220;
ViewRectangle.Height = 220;
ViewEllipse.Width = 220;
ViewEllipse.Height = 220;
ViewRectangle.Margin = new Thickness(310, 724, 0, -176);
ViewEllipse.Margin = new Thickness(310, 329, 0, 0);
}
}
在上面的代码中,通过Windows.UI.ViewManagement命名空间下的ApplicationView类的Value属性值来判断当前的视图模式。应用程序的视图模式由ApplicationViewState枚举值指定,它包含的枚举成员有FullScreenLandscape(全屏水平视图)、Snapped(辅屏视图)、Filled(填充视图)以及FullScreenPortrait(全屏竖直视图)。在判断当前的视图模式后重新设置图形的Height、Width及Margin属性来调整图形的大小及位置。
在模拟器中运行程序,并调整不同的视图模式,可以看到界面中的图形显示方式会随着视图模式的改变而发生变化,显示效果如图5-3所示。
(1)全屏水平视图 (2)辅屏视图
(3)填充视图 (4)全屏竖直视图
图5-3不同视图模式下图形的显示效果
当视图模式发生变化,尤其是当用户选择辅屏视图或填充视图时,应用界面中的原有内容可能无法完整的显示出来,这时就需要暂时隐藏次要内容。如果无法保证应用程序在不同视图模式下提供相同的功能与交互,可以为用户提供一个出口点,比如添加一个按钮,当用户单击按钮时通过编程方式将应用调整至合适的视图模式。另外,填充视图和辅屏视图只是将界面布局进行调整,并不会影响用户原有的工作状态。
Win10系列:UWP界面布局进阶1相关推荐
- Win10系列:UWP界面布局基础11
样式继承 为了使样式便于维护及重复使用,可以在一个样式上引用其他的样式,这就是样式继承.样式继承的方法是:在Style元素的BasedOn属性上使用StaticResource标记扩展来引用被继承的样 ...
- Win10系列:UWP界面布局基础4
类型转换 前面讲到过,在定义元素时可以通过Attributes特性方式为其设置属性并为属性赋值,在实际开发中所赋予的值可能和属性本身的数据类型不相符,这时XAML解析器就会使用类型转换器(Type C ...
- 一步一步学Silverlight 2系列(3):界面布局
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(3):界面布局_转载
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- Open3D-GUI系列教程(三)界面布局
界面布局 open3d版本:0.14.1 open3d的gui界面可以通过gui.Window.set_on_layout()来精准控制窗口中子控件的布局. 1. 创建窗口 首先还是先把框架搭起来: ...
- CSS 主流布局进阶
CSS 主流布局进阶 前言 一.CSS 还原 UI 设计 1.Photoshop 还原 UI 设计 (1)PhotoShop 下载安装 (2)添加辅助线 (3)尺寸.文字.颜色等信息的获取 (4)切图 ...
- 【转】C#开发PACS医学影像处理系统(二):界面布局之菜单栏
转自:C#开发PACS医学影像处理系统(二):界面布局之菜单栏 - 乔克灬叔叔 - 博客园 在菜单栏布局上,为了使用自定义窗体样式和按钮,我们需要先将窗体设置为无边框,然后添加一个Grid作为菜单栏并 ...
- Android自己定义组件系列【6】——进阶实践(3)
上一篇<Android自己定义组件系列[5]--进阶实践(2)>继续对任老师的<可下拉的PinnedHeaderExpandableListView的实现>进行了分析,这一篇计 ...
- c# wpf listbox 高度_WPF快速入门系列(1)——WPF布局概览
一.引言 关于WPF早在一年前就已经看过<深入浅出WPF>这本书,当时看完之后由于没有做笔记,以至于我现在又重新捡起来并记录下学习的过程,本系列将是一个WPF快速入门系列,主要介绍WPF中 ...
最新文章
- Linux shell 学习笔记(3)— shell 父子关系及内建命令
- php如何添加超链接,如何使用phpcms添加超链接
- linux安装java_Linux安装JDK完整步骤
- 附录:MySQL忘记root密码
- Singing Superstar HDU - 7064
- web应用程序和Web网站区别
- 原型 / 构造函数 / 实例/原型链
- matlab怎么相加相同id的几行,matlab几个有用的技巧
- bzoj 4568: [Scoi2016]幸运数字(树上倍增+线性基)
- 大数据智能分析的特征和能力
- SAP VA01 消息 没有用于售达方 XXXXXX 的客户主记录存在
- 《孤勇者》matlab版,用matlab弹奏《孤勇者》
- 前端 express使用教程
- Duplicate Finder and Remover for Mac(重复文件查找删除工具)
- iphone4s蜂窝数据连不上解决方案
- 2019-2020新生训练class 1- 熟悉oj的使用方法贪心
- pandas读取excel数据以及matplotlib的散点与直线图绘画
- Android基础教程(十)build.gradle文件
- Ariel India旨在宣扬共同承担家务的新影片《See Equal》引发热烈反响
- 蓝牙模块的5大应用场景