背水一战 Windows 10 (40)

天成1

　　[源码下载]




背水一战 Windows 10 (40) - 控件（导航类）: AppBar, CommandBar　　
作者：webabcd

介绍
背水一战 Windows 10 之 控件（导航类）

• AppBar
  
• CommandBar
  

　　
示例
1、AppBar 的示例
Controls/NavigationControl/AppBarDemo.xaml



<Page
x: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 - 是否打开 AppBar
IsSticky - 是否是粘性的 AppBar（即在点击非 AppBar 区域时，是否不会关闭 AppBar），默认值 false
ClosedDisplayMode - 应用程序栏关闭状态下的显示模式
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>
　　Controls/NavigationControl/AppBarDemo.xaml.cs



/*
* 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)
{
// 打开 AppBar
appBar.IsOpen = true;
}
private void btnClose_Click(object sender, RoutedEventArgs e)
{
// 关闭 AppBar
appBar.IsOpen = false;
}
private void chkIsSticky_Checked(object sender, RoutedEventArgs e)
{
// 点击非 AppBar 区域时，不会关闭 AppBar
appBar.IsSticky = true;
}
private void chkIsSticky_Unchecked(object sender, RoutedEventArgs e)
{
// 点击非 AppBar 区域时，关闭 AppBar
appBar.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;
}
}
}
　　
2、CommandBar 的示例
Controls/NavigationControl/CommandBarDemo.xaml



<Page
x: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 继承自 AppBar
IsOpen - 是否打开 CommandBar
IsSticky - 是否是粘性的 CommandBar（即在点击非 CommandBar 区域时，是否不会关闭 CommandBar），默认值 false
ClosedDisplayMode - 应用程序栏关闭状态下的显示模式
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>
　　Controls/NavigationControl/CommandBarDemo.xaml.cs



/*
* 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)
{
// 打开 CommandBar
commandBar.IsOpen = true;
}
private void btnClose_Click(object sender, RoutedEventArgs e)
{
// 关闭 CommandBar
commandBar.IsOpen = false;
}
private void chkIsSticky_Checked(object sender, RoutedEventArgs e)
{
// 点击非 CommandBar 区域时，不会关闭 CommandBar
commandBar.IsSticky = true;
}
private void chkIsSticky_Unchecked(object sender, RoutedEventArgs e)
{
// 点击非 CommandBar 区域时，关闭 CommandBar
commandBar.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;
}
}
}
　　
3、AppBarButton 的示例
Controls/ButtonControl/AppBarButtonDemo.xaml



<Page
x: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="&#x2713;" />
</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>
　　
4、AppBarToggleButton 的示例
Controls/ButtonControl/AppBarToggleButtonDemo.xaml



<Page
x: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="&#x2713;" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
</StackPanel>
</Grid>
</Page>
　　
OK
[源码下载]