Windows 8.1 新增控件之 CommandBar

爱被打了一巴掌 2021-12-23 18:34 170阅读 0赞

上一篇为大家介绍了AppBar 的相关内容，本篇继续介绍CommandBar 的使用方法。与AppBar 相比而言，CommandBar 在开发使用方面较为单一，在按键布局上分为主控区（Primary Commands）与辅控区（Secondary Commands），默认情况下，主控区显示在菜单右侧，辅控区在左侧。

如果应用菜单栏中只包含AppBarButton、AppBarToggleButton、AppBarSeparator 这几个控件，且没有特殊布局格式要求，及可以使用CommandBar 控件。当应用尺寸变化时，CommandBar 也会随之调整尺寸。

<Page.BottomAppBar>
        <CommandBar>
            <AppBarButton x:Uid="Camera" Icon="Camera" Label="Camera"/>
            <AppBarToggleButton x:Uid="Suffle" Icon="Shuffle" Label="Shuffle"/>
            <AppBarToggleButton x:Uid="Account" Icon="Account" Label="Account"/>
            <AppBarButton x:Uid="Like" Icon="Like" Label="Like"/>
            <AppBarButton x:Uid="Dislike" Icon="Dislike" Label="Dislike"/>
    
            <AppBarSeparator/>
    
            <AppBarButton x:Uid="Add" Icon="Add" Label="Add"/>
            <AppBarToggleButton x:Uid="Remove" Icon="Remove" Label="Remove"/>
            <AppBarButton x:Uid="Delete" Icon="Delete" Label="Delete"/>
        </CommandBar>
    </Page.BottomAppBar>

![image][]

如上面代码，默认所有控件都是分配在主控区及菜单栏右侧，将Add、Remove、Delete 按键放入辅控区是什么样子呢，如下：

<Page.BottomAppBar>
        <CommandBar>
            <AppBarButton x:Uid="Camera" Icon="Camera" Label="Camera"/>
            <AppBarToggleButton x:Uid="Suffle" Icon="Shuffle" Label="Shuffle"/>
            <AppBarToggleButton x:Uid="Account" Icon="Account" Label="Account"/>
            <AppBarButton x:Uid="Like" Icon="Like" Label="Like"/>
            <AppBarButton x:Uid="Dislike" Icon="Dislike" Label="Dislike"/>
    
            <AppBarSeparator/>
    
            <CommandBar.SecondaryCommands>
                <AppBarButton x:Uid="Add" Icon="Add" Label="Add"/>
                <AppBarToggleButton x:Uid="Remove" Icon="Remove" Label="Remove"/>
                <AppBarButton x:Uid="Delete" Icon="Delete" Label="Delete"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

![image][image 1]

如上图所示，写入SecondaryCommands 的按键被分配到了菜单栏左侧。关于CommandBar 介绍就到这里，大家可以动手操练一下。

转载于:https://www.cnblogs.com/gnielee/p/windows8-1-for-developers-commandbar.html

[image]: /images/20211223/530b5e0c7faf48df82f6801149aac96a.png
[image 1]: /images/20211223/d17116fcd17342af9fddfba7dc179704.png