Win10系列：UWP界面布局进阶2

为了让用户可以在流畅浏览应用界面的同时提供与应用相关的功能按钮，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 应用栏显示效果