上一篇为大家介绍了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 介绍就到这里,大家可以动手操练一下。

Windows 8.1 新增控件之 CommandBar的更多相关文章

  1. 重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar

    [源码下载] 重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...

  2. Windows 8.1 新增控件之 AppBar

    Windows 8.1 与Windows 8 相比已经有了很多改进,从ITPro 角度这篇文章<What's New in Windows 8.1>已经表述的很详细.对开发者来说,最明显的 ...

  3. Windows 8.1 新增控件之 DatePicker

    大年初一来介绍一个简单易用的DatePicker 控件,这个控件是新增的?印象里很早就有了啊,Anyway来看看Windows 8.1 里的DataPicker 有什么功能吧. 先来看看这个代码,很简 ...

  4. Windows 8.1 新增控件之 Hyperlink

    Hyperlink 控件应该不用过多介绍大家肯定十分清楚其作用,它的功能就像HTML中的<a href="">标签一样,只不过是在XAML中实现. 使用Hyperlin ...

  5. Windows 8.1 新增控件之 TimePicker

    之前已经为大家介绍过DatePicker 控件的相关内容,有日期控件当然就得有时间控件,本篇将和各位一起了解TimePicker 的使用方法. 先来介绍一下ClockIdentifier 属性,默认情 ...

  6. Windows 8.1 新增控件之 MenuFlyout

    开始这篇讲解前,我们先来温习一下Flyout 的内容,当触发应用中某个Button 时会有Flyout 出现提示用户该操作接下来将会发生什么.Flyout 简单来说就是一个轻量级信息提示需要用户确认或 ...

  7. Windows 8.1 新增控件之 Flyout

    本篇为大家介绍Flyout 控件,Flyout 属于一种轻量级交互控件,可以支持信息提示或用户交互.与传统Dialog 控件不同的是Flyout 控件可通过直接点击对话框外部区域忽略. Flyout ...

  8. Windows 8.1 应用再出发 - 几种新增控件(1)

    Windows 8.1 新增的一些控件,分别是:AppBar.CommandBar.DatePicker.TimePicker.Flyout.MenuFlyout.SettingsFlyout.Hub ...

  9. Windows 8.1中WinRT的变化(一)——新增控件

    这次WinRT的变化还是不小的,就拿新增控件来说,就有如下几种: AppBar 控件 我以前写过一篇文章接受过如何在WinRT程序中快速创建Metro风格图标,现在MS已经把他们标准化了,就不用我们自 ...

随机推荐

  1. MVC 生成图片,下载文件(图片不存在本地,在网上下载)

    /// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...

  2. android开发练习:天气应用

    来源:网易云课堂GeekBand第七次作业 作业要求: 做一个天气应用 接口参考: http://apistore.baidu.com/apiworks/servicedetail/880.html, ...

  3. IOS开发之功能模块--给任意的UIView添加点击事件

    前言:好久没写博客,今天来一波.我在实际项目开发中,会遇到这样功能需求:我已经搭好了iOS的UI界面,但是很多界面的子View用了UIView,然后这些UIView中用了UILabel和UIImage ...

  4. XML 学习介绍 收藏

    XML学习总结(一)——XML介绍 一.XML概念 Extensible Markup Language,翻译过来为可扩展标记语言.Xml技术是w3c组织发布的,目前推荐遵循的是W3C组织于2000发 ...

  5. 基于Attribute的Web API路由设置

    路由对于MVC应用程序来说都是至关重要的一个部门,不管是asp.net mvc或者Ruby on Rails(当然还有其它的,我只熟悉这两个:) )  asp.net mvc自带的路由配置是在Glob ...

  6. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  7. 查看mysql,apache,php,nginx编译参数

    查看nginx编译参数: #/usr/local/nginx/sbin/nginx -V   查看mysql编译参数: cat /usr/local/mysql/bin/mysqlbug | grep ...

  8. Spring CharacterEncodingFilter

    <!-- 配置请求过滤器,编码格式设为UTF-8,避免中文乱码--> <filter> <filter-name>springUtf8Encoding</fi ...

  9. 如何编译ReactNative示例程序Examples

    通过示例程序可以看到一些基本组件的使用,对于学习ReactNative是很有帮助的. 编译示例程序需要将整个项目导入到androidStudio中,androidStudio导入项目时选择react- ...

  10. linux中send函数MSG_NOSIGNAL异常消息

    最近2周在做ineedle的国舜项目扩展,需要使用socket的tcp连接向对方发送消息,当然需求很简单,只是按照对方要求发送指定格式的消息,程序结构也非常的简单,一对多的client/server模 ...