为了让用户可以在流畅浏览应用界面的同时提供与应用相关的功能按钮,Windows 10系统在用户界面当中引入了侧边栏,侧边栏可以在用户有需要对应用或者系统进行操作时显示,在没有需要操作的时候自动隐藏,并且还可以根据应用程序当前所操作的功能显示不同的侧边栏按钮。

在Windows 10系统当中主要包括两种类型的侧边栏App Bar(应用栏)和Charms Bar(魔法栏),下面将分别为读者介绍这两种侧边栏,并通过示例演示如何将侧边栏加入到Windows应用商店应用程序当中。

(1)App Bar(应用栏)

在使用Windows 10系统过程中,用户与应用或系统之间的交互有时要通过应用栏来实现。例如当用户在开始屏中右键单击一个应用程序的图标时,屏幕下方就会出现与所选应用程序相关的应用栏,其中包括了"卸载"、"放大"和"缩小"等功能按钮。一般情况下应用栏会被设置成隐藏状态,当用户在屏幕中单击鼠标右键,或在屏幕边缘做一个向上或向下滑动的手势时,应用栏会从屏幕的底部或顶部显示出来。下面通过一个示例来介绍如何在应用程序中加入应用栏,并在应用栏中添加功能按钮。

在一个打开的Windows应用商店项目中新建一个空白页,并命名为AppBarPage。在为应用程序页面添加应用栏上面的命令按钮时,可以选择使用Windows应用商店应用项目模板中默认提供的一些常用应用栏按钮图标样式。双击打开解决方案资源管理器中的Common文件夹下的StandardStyles.xaml样式资源文件,在其中已经为Segoe UI Symbol字体中的每个标志符号定义好了标准的AppBarButton样式,考虑到加载资源文件可能会降低应用程序的性能,在默认情况下这部分内容是被注释的,需要取消注释后才能引用这些样式。每一个AppBarButton样式都有一个x:Key属性为样式提供引用标识,同时通过AutomationProperties.Name属性、Content属性中的Value值来表示显示在按钮图标下的文字内容和按钮的图标样式。

在本示例中,将x:Key属性值为"HomeAppBarButtonStyle"、"PreviousAppBarButtonStyle"、"NextAppBarButtonStyle"样式的注释取消掉,并分别将它们的AutomationProperties.Name属性的Value值设置为"返回主页"、"上一页"以及"下一页",而Content属性中的Value值保持不变。修改后的样式代码如下所示:

<Style x:Key="HomeAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">

<Setter Property="AutomationProperties.AutomationId" Value="HomeAppBarButton"/>

<Setter Property="AutomationProperties.Name" Value="返回主页"/>

<Setter Property="Content" Value=""/>

</Style>

<Style x:Key="PreviousAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">

<Setter Property="AutomationProperties.AutomationId" Value="PreviousAppBarButton"/>

<Setter Property="AutomationProperties.Name" Value="上一页"/>

<Setter Property="Content" Value=""/>

</Style>

<Style x:Key="NextAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">

<Setter Property="AutomationProperties.AutomationId" Value="NextAppBarButton"/>

<Setter Property="AutomationProperties.Name" Value="下一页"/>

<Setter Property="Content" Value=""/>

</Style>

在应用界面中加入应用栏,可以通过在页面的Page元素中添加Page.TopAppBar属性元素或Page.BottomAppBar属性元素,并在其中添加AppBar控件来实现为页面定义显示在顶部或在底部的应用栏。这里通过使用Page.BottomAppBar属性元素在界面底部添加应用栏为例,来演示应用栏的定义方式。双击打开AppBarPage.xaml文件,并在Page元素的起始标签下方加入如下代码:

<Page.BottomAppBar>

<AppBar Padding="10,0,10,0">

<Grid>

<Button HorizontalAlignment="Left" Style="{StaticResource HomeAppBarButtonStyle}"/>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

<Button Style="{StaticResource PreviousAppBarButtonStyle}"/>

<Button Style="{StaticResource NextAppBarButtonStyle}"/>

</StackPanel>

</Grid>

</AppBar>

</Page.BottomAppBar>

上面的代码在Page.BottomAppBar属性元素中加入了一个AppBar控件,并对AppBar控件的Padding属性进行设置,从而定义应用栏中的按钮图标与应用栏边框间的距离。然后为应用栏加入三个Button按钮,并使用Grid和StackPanel布局元素进行布局,最后通过StaticResource标记扩展将在前面提到的三个按钮样式引用到刚刚添加的三个按钮上,这样就为页面添加了一个可以在页面底部显示的应用栏。

运行此页面,右键单击屏幕中的任意位置,在页面底部会显示出定义好的应用栏,显示效果如图5-4所示,再次单击屏幕中的其他位置会将应用栏隐藏。

图5-4 应用栏显示效果

Win10系列:UWP界面布局进阶2的更多相关文章

  1. Win10系列:UWP界面布局进阶3

    与以往的Windows操作系统不同,Windows 10操作系统在正式版当中取消了任务栏中的"开始"按钮,将大部分的应用程序图标放置在开始屏中,同时将系统设置等常用功能整合到了Ch ...

  2. Win10系列:UWP界面布局进阶1

    全新的Windows 10 操作系统支持多种视图模式,用户可以根据需要选择不同的视图模式显示应用.当用户同时浏览或操作多个应用程序时,可以将应用视图调整为辅屏视图或填充视图,这样在一个屏幕中可以同时对 ...

  3. Win10系列:UWP界面布局进阶9

    Grid Grid元素用来定义一个由行和列构成的网格,这是一个功能强大的布局容器,当新建一个页面时会默认选用Grid作为顶级布局元素,下面将通过三个示例来介绍Grid的使用方法. (1)定义Grid的 ...

  4. Win10系列:UWP界面布局进阶7

    Canvas Canvas元素用于定义一个区域,可以向这个区域中添加不同的XAML界面元素.Canvas会对其内部的元素采用绝对布局方式进行布局,下面通过三个示例来介绍Canvas的使用方法. (1) ...

  5. Win10系列:UWP界面布局进阶6

    在Windows 10的"个性化设置"中,用户可以更改计算机在锁屏状态下的背景图片,除此之外,也可以通过Windows应用商店应用程序将喜欢的图片设置为锁屏背景,下面通过一个示例来 ...

  6. Win10系列:UWP界面布局进阶5

    提示框 在Windows应用商店应用程序中可以使用提示框来向用户显示提示信息,例如可以通过对话框来询问用户当前需要执行的操作,还可以通过弹出窗口来显示需要注意的信息.本节将向读者介绍如何在Window ...

  7. Win10系列:UWP界面布局进阶4

    在开发Windows应用商店应用程序时,可以为页面中的界面元素添加快捷菜单,并设置与其相关的菜单项,用户通过选择快捷菜单中的菜单项来执行与被选择对象相关的操作.下面通过一个示例来介绍如何为页面中的一张 ...

  8. Win10系列:UWP界面布局进阶8

    StackPanel StackPanel能够以水平或垂直的方式整齐地排列位于其内部的元素.通过设置StackPanel的Orientation属性可以定义内部元素的排列方式,当将Orientatio ...

  9. Win10系列:UWP界面布局基础1

    随着技术的不断发展,使用者对应用程序的界面体验提出了更高的要求,为了应对越来越复杂的界面设计需求和有效的简化界面开发过程,微软公司在其应用程序的开发技术当中引入一套新的应用程序界面描述语言,这就是XA ...

随机推荐

  1. VC异常.简单抛,简单捕获

    1.ZC:始终没有找到,能像Delphi7里面那样能抛 字符串描述 的异常信息.(难道Delphi是这样做的?:在程序的最外围 套了一层异常捕获,然后在获取到异常之后,自己再将异常信息弹出来,我们写的 ...

  2. [转]C和C++运行时库

    转自csdn原文:https://blog.csdn.net/ithzhang/article/details/20160009 图片请去原文查看 在使用VC构建项目时,经常会遇到下面的链接错误: 初 ...

  3. Java定时器的三种实现方式

    一.普通thread /** * 普通thread * 这是最常见的,创建一个thread,然后让它在while循环里一直运行着, * 通过sleep方法来达到定时任务的效果.这样可以快速简单的实现, ...

  4. Axure 第一次交互 实现跳转页面

  5. English trip M1 - PC6 Likes and Dislike Teacher:Jade

    In this lesson you will learn to talk about likes and dislikes. 课上内容(Lesson) # 通常在习惯性的表达式用 it's 来表达w ...

  6. hihocoder-1407 后缀数组二·重复旋律2 不重合 最少重复K次

    后缀数组不能直接通过Height得出不重合的公共串.我们可以二分k值,这样连续的Height只要都大于等于k,那他们互相间的k值都大于等于k.每个这样的连续区间查找SA的最大最小值,做差判断是否重合( ...

  7. yarn hadoop-2.3.0 installation cluster Centos 64bits

    Apache Hadoop -2.2.0 - How to Install a Three Nodes Cluster http://tonylixu.blogspot.ca/2014/02/apac ...

  8. vux,vue 苹果手机使用position:fixed有问题,如何解决

    苹果手机真是各种坑,导致我都想摔手机呀,但没办法,用苹果的人太多,程序员还是继续在坑的路上行走! 上一篇文章介绍了一些组件,就是使用vux可以解决,苹果手机使用position:fixed的问题 给需 ...

  9. javascript使用误区(switch、this)

    1.switch 语句会使用恒等计算符(===)进行比较: 以下实例由于类型不一致不会执行 alert 弹窗: var x = "10"; switch(x) { case 10: ...

  10. Dedecmsv5.7整合ueditor 图片上传添加水印

    最近的项目是做dedecmsv5.7的二次开发,被要求上传的图片要加水印,百度ueditor编辑器不支持自动加水印,所以,找了很多资料整合记录一下,具体效果图 这里不仔细写dedecmsv5.7 整合 ...