Windows 8.1 新增的一些控件,分别是:AppBar、CommandBar、DatePicker、TimePicker、Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。我们分成两篇来介绍,本篇先为大家介绍AppBar、CommandBar、DatePicker 和 TimePicker。

1. AppBar

Windows 8.1引入了几种新的控件来帮助我们更快捷的创建应用程序栏,分别是AppBarButton、AppBarToggleButton 和 AppBarSeparator。应用程序栏按钮默认外观是圆圈,而不是常规按钮的矩形(做过WP的开发者一定不会陌生);设置内容需要使用Label 和 Icon 属性,而不是Content;它有两种尺寸,普通和精简,可以通过IsCompact属性来控制。

    <Page.BottomAppBar>
<AppBar>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<AppBarButton Icon="AlignLeft" Label="AlignLeft" IsCompact="False"/>
<AppBarButton Icon="AlignCenter" Label="AlignCenter" IsCompact="False"/>
<AppBarButton Icon="AlignRight" Label="AlignRight" IsCompact="False"/>
<AppBarSeparator/>
<AppBarToggleButton Icon="Dislike" Label="Dislike"/>
<AppBarToggleButton Icon="Like" Label="Like" IsChecked="True"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<AppBarButton Icon="Refresh" Label="Refresh"/>
<AppBarButton Icon="Help" Label="Help"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

如上图所示,我们创建了一个简单的应用程序栏。按钮被分为两部分,左侧包括了三个AppBarButton 和两个AppBarToggleButton,中间用AppBarSepator隔开;右侧为两个AppBarButton。大家通过代码和运行效果就能很明显的看到程序栏按钮与常规按钮在形状和属性设置上的不同。另外也可以看到AppBarToggleButton拥有的状态切换功能。如果我们试着把按钮的IsCompact都设置为true, 则效果是这样的:

可以看到,设置IsCompact属性后,按钮的文字消失了,而且按钮所占空间变小了。这种变化在应用处于Snapped状态时较为常用。

另外,按钮的Icon属性提供了四种图标元素表现方式,分别是:

  • FontIcon —— 基于指定字体系列的字型
  • BitmapIcon —— 基于指定Uri的位图图像文件
  • PathIcon —— 基于路径数据
  • SymbolIcon —— 基于Segoe UI Symbol 字体的字型预定义列表。

下面我们在例子中分别讲述这几种表现方式

    <Page.BottomAppBar>
<AppBar>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<AppBarButton Label="FontIcon">
<AppBarButton.Icon>
<FontIcon FontFamily="Candara" Glyph="Ω"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/Logo.scale-100.png"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">
<AppBarToggleButton.Icon>
<PathIcon Data="F1 M 20, 10L 10,30L 30,30"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarButton Icon="Help" Label="SymbolIcon" Click="AppBarButton_Click"/>
</StackPanel>
</AppBar>
</Page.BottomAppBar>

2. CommandBar

Windows 8.1 引入的CommandBar在很大程度上简化了我们创建应用程序栏的过程,它会把按钮分为右侧的主命令(Primary Commands)和左侧的辅助命令(Secondary Commands)来自动进行布局,还可以根据应用大小的变化自动调整自身大小。默认情况下,按钮被添加到主命令集合中而显示在程序栏右侧,当按钮被显式添加到辅助命令集合时,它将显示在程序栏左侧。当应用程序栏中仅包括AppBarButton、AppBarToggleButton 和 AppBarSeparator 时,我们应该选择使用CommandBar。而当更复杂的内容,如文本,图像等存在时,我们选择使用AppBar 控件。

    <Page.BottomAppBar>
<CommandBar>
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
<AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
<AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
<AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/> <CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
<AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>

如上面代码所示,Like 和 Dislike 按钮在辅助命令集合中,它们会出现在程序栏的左侧,而其他按钮默认加入主命令集合,会排列在程序栏右侧。来看看运行效果图:

3. DatePicker

Windows 8.1 引入了DatePicker,也就是日期选取控件,很多应用中都会用到日期选取控件(不知道为什么8.1才加入,以前项目里都是自己写的),例如航班时间、约会时间等等。我们先来看看它的外观

上面两张图分别是默认和打开选取器时的效果。大家可能也发现了,年份并没有特殊的限制,如果我们想选择出生年月的话,那么超过2014年明显是不合理的;如果想选择一个计划完成时间,那么2013年以前的年份也是我们不想看到的。这时候我们可以利用DatePicker控件的MaxYear 或 MinYear 来实现。比如我们想把MaxYear设为今年,代码如下:

        public MainPage()
{
this.InitializeComponent(); datePicker.MaxYear = DateTimeOffset.Now;
}

运行效果正如我们所想。另外DatePicker还提供了很多种显示方式,我们可以分别通过DayFormat、MonthFormat 和 YearFormat 对日月年进行格式调整。

     <DatePicker x:Name="datePicker" Header="My Date Picker"
DayFormat="{}{day.integer(2)}" MonthFormat="{}{month.solo.abbreviated(3)}" YearFormat="{}{year.abbreviated}"/>

看起来有点难懂,不过好在我们可以在DatePicker属性选项中选择,而不是自己去写。另外如果我们想隐藏掉年月日中某项,可以通过设置YearVisible、MonthVisible 和 DayVisible来完成。比如我们不想显示日子:

     <DatePicker x:Name="datePicker" Header="My Date Picker" DayVisible="False"
DayFormat="{}{day.integer(2)}" MonthFormat="{}{month.solo.abbreviated(3)}" YearFormat="{}{year.abbreviated}"/>

我们看到,日子没有显示。同理我们可以完成月和年的设置。

4. TimePicker

TimePicker多数时候会和DatePicker搭配使用,来完成日期和时间的选取。默认外观是这样的

我们看到,TimePicker显示的是24小时制,我们可以通过修改ClockIdentifier属性让它显示为12小时制

<TimePicker Header="Time Picker" ClockIdentifier="12HourClock" x:Name="timePicker"/>

如上图所示,ClockIdentifier设置为12HourClock时,显示为12小时制,同时会显示上午/下午的选项;类似的,设置为24HourClock时,显示为24小时制,上午/下午的选项消失。

我们还可以通过设置Time属性来修改TimePicker的默认值

        public MainPage()
{
this.InitializeComponent();
timePicker.Time = new TimeSpan(, , );
}

如上图所示,我们设置时间为20:19,也就是下午8:19。另外我们可以把分钟选择器的增量值设置为适合我们的值,比如半个小时。

<TimePicker Header="Time Picker" ClockIdentifier="12HourClock" MinuteIncrement="30" x:Name="timePicker"/>

我们看到,设置后的TimePicker,分钟选择只有0和30两种,这正是我们想要的。

到这里我们就把AppBar、CommandBar、DatePicker 和 TimePicker的用法介绍完了,下一篇我们会介绍剩余的新增控件,谢谢大家。

Windows 8.1 应用再出发 - 几种新增控件(1)的更多相关文章

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

    本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout.MenuFlyout.SettingsFlyout.Hub 和 Hyperlink. 1. Flyout Flyout被称为 ...

  2. Windows 8.1 应用再出发 - 几种布局控件

    本篇为大家介绍Windows 商店应用中几种布局控件的用法.分别是Canvas.Grid.StackPanel 和 VariableSizedWrapGrid. 1. Canvas Canvas使用绝 ...

  3. Windows 8.1 应用再出发 - 几种常用控件

    本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明. 1. 文本控件 (1) TextBlock TextBlock ...

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

    Windows 8.1 和 WinJS 引入了以下新控件和功能,分别是:AppBarCommand.BackButton.Hub.ItemContainer.NavBar.Repeater.WebVi ...

  5. Windows 8.1 应用再出发 - 几种更新的控件

    Windows 8.1 除了新增了很多很有用的控件外,还对一些控件做出了更新.接下来我们一起对这些更新的控件一一做出讲解. 1. FlipView 更新 翻转视图控件,在应用中常用作图片等内容的翻页/ ...

  6. Windows 8.1 应用再出发 (WinJS) - 几种新增控件(2)

    上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand.BackButton.Hub.ItemContainer,本篇我们接着来介绍 NavBar.Repea ...

  7. Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目

    前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...

  8. Windows Phone中的几种集合控件

    前言 Windows Phone开发过程中不可避免的就是和集合数据打交道,如果之前做过WP App的开发的话,相信你已经看过了各种集合控件的使用.扩展和自定义.这些个内容在这篇博客里都没有,那么我们今 ...

  9. Delphi一共封装(超类化)了8种Windows基础控件和17种复杂控件

    超类化源码: procedure TWinControl.CreateSubClass(var Params: TCreateParams; ControlClassName: PChar); con ...

随机推荐

  1. 11.tftp和nfs服务器

    宿主机产生嵌入式软件的机器 运行程序的是目标机上运行 基于网络的下载 目标机通过tftp下载到目标机 1. 安装tftp依赖xinetd [root@cfm880 Packages]# rpm -iv ...

  2. STL之迭代器(iterator)

    STL的中心思想在于:将数据容器和算法分开,彼此独立设计,最后再用一帖粘着剂将它们撮合在一起.没错,这个粘着剂正是迭代器(iterator).迭代器的主要目的是通过遍历来对容器中元素进行相关操作.算法 ...

  3. 遍历所有的选中的radio的个数和值

         var ID = "";             $('input:radio:checked').each(function (i) {                 ...

  4. unity3d InverseTransformPoint方法

    从歪果仁的脚本里看到了这个方法,查脚本,看脚本说明也没看懂,官方的说明是,变换位置从世界坐标到自身坐标,Transform.TransformPoint相反. 试验了一下得出这个结论,如果某一个物体A ...

  5. 移动端自动化环境搭建-node.js的安装

    安装node.js A.安装依赖 Appium是使用nodejs实现的,所以node是解释器,首先需要确认安装好 B.安装过程

  6. 关于 NPOI 报 Invalid column index (256). Allowable column range for BIFF8 is (0..255) or ('A'..'IV') 错误的解决办法

    当看到这个错误的时候,网上搜索可以会有些说列数有限制之类的说法,这个说法是相对于 Office 2003 的,在 Office 2007 之前,最多只可以创建  列:在 Office 2007 之后, ...

  7. arcgis desktop按ctrl键后地图乱移的解决办法

    习惯使用快捷键的,经常会按下ctrl. 但在arcmap中,按下ctrl后,地图乱移.分析发现变为鼠标导航状态,也就是鼠标偏离地图中心,地图就会往鼠标所在方向移动. 解决办法:1. 以前按下esc键, ...

  8. 解决VMware“该虚拟机似乎正在使用中”问题

    http://jingyan.baidu.com/article/4ae03de3fa2ae93eff9e6bb0.html

  9. RHEL 7.0 本地配置yum源

    RHEL 7.0 本地配置yum源  yum简介  yum = Yellow dog Updater, Modified 主要功能是更方便的添加/删除/更新RPM包. 它能自动解决包的倚赖性问题. 它 ...

  10. PHP各种缓存

    缓存类型PHP缓存包括PHP变异缓存和PHP数据缓存两种:PHP编译缓存:        PHP数据缓存:    对数据库数据进行缓存    对PHP模板数据缓存 js数据缓存