为了让用户可以在流畅浏览应用界面的同时提供与应用相关的功能按钮,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值来表示显示在按钮图标下的文字内容和按钮的图标样式。
<Setter Property="AutomationProperties.AutomationId" Value="HomeAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="返回主页"/>
<Setter Property="Content" Value=""/>
<Setter Property="AutomationProperties.AutomationId" Value="PreviousAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="上一页"/>
<Setter Property="Content" Value=""/>
<Setter Property="AutomationProperties.AutomationId" Value="NextAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="下一页"/>
<Setter Property="Content" Value=""/>
<Button HorizontalAlignment="Left" Style="{StaticResource HomeAppBarButtonStyle}"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource PreviousAppBarButtonStyle}"/>
<Button Style="{StaticResource NextAppBarButtonStyle}"/>
运行此页面,右键单击屏幕中的任意位置,在页面底部会显示出定义好的应用栏,显示效果如图5-4所示,再次单击屏幕中的其他位置会将应用栏隐藏。