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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了背水一战 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="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
[源码下载]























以上是关于背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar的主要内容,如果未能解决你的问题,请参考以下文章

背水一战 Windows 10 (41) - 控件(导航类): Frame

背水一战 Windows 10 (42) - 控件(导航类): Frame 动画

背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation

背水一战 Windows 10 (27) - 控件(文本类): TextBlock

背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog