<Pagex:Class="Windows10.Controls.NavigationControl.AppBarDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.NavigationControl"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="10 0 10 10"><CheckBox Name="chkIsSticky" Margin="5" Content="IsSticky" IsChecked="False" Checked="chkIsSticky_Checked" Unchecked="chkIsSticky_Unchecked" /><CheckBox Name="chkIsCompact" Margin="5" Content="IsCompact" IsChecked="False" Checked="chkIsCompact_Checked" Unchecked="chkIsCompact_Unchecked" /><StackPanel Margin="5" Orientation="Horizontal"><RadioButton Name="radioButtonMinimal" GroupName="myGroup" IsChecked="True" Content="AppBarClosedDisplayMode.Minimal" Checked="radioButtonMinimal_Checked" /><RadioButton Name="radioButtonHidden" GroupName="myGroup" Margin="10 0 0 0" Content="AppBarClosedDisplayMode.Hidden" Checked="radioButtonHidden_Checked" /><RadioButton Name="radioButtonCompact" GroupName="myGroup" Margin="10 0 0 0" Content="AppBarClosedDisplayMode.Compact" Checked="radioButtonCompact_Checked" /></StackPanel><Button Name="btnOpen" Margin="5" Content="打开 AppBar" Click="btnOpen_Click" /><Button Name="btnClose" Margin="5" Content="关闭 AppBar" Click="btnClose_Click" /></StackPanel></Grid><!--Page.BottomAppBar - 下方应用程序栏控件Page.TopAppBar - 上方应用程序栏控件AppBar - 应用程序栏控件IsOpen - 是否打开 AppBarIsSticky - 是否是粘性的 AppBar（即在点击非 AppBar 区域时，是否不会关闭 AppBar），默认值 falseClosedDisplayMode - 应用程序栏关闭状态下的显示模式Minimal - 最小化模式，只显示省略号，此值为默认值（CommandBar 的 ClosedDisplayMode 的默认值为 Compact）Hidden - 隐藏Compact - 显示 icon，但是不会给 label 留出位置Opening, Opened, Closing, Closed - 几个事件，不解释--><Page.BottomAppBar><AppBar x:Name="appBar"><StackPanel Name="buttonPanel" Orientation="Horizontal" HorizontalAlignment="Left"><!--关于 AppBarButton 请参见 /Controls/ButtonControl/AppBarButtonDemo.xaml关于 AppBarToggleButton 请参见 /Controls/ButtonControl/AppBarToggleButtonDemo.xaml--><AppBarButton Icon="Play" Label="SymbolIcon" /><AppBarSeparator /><AppBarToggleButton Label="BitmapIcon" ><AppBarToggleButton.Icon><BitmapIcon UriSource="ms-appx:///Assets/StoreLogo.png"/></AppBarToggleButton.Icon></AppBarToggleButton><AppBarSeparator /><!--AppBarButton 是支持 Flyout 的--><AppBarButton Icon="Add" Label="Add"><AppBarButton.Flyout><MenuFlyout><MenuFlyoutItem Text="MenuFlyout Item 1"/><MenuFlyoutItem Text="MenuFlyout Item 2"/><MenuFlyoutItem Text="MenuFlyout Item 3"/></MenuFlyout></AppBarButton.Flyout></AppBarButton><AppBarSeparator /><!--AppBar 内可以包含任意元素--><TextBlock Text="abc" /></StackPanel></AppBar></Page.BottomAppBar>
</Page>

/** AppBar - 应用程序栏控件（继承自 ContentControl, 请参见 /Controls/BaseControl/ContentControlDemo/）* * * 注：* 1、当应用程序栏只有实现了 ICommandBarElement 接口（AppBarButton, AppBarToggleButton, AppBarSeparator）的控件的时候建议使用 CommandBar（文档推荐在 uwp 中使用 CommandBar）*    文档说 uwp 中的 CommandBar 内可以包含非 ICommandBarElement 接口的控件，但是实测发现并不可以* 2、如果除了实现了 ICommandBarElement 接口（AppBarButton, AppBarToggleButton, AppBarSeparator）的控件之外，应用程序栏还需要其他元素，则需要使用 AppBar*/using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;namespace Windows10.Controls.NavigationControl
{public sealed partial class AppBarDemo : Page{public AppBarDemo(){this.InitializeComponent();}private void btnOpen_Click(object sender, RoutedEventArgs e){// 打开 AppBarappBar.IsOpen = true;}private void btnClose_Click(object sender, RoutedEventArgs e){// 关闭 AppBarappBar.IsOpen = false;}private void chkIsSticky_Checked(object sender, RoutedEventArgs e){// 点击非 AppBar 区域时，不会关闭 AppBarappBar.IsSticky = true;}private void chkIsSticky_Unchecked(object sender, RoutedEventArgs e){// 点击非 AppBar 区域时，关闭 AppBarappBar.IsSticky = 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 - 只显示按钮图标//     false - 显示按钮图标和按钮文本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;}}}private void radioButtonMinimal_Checked(object sender, RoutedEventArgs e){if (appBar != null)appBar.ClosedDisplayMode = AppBarClosedDisplayMode.Minimal;}private void radioButtonHidden_Checked(object sender, RoutedEventArgs e){if (appBar != null)appBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden;}private void radioButtonCompact_Checked(object sender, RoutedEventArgs e){if (appBar != null)appBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;}}
}

<Pagex:Class="Windows10.Controls.NavigationControl.CommandBarDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.NavigationControl"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="10 0 10 10"><CheckBox Name="chkIsSticky" Margin="5" Content="IsSticky" IsChecked="False" Checked="chkIsSticky_Checked" Unchecked="chkIsSticky_Unchecked" /><StackPanel Margin="5" Orientation="Horizontal"><RadioButton Name="radioButtonMinimal" GroupName="myGroup" Content="AppBarClosedDisplayMode.Minimal" Checked="radioButtonMinimal_Checked" /><RadioButton Name="radioButtonHidden" GroupName="myGroup" Margin="10 0 0 0" Content="AppBarClosedDisplayMode.Hidden" Checked="radioButtonHidden_Checked" /><RadioButton Name="radioButtonCompact" GroupName="myGroup" Margin="10 0 0 0" IsChecked="True" Content="AppBarClosedDisplayMode.Compact" Checked="radioButtonCompact_Checked" /></StackPanel><Button Name="btnOpen" Margin="5" Content="打开 CommandBar" Click="btnOpen_Click" /><Button Name="btnClose" Margin="5" Content="关闭 CommandBar" Click="btnClose_Click" /></StackPanel></Grid><!--Page.BottomAppBar - 下方应用程序栏控件Page.TopAppBar - 上方应用程序栏控件CommandBar - 应用程序栏控件。相对于 AppBar 来说， CommandBar 易用性强，扩展性弱（在 CommandBar 内只能包含 AppBarButton, AppBarToggleButton, AppBarSeparator）。CommandBar 继承自 AppBarIsOpen - 是否打开 CommandBarIsSticky - 是否是粘性的 CommandBar（即在点击非 CommandBar 区域时，是否不会关闭 CommandBar），默认值 falseClosedDisplayMode - 应用程序栏关闭状态下的显示模式Minimal - 最小化模式，只显示省略号Hidden - 隐藏Compact - 显示 PrimaryCommands 中的按钮的 icon，但不显示其 label，且 SecondaryCommands 中的按钮不会显示，此值为默认值（AppBar 的 ClosedDisplayMode 的默认值为 Minimal）Opening, Opened, Closing, Closed - 几个事件，不解释注：无法手动设置 CommandBar 中的 AppBarButton, AppBarToggleButton, AppBarSeparator 的 IsCompact 属性，其如何设置由系统自己决定（比如 Compact 模式的关闭状态的 CommandBar 会隐藏 label，打开状态的 CommandBar 会显示 label）--><Page.BottomAppBar><CommandBar x:Name="commandBar"><!--关于 AppBarButton 请参见 /Controls/ButtonControl/AppBarButtonDemo.xaml关于 AppBarToggleButton 请参见 /Controls/ButtonControl/AppBarToggleButtonDemo.xaml--><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" /><AppBarSeparator/><!--AppBarButton 是支持 Flyout 的--><AppBarButton Icon="Add" Label="Add"><AppBarButton.Flyout><MenuFlyout><MenuFlyoutItem Text="MenuFlyout Item 1"/><MenuFlyoutItem Text="MenuFlyout Item 2"/><MenuFlyoutItem Text="MenuFlyout Item 3"/></MenuFlyout></AppBarButton.Flyout></AppBarButton><!--CommandBar.PrimaryCommands - 其内的按钮会显示在 CommandBar 内部的右侧（[ContentProperty(Name = "PrimaryCommands")]）CommandBar.SecondaryCommands - 其内的按钮会显示在 CommandBar 的上部（只显示 label，不显示 icon）--><CommandBar.SecondaryCommands><AppBarButton Icon="Like" Label="Like" /><AppBarButton Icon="Dislike" Label="Dislike" /></CommandBar.SecondaryCommands><!--设置 CommandBar 或 AppBar 的 Style 自然是通过 AppBar.Style那么如何设置 CommandBar.SecondaryCommands 的样式呢？可以通过 CommandBar.CommandBarOverflowPresenterStyle--><CommandBar.CommandBarOverflowPresenterStyle><Style TargetType="CommandBarOverflowPresenter"><Setter Property="Background" Value="Black" /></Style></CommandBar.CommandBarOverflowPresenterStyle></CommandBar></Page.BottomAppBar>
</Page>

/** CommandBar - 应用程序栏控件。相对于 AppBar 来说， CommandBar 易用性强，扩展性弱（继承自 AppBar, 请参见 /Controls/NavigationControl/AppBarDemo.xaml）** 注：* 1、当应用程序栏只有实现了 ICommandBarElement 接口（AppBarButton, AppBarToggleButton, AppBarSeparator）的控件的时候建议使用 CommandBar（文档推荐在 uwp 中使用 CommandBar）*    文档说 uwp 中的 CommandBar 内可以包含非 ICommandBarElement 接口的控件，但是实测发现并不可以* 2、如果除了实现了 ICommandBarElement 接口（AppBarButton, AppBarToggleButton, AppBarSeparator）的控件之外，应用程序栏还需要其他元素，则需要使用 AppBar*/using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;namespace Windows10.Controls.NavigationControl
{public sealed partial class CommandBarDemo : Page{public CommandBarDemo(){this.InitializeComponent();}private void btnOpen_Click(object sender, RoutedEventArgs e){// 打开 CommandBarcommandBar.IsOpen = true;}private void btnClose_Click(object sender, RoutedEventArgs e){// 关闭 CommandBarcommandBar.IsOpen = false;}private void chkIsSticky_Checked(object sender, RoutedEventArgs e){// 点击非 CommandBar 区域时，不会关闭 CommandBarcommandBar.IsSticky = true;}private void chkIsSticky_Unchecked(object sender, RoutedEventArgs e){// 点击非 CommandBar 区域时，关闭 CommandBarcommandBar.IsSticky = false;}private void radioButtonMinimal_Checked(object sender, RoutedEventArgs e){if (commandBar != null)commandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Minimal;}private void radioButtonHidden_Checked(object sender, RoutedEventArgs e){if (commandBar != null)commandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden;}private void radioButtonCompact_Checked(object sender, RoutedEventArgs e){if (commandBar != null)commandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;}}
}

<Pagex:Class="Windows10.Controls.ButtonControl.AppBarButtonDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.ButtonControl"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="10 0 10 10"><!--AppBarButton - 程序栏按钮控件（关于此控件的应用场景请参见：/Controls/NavigationControl/AppBarDemo.xaml 和 /Controls/NavigationControl/CommandBarDemo.xaml）Label - 显示的文本Icon - 显示的图标（IconElement 类型，关于 IconElement 请参见 /Controls/IconControl/IconElementDemo.xaml）IsCompact - 是否是紧凑模式，即是否不显示 Label 指定的文本（默认值 false）--><!--直接指定 Icon 为一个 Symbol 枚举值，此时所设置的是 SymbolIcon--><AppBarButton Name="appBarButton1" Icon="Accept" Label="accept" Margin="5" /><!--需要设置 Icon 为一个 SymbolIcon 或 FontIcon 或 PathIcon 或 BitmapIcon 类型的话，可以这样设置--><AppBarButton Name="appBarButton2" Label="find" IsCompact="True" Margin="5"><AppBarButton.Icon><FontIcon Name="fontIcon1" FontFamily="Segoe UI Emoji" Glyph="✓" /></AppBarButton.Icon></AppBarButton><!--AppBarButton 是支持 Flyout 的--><AppBarButton Icon="Add" Label="Add" Margin="5"><AppBarButton.Flyout><MenuFlyout><MenuFlyoutItem Text="MenuFlyout Item 1"/><MenuFlyoutItem Text="MenuFlyout Item 2"/><MenuFlyoutItem Text="MenuFlyout Item 3"/></MenuFlyout></AppBarButton.Flyout></AppBarButton></StackPanel></Grid>
</Page>

<Pagex:Class="Windows10.Controls.ButtonControl.AppBarToggleButtonDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.ButtonControl"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="10 0 10 10"><!--AppBarToggleButton - 程序栏可切换状态的按钮控件（关于此控件的应用场景请参见：/Controls/NavigationControl/AppBarDemo.xaml 和 /Controls/NavigationControl/CommandBarDemo.xaml）Label - 显示的文本Icon - 显示的图标（IconElement 类型，关于 IconElement 请参见 /Controls/IconControl/IconElementDemo.xaml）IsCompact - 是否是紧凑模式，即是否不显示 Label 指定的文本（默认值 false）--><!--直接指定 Icon 为一个 Symbol 枚举值，此时所设置的是 SymbolIcon--><AppBarToggleButton Name="appBarToggleButton1" Icon="Accept" Label="accept" Margin="5" /><!--需要设置 Icon 为一个 SymbolIcon 或 FontIcon 或 PathIcon 或 BitmapIcon 类型的话，可以这样设置--><AppBarToggleButton Name="appBarToggleButton2" Label="find" IsCompact="True" Margin="5"><AppBarToggleButton.Icon><FontIcon Name="fontIcon1" FontFamily="Segoe UI Emoji" Glyph="✓" /></AppBarToggleButton.Icon></AppBarToggleButton></StackPanel></Grid>
</Page>