IT工程師數位筆記本

上一篇為大家介紹了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>

如上面代碼，默認所有控件都是分配在主控區及菜單欄右側，將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>

如上圖所示，寫入SecondaryCommands 的按鍵被分配到了菜單欄左側。關于CommandBar 介紹就到這里，大家可以動手操練一下。