Windows 8.1 新增控件之 CommandBar

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

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

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

        <</span><span>AppBarSeparator</span><span>/>

        <</span><span>AppBarButton </span><span>x</span><span>:</span><span>Uid</span><span>="Add" </span><span>Icon</span><span>="Add" </span><span>Label</span><span>="Add"/>
        <</span><span>AppBarToggleButton </span><span>x</span><span>:</span><span>Uid</span><span>="Remove" </span><span>Icon</span><span>="Remove" </span><span>Label</span><span>="Remove"/>
        <</span><span>AppBarButton </span><span>x</span><span>:</span><span>Uid</span><span>="Delete" </span><span>Icon</span><span>="Delete" </span><span>Label</span><span>="Delete"/>
    </</span><span>CommandBar</span><span>>
</</span><span>Page.BottomAppBar</span><span>></span>

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

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

        <</span><span>AppBarSeparator</span><span>/>

        <</span><span>CommandBar.SecondaryCommands</span><span>>
            <</span><span>AppBarButton </span><span>x</span><span>:</span><span>Uid</span><span>="Add" </span><span>Icon</span><span>="Add" </span><span>Label</span><span>="Add"/>
            <</span><span>AppBarToggleButton </span><span>x</span><span>:</span><span>Uid</span><span>="Remove" </span><span>Icon</span><span>="Remove" </span><span>Label</span><span>="Remove"/>
            <</span><span>AppBarButton </span><span>x</span><span>:</span><span>Uid</span><span>="Delete" </span><span>Icon</span><span>="Delete" </span><span>Label</span><span>="Delete"/>
        </</span><span>CommandBar.SecondaryCommands</span><span>>
    </</span><span>CommandBar</span><span>>
</</span><span>Page.BottomAppBar</span><span>></span>

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

原文：http://www.cnblogs.com/lonelyxmas/p/3587924.html