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界面布局进阶3
与以往的Windows操作系统不同,Windows 10操作系统在正式版当中取消了任务栏中的"开始"按钮,将大部分的应用程序图标放置在开始屏中,同时将系统设置等常用功能整合到了Ch ...
- Win10系列:UWP界面布局进阶9
Grid Grid元素用来定义一个由行和列构成的网格,这是一个功能强大的布局容器,当新建一个页面时会默认选用Grid作为顶级布局元素,下面将通过三个示例来介绍Grid的使用方法. (1)定义Grid的 ...
- Win10系列:UWP界面布局进阶7
Canvas Canvas元素用于定义一个区域,可以向这个区域中添加不同的XAML界面元素.Canvas会对其内部的元素采用绝对布局方式进行布局,下面通过三个示例来介绍Canvas的使用方法. (1) ...
- Win10系列:UWP界面布局进阶6
在Windows 10的"个性化设置"中,用户可以更改计算机在锁屏状态下的背景图片,除此之外,也可以通过Windows应用商店应用程序将喜欢的图片设置为锁屏背景,下面通过一个示例来 ...
- Win10系列:UWP界面布局进阶5
提示框 在Windows应用商店应用程序中可以使用提示框来向用户显示提示信息,例如可以通过对话框来询问用户当前需要执行的操作,还可以通过弹出窗口来显示需要注意的信息.本节将向读者介绍如何在Window ...
- Win10系列:UWP界面布局进阶4
在开发Windows应用商店应用程序时,可以为页面中的界面元素添加快捷菜单,并设置与其相关的菜单项,用户通过选择快捷菜单中的菜单项来执行与被选择对象相关的操作.下面通过一个示例来介绍如何为页面中的一张 ...
- Win10系列:UWP界面布局进阶2
为了让用户可以在流畅浏览应用界面的同时提供与应用相关的功能按钮,Windows 10系统在用户界面当中引入了侧边栏,侧边栏可以在用户有需要对应用或者系统进行操作时显示,在没有需要操作的时候自动隐藏,并 ...
- Win10系列:UWP界面布局进阶8
StackPanel StackPanel能够以水平或垂直的方式整齐地排列位于其内部的元素.通过设置StackPanel的Orientation属性可以定义内部元素的排列方式,当将Orientatio ...
- Win10系列:UWP界面布局基础1
随着技术的不断发展,使用者对应用程序的界面体验提出了更高的要求,为了应对越来越复杂的界面设计需求和有效的简化界面开发过程,微软公司在其应用程序的开发技术当中引入一套新的应用程序界面描述语言,这就是XA ...
随机推荐
- ZZNUOJ 2022 摩斯密码
map打表存一下对应的密码 不会map感觉不好弄这题 #include<stdio.h> #include<string.h> #include<math.h> ...
- VC.【转】采用_beginthread/_beginthreadex函数创建多线程
https://blog.csdn.net/cbnotes/article/details/8331632 还可以看这个网址的内容:[多线程]VC6使用_beginthread开启多线程的方法-技术宅 ...
- js下数据库 nedb lokijs
一个7千颗星nedb.一个3千 lokijs https://rawgit.com/techfort/LokiJS/master/jsdoc/tutorial-Persistence%20Adapt ...
- Python Selenium 文件上传之Autoit
今天补充一种文件上传的方法 主要是因为工作中使用SendKeys方法不稳定,具体方法见: Python Selenium 文件上传之SendKeys 这种方法直接通过命令行执行脚本时没有问题,可以成功 ...
- laravel配置路由除了 / 都是404解决办法
1.php.ini开启phpopenssl 2.conf (nginx为例) location / { index index.html index.htm index.php l.php; #tr ...
- MySql常用函数全部汇总
MySQL数据库中提供了很丰富的函数.MySQL函数包括数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数.格式化函数等.通过这些函数,可以简化用户的操作.例如,字符串连接函数 ...
- Javascript 第五章总结:A trip to Objectville
前言 在以前的代码中,我们使用 primitive 类型的变量和 procedural manner 来执行脚本.但是,更好的办法是 object-oriented (面向对象)的.作者说:它能让我们 ...
- Python Web简单加法器的实现--Python
坚持写博客来记录学习过程,哪怕学习的东西多么简单!下面是python中cgi相关知识. Template.py:(模板引擎文件) #模板引擎def start_response(resp=" ...
- JavaScript动态加载资源
//动态加载样式 function dynamicLoadingCss(path){ if(!path || path.length === 0){ return false; } var head ...
- Confluence 6 删除一个空间
删除一个空间将会完全删除空间和空间的所有内容,包括有关这个空间的所有日历,和链接到这个空间中的问题.只有具有空间管理员权限的用户才能够完全删除一个空间. 删除空间是完全从系统中删除的.一旦你删除了一 ...