背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar

宁可枝头抱香死,何曾吹落北风中。这篇文章主要讲述背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar相关的知识,希望能为你提供帮助。
原文:背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar[源码下载]



背水一战 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="https://www.songbingjia.com/android/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>

【背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar】

OK
[源码下载]
























    推荐阅读