重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar

[源码下载]

[align=center]重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar[/align]

作者：webabcd

介绍
重新想象 Windows 8.1 Store Apps 之新增控件

AppBar - 应用程序栏控件（新增了 AppBarButton, AppBarToggleButton, AppBarSeparator）

CommandBar - 应用程序栏控件（AppBar 简化版）

示例
1、演示 AppBar 的应用
AppBarDemo.xaml

<Page
x:Class="Windows81.Controls.AppBarDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows81.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<CheckBox Name="chkIsCompact" Content="IsCompact" IsChecked="False" Checked="chkIsCompact_Checked" Unchecked="chkIsCompact_Unchecked" />

<Button Name="btnOpen" Content="打开 AppBar" Click="btnOpen_Click" Margin="0 10 0 0" />
<Button Name="btnClose" Content="关闭 AppBar" Click="btnClose_Click" Margin="0 10 0 0" />

</StackPanel>
</Grid>

<!--
AppBar 的 win8 时代的用法参见：http://www.cnblogs.com/webabcd/archive/2013/01/14/2859153.html
其用法很怪异，到了 win8.1 时代终于正常了，以下会介绍 AppBar 在 win8.1 时代的用法

在 win8.1 时代我们需要指定 AppBar 的按钮的图标和文本，系统会自动在图标外面加个圈圈
-->
<Page.BottomAppBar>
<AppBar x:Name="appBar" IsSticky="True" Padding="10,0">
<StackPanel Name="buttonPanel" Orientation="Horizontal" HorizontalAlignment="Left">

<!--
AppBarButton - AppBar 中的 Button
Icon - 按钮的图标（可以指定一个图片，也可以指定一个 Symbol enumeration）
Label - 按钮的文本
-->

<!--
Icon 来自 Symbol enumeration，参见本文件夹中的 Symbol enumeration (Windows).mht 文件
-->
<AppBarButton Icon="Play" Label="SymbolIcon" />

<!--
Icon 来自一个图片
-->
<AppBarButton Label="BitmapIcon" >
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/Logo.png"/>
</AppBarButton.Icon>
</AppBarButton>

<!--
AppBarSeparator - AppBar 中的 分隔符
-->
<AppBarSeparator />

<!--
AppBarToggleButton - AppBar 中的 ToggleButton
Icon - 按钮的图标（可以指定为一个 FontIcon 或 PathIcon）
Label - 按钮的文本
-->

<!--
Icon 来自 FontIcon
-->
<AppBarToggleButton Label="FontIcon" >
<AppBarToggleButton.Icon>
<FontIcon FontFamily="Candara" Glyph="Σ"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>

<!--
Icon 来自 PathIcon
-->
<AppBarToggleButton Label="PathIcon" >
<AppBarToggleButton.Icon>
<PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>

<!--
AppBarButton, AppBarToggleButton, AppBarSeparator 有一个属性：IsCompact - 是否使用紧凑按钮，即是否隐藏按钮文本（true - 只显示按钮图标；false - 显示按钮图标和按钮文本）
-->

</StackPanel>
</AppBar>
</Page.BottomAppBar>
</Page>

AppBarDemo.xaml.cs

/*
* AppBar - 应用程序栏控件
* win8.1 的 AppBar 相对于 win8 有了增强，即增加了对 AppBarButton, AppBarToggleButton, AppBarSeparator 的支持
*
* 本例主要介绍 win8.1 中的 AppBar 改进的地方，原有 AppBar 的知识点参见：http://www.cnblogs.com/webabcd/archive/2013/01/14/2859153.html
*
* 注：
* 1、当应用程序栏只有 AppBarButton, AppBarToggleButton, AppBarSeparator 的时候建议使用 CommandBar
* 2、如果除了 AppBarButton, AppBarToggleButton, AppBarSeparator 之外，应用程序栏还需要其他元素，则需要使用 AppBar
*/

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows81.Controls
{
public sealed partial class AppBarDemo : Page
{
public AppBarDemo()
{
this.InitializeComponent();
}

private void btnOpen_Click(object sender, RoutedEventArgs e)
{
// 打开 AppBar
appBar.IsOpen = true;
}

private void btnClose_Click(object sender, RoutedEventArgs e)
{
// 关闭 AppBar
appBar.IsOpen = false;
}

private void chkIsCompact_Checked(object sender, RoutedEventArgs e)
{
var elements = buttonPanel.Children;
foreach (var element in elements)
{
var button = element as ICommandBarElement;
if (button != null)
{
// IsCompact - 是否使用紧凑按钮，即是否隐藏按钮文本（来自 ICommandBarElement 接口。AppBarButton, AppBarToggleButton, AppBarSeparator 均实现了此接口）
//     true - 只显示按钮图标（如果是 AppBarSeparator 的话会相对短一点）
//     false - 显示按钮图标和按钮文本（如果是 AppBarSeparator 的话会相对长一点）
button.IsCompact = true;
}
}
}

private void chkIsCompact_Unchecked(object sender, RoutedEventArgs e)
{
var elements = buttonPanel.Children;
foreach (var element in elements)
{
var button = element as ICommandBarElement;
if (button != null)
{
button.IsCompact = false;
}
}
}
}
}

2、演示 CommandBar 的应用
CommandBarDemo.xaml

<Page
x:Class="Windows81.Controls.CommandBarDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows81.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<Button Name="btnOpen" Content="打开 CommandBar" Click="btnOpen_Click" Margin="0 10 0 0" />
<Button Name="btnClose" Content="关闭 CommandBar" Click="btnClose_Click" Margin="0 10 0 0" />

</StackPanel>
</Grid>

<!--
CommandBar 是 win8.1 新增的应用程序栏控件
其内只能包含 AppBarButton, AppBarToggleButton, AppBarSeparator，详细用法参见 AppBarDemo.xaml

AppBarButton, AppBarToggleButton, AppBarSeparator 有一个属性：IsCompact - 是否使用紧凑按钮，即是否隐藏按钮文本（true - 只显示按钮图标；false - 显示按钮图标和按钮文本）
注：无法手动设置 CommandBar 中的 AppBarButton, AppBarToggleButton, AppBarSeparator 的 IsCompact 属性，系统会根据当前窗口的大小自动设置此属性
-->
<Page.BottomAppBar>
<CommandBar x:Name="commandBar" IsSticky="True" Padding="10,0">
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Forward" Label="Forward" />

<!--
CommandBar.PrimaryCommands - 其内的按钮会显示在 CommandBar 的右侧
CommandBar.SecondaryCommands - 其内的按钮会显示在 CommandBar 的左侧

注：上面直接写在 CommandBar 中的按钮会自动添加进 CommandBar.PrimaryCommands
-->
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" IsCompact="True" />
<AppBarButton Icon="Dislike" Label="Dislike" />
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
</Page>

CommandBarDemo.xaml.cs

/*
* CommandBar - 应用程序栏控件（AppBar 简化版）
*
* 注：
* 1、当应用程序栏只有 AppBarButton, AppBarToggleButton, AppBarSeparator 的时候建议使用 CommandBar
* 2、如果除了 AppBarButton, AppBarToggleButton, AppBarSeparator 之外，应用程序栏还需要其他元素，则需要使用 AppBar
*/

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows81.Controls
{
public sealed partial class CommandBarDemo : Page
{
public CommandBarDemo()
{
this.InitializeComponent();
}

private void btnOpen_Click(object sender, RoutedEventArgs e)
{
// 打开 CommandBar
commandBar.IsOpen = true;
}

private void btnClose_Click(object sender, RoutedEventArgs e)
{
// 关闭 CommandBar
commandBar.IsOpen = false;
}
}
}

OK
[源码下载]