BottomAppBar
在介绍BottomAppBar之前还是先上张图。
这次我们关注底部的AppBar.
上图的AppBar分为左右2个部分。
左侧是引用系统自带的AppBar按钮，右侧是自定义的AppBar按钮。其实写法都一样。
下面来看看布局文件
[plain] view plaincopyprint?
  1. <Page.BottomAppBar>
  2. <!-- ApplicationBar -->
  3. <AppBar x:Name="BottomAppbar">
  4. <Grid>
  5. <Grid.RowDefinitions>
  6. <RowDefinition Height="Auto"/>
  7. <RowDefinition Height="Auto"/>
  8. </Grid.RowDefinitions>
  9. <StackPanel x:Name="systemAppBarPanel" Orientation="Horizontal">
  10. <Button x:Name="SkipBackAppBarButton" Style="{StaticResource SkipBackAppBarButtonStyle}" Click="OnSkipBackAppBarButtonCilcked" />
  11. <Button x:Name="SkipAheadAppBarButton" Style="{StaticResource SkipAheadAppBarButtonStyle}" Click="OnSkipAheadAppBarButtonCilcked"/>
  12. <Line Width="5" Stroke="White" Stretch="Fill" Y2="{Binding ActualHeight, ElementName=systemAppBarPanel, Mode=OneWay}"/>
  13. <Button x:Name="PlayAppBarButton" Style="{StaticResource PlayAppBarButtonStyle}" Click="OnPlayAppBarButtonCilcked"/>
  14. <Button x:Name="PauseAppBarButton" Style="{StaticResource PauseAppBarButtonStyle}" Click="OnPauseAppBarButtonCilcked"/>
  15. <Button x:Name="StopAppBarButton" Style="{StaticResource StopAppBarButtonStyle}" Click="OnStopAppBarButtonCilcked"/>
  16. </StackPanel>
  17. <StackPanel x:Name="customAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right">
  18. <Button x:Name="LoveAppBarButton" Style="{StaticResource LoveAppBarButtonStyle}" Click="OnLoveAppBarButtonCilcked"/>
  19. <Button x:Name="CalcAppBarButton"  Style="{StaticResource CalcAppBarButtonStyle}" Click="OnCalcAppBarButtonCilcked"/>
  20. <Button x:Name="TelAppBarButton"  Style="{StaticResource TelAppBarButtonStyle}" Click="OnTelAppBarButtonCilcked"/>
  21. <Button x:Name="GoodAppBarButton"  Style="{StaticResource GoodAppBarButtonStyle}" Click="OnGoodAppBarButtonCilcked"/>
  22. <Button x:Name="LaughAppBarButton"  Style="{StaticResource LaughAppBarButtonStyle}" Click="OnLaughAppBarButtonCilcked"/>
  23. </StackPanel>
  24. </Grid>
  25. </AppBar>
  26. </Page.BottomAppBar>

里面每一个Button的样式都是不同的。这些样式是什么呢？先来看看系统的样式。

以SkipBackAppBarButtonStyle为例：
[html] view plaincopyprint?
  1. <Style x:Key="SkipBackAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
  2. <Setter Property="AutomationProperties.AutomationId" Value="SkipBackAppBarButton"/>
  3. <Setter Property="AutomationProperties.Name" Value="Skip Back"/>
  4. <Setter Property="Content" Value=""/>
  5. </Style>

SkipBackAppBarButton是以AppBarButtonStyle为基本样式的一个AppBar按钮，在这里我们只需注意最后2个Setter.

<Setter Property="AutomationProperties.Name" Value="Skip Back"/>用来显示按钮下面的字串
<Setter Property="Content" Value=""/> 用来显示按钮中间圆圈里的字符串，再次强调这个不是“图片”。
看到这里，你们也许知道了自定义按钮该怎样定义了。代码还是贴下吧。
[html] view plaincopyprint?
  1. <Style x:Key="LoveAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
  2. <Setter Property="AutomationProperties.AutomationId" Value="LoveAppBarButton"/>
  3. <Setter Property="AutomationProperties.Name" Value="爱心"/>
  4. <Setter Property="Content" Value=""/>
  5. </Style>

每一个按钮的事件都很简单，就是弹出一个相应的对话框，这里就省略了。

Snap模式处理
同TopAppBar一样，BottomAppBar在Snap模式下的时候需要进行UI转换。
Snap模式后面会详细介绍。这里先省略概念。
如果不做处理，当你把程序拖到侧边栏时，你会发现此时BottomAppBar上面的按钮只剩下了3个!并且按钮上面的文字显示不全。
因此我们需要对BottomAppBar的布局做下调整。当程序拖到侧边栏时，将左右两侧的按钮分两排显示，缩小按钮尺寸并且隐去按钮下面文字。
不过系统并没有定义这种按钮的样式，需要我们自己来实现：
创建文件AppBarPageStyle.xaml，在StandardStyles.xaml里找到AppBarButtonStyle，将其复制到AppBarPageStyle.xaml中，并更名为
AppBarButtonSnapStyle,修改Template属性。
[plain] view plaincopyprint?
  1. <ControlTemplate TargetType="ButtonBase">
  2. <Grid x:Name="RootGrid" Width="60" Background="Transparent">
  3. <StackPanel VerticalAlignment="Top" Margin="0,12,0,11">
  4. <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">
  5. <TextBlock x:Name="BackgroundGlyph" Text="" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemBackgroundThemeBrush}"/>
  6. <TextBlock x:Name="OutlineGlyph" Text="" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"/>
  7. <ContentPresenter x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center"/>
  8. </Grid>
  9. </StackPanel>
  10. ...
  11. </Grid>
  12. </ControlTemplate>

然后定义相对应的Snap AppBar按钮

[plain] view plaincopyprint?
  1. <Style x:Key="LoveAppBarButtonSnapStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonSnapStyle}">
  2. <Setter Property="Content" Value=""/>
  3. </Style>

在AppBarPage页面进入Snap模式的时候，如果在XAML里面注册状态监听，程序会根据XAML代码变换UI布局。

[plain] view plaincopyprint?
  1. <VisualState x:Name="Snapped">
  2. <Storyboard>
  3. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
  4. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
  5. </ObjectAnimationUsingKeyFrames>
  6. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
  7. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
  8. </ObjectAnimationUsingKeyFrames>
  9. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="customAppBarPanel"  Storyboard.TargetProperty="(Grid.Row)">
  10. <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
  11. </ObjectAnimationUsingKeyFrames>
  12. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="customAppBarPanel"  Storyboard.TargetProperty="HorizontalAlignment">
  13. <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
  14. </ObjectAnimationUsingKeyFrames>
  15. <!--appbar button-->
  16. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SkipBackAppBarButton" Storyboard.TargetProperty="Style">
  17. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SkipBackAppBarButtonSnapStyle}"/>
  18. </ObjectAnimationUsingKeyFrames>
  19. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SkipAheadAppBarButton" Storyboard.TargetProperty="Style">
  20. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SkipAheadAppBarButtonSnapStyle}"/>
  21. </ObjectAnimationUsingKeyFrames>
  22. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayAppBarButton" Storyboard.TargetProperty="Style">
  23. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PlayAppBarButtonSnapStyle}"/>
  24. </ObjectAnimationUsingKeyFrames>
  25. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PauseAppBarButton" Storyboard.TargetProperty="Style">
  26. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PauseAppBarButtonSnapStyle}"/>
  27. </ObjectAnimationUsingKeyFrames>
  28. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StopAppBarButton" Storyboard.TargetProperty="Style">
  29. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource StopAppBarButtonSnapStyle}"/>
  30. </ObjectAnimationUsingKeyFrames>
  31. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoveAppBarButton"  Storyboard.TargetProperty="Style">
  32. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LoveAppBarButtonSnapStyle}"/>
  33. </ObjectAnimationUsingKeyFrames>
  34. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CalcAppBarButton"  Storyboard.TargetProperty="Style">
  35. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CalcAppBarButtonSnapStyle}"/>
  36. </ObjectAnimationUsingKeyFrames>
  37. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TelAppBarButton"  Storyboard.TargetProperty="Style">
  38. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TelAppBarButtonSnapStyle}"/>
  39. </ObjectAnimationUsingKeyFrames>
  40. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GoodAppBarButton"  Storyboard.TargetProperty="Style">
  41. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GoodAppBarButtonSnapStyle}"/>
  42. </ObjectAnimationUsingKeyFrames>
  43. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LaughAppBarButton"  Storyboard.TargetProperty="Style">
  44. <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LaughAppBarButtonSnapStyle}"/>
  45. </ObjectAnimationUsingKeyFrames>
  46. </Storyboard>
  47. </VisualState>

Snap模式下的BottomAppBar如下图所示：

注意：
1.别忘了在App.xaml中引用AppBarPageStyle.xaml

[html] view plaincopyprint?
  1. <ResourceDictionary Source="Common/StandardStyles.xaml"/>
  2. <ResourceDictionary Source="Pages/Home/GlobalPageStyle.xaml"/>
  3. <ResourceDictionary Source="Pages/Home/HomePageStyle.xaml"/>
  4. <ResourceDictionary Source="Pages/01-AppBar/AppBarPageStyle.xaml"/>
2.AppBar控件的功能(应该是所有控件)需要符合微软制定的规范，不能随便制定。具体内容可参考MSDN。

Windows8 Metro开发 (03) : AppBar控件之BottomAppBar相关推荐

  1. Windows8 Metro开发 (02) : AppBar控件之TopAppBar

    Appbar分为2种: 显示在页面顶部的TopAppBar 显示在页面底部的BottomAppBar TopAppBar一般用于页面导航,BottomAppBar则用来处理一些用户事件. 本文仅介绍T ...

  2. 【Win 10应用开发】SplitView控件

    [Win 10应用开发]SplitView控件 原文:[Win 10应用开发]SplitView控件 SplitView控件用于呈现分隔视图,简单地说,就是把一个视图分割为两部分,Content属性所 ...

  3. 用友二次开发 用友控件 Js宿主脚本 调用用友T6 登录 参照 控件示例

    用友二次开发 用友控件 Js宿主脚本 调用用友T6 登录 参照 控件示例 /*****************************************, code by 张朋 ' Email: ...

  4. 分享-WinForm界面开发之布局控件WeifenLuo.WinFormsUI.Docking的使用

    分享自伍华聪的-WinForm界面开发之布局控件"WeifenLuo.WinFormsUI.Docking"的使用 本篇介绍Winform程序开发中的布局界面的设计,介绍如何在我的 ...

  5. Qt界面开发（各种控件以及图表）

    Qt界面开发(各种控件以及图表) 1.Qt简洁窗体 源代码链接:点击打开链接 2.QT漂亮界面 源代码链接:点击打开链接 3.音乐播放器界面 源代码链接:点击打开链接 4.六宫格界面 源代码链接:点击 ...

  6. firefox扩展开发(八) ：控件激活

    firefox扩展开发(八) :控件激活 2008-06-11 17:01 当我们用鼠标点击一个控件,或者用TAB键移动到一个控件上时,我们说这个控件被激活 了(focus),离开这个控件时,我们说这 ...

  7. UG/NX二次开发 选择坐标系控件 UF_UI_specify_csys

    文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan 简介: UG/NX二次开发 选择坐标系控件 UF_UI_specify_csys 与 老函数 ...

  8. android include 控件详解,Android开发中include控件用法分析

    本文实例讲述了Android开发中include控件用法.分享给大家供大家参考,具体如下: 我们知道,基于Android系统的应用程序的开发,界面设计是非常重要的,它关系着用户体验的好坏.一个好的界面 ...

  9. VS+QT开发Ocx/ActiveX控件 一

    VS+QT开发Ocx/ActiveX控件 一 VS+QT开发Ocx/ActiveX控件-------网页中全屏 二 QT开发ActiveX控件 一:所用IDE版本,需用管理员权限 二:创建Active ...

最新文章

  1. 一堆棋子java代码编程_网易2018校招内推编程题-堆棋子-C++实现
  2. Hibernate干系映照小结
  3. 【Vegas原创】outlook发送时，报550 5.7.1 client does not have permissions to send as this sender解决方法...
  4. Android Studio新建类头部注释和添加函数注释模板及快捷键
  5. java eclipse 注释模板_Eclipse Java注释模板设置详解
  6. CentOS 6.8 上 MySQL-server 数据库安装失败
  7. （41）FPGA状态机一段式
  8. [WPF自定义控件库]自定义Expander
  9. 用c 语言写21点游戏,求一c语言程序 ：21点游戏代码
  10. python开发桌面时钟_python+PyQT实现系统桌面时钟
  11. 用c语言把图像转成jpg格式,图像格式转换之BMP格式转换为JPG格式(示例代码)
  12. 潘通色号与rgb转换_中秋福利！手把手教你用Python做一只口红色号识别器，秒变李佳琦...
  13. XSS原理dvwaxssvalidator使用
  14. 揭开CVE漏洞挖掘与编号申请那层神秘窗户纸
  15. 安装使用完虚拟机UltraISO后，删除电脑中多出的“CD驱动器”盘符
  16. 谷歌Chrome浏览器点击任务栏图标没有最小化
  17. WSN连通性模拟、WSN覆盖率模拟、WSN分簇模拟、WSN能量损耗模拟
  18. matlab如何使输出结果更美观(symdisp函数——pretty函数升级版)
  19. 如何将excel表格导入word_word办公技巧：如何让Excel与Word文档数据同步
  20. 【转】如何管理PDF书签：Foxit、PDF XChange、PDF补丁丁

热门文章

  1. 【数字信号处理】周期序列 ( 正弦序列特性 | 单个模拟周期采集 m 个数字样本 | Q 个模拟周期采集 P 个数字样本 | 非周期序列的情况 | 数字信号周期 )
  2. 【数字信号处理】离散时间信号 ( 模拟信号、离散时间信号、数字信号 | 采样导致时间离散 | 量化导致幅度离散 )
  3. 【计算机网络】网络层 : IPv6 协议 ( IPv6 数据包格式 | IPv6 地址表示 | IPv6 地址类型 | IPv4 与 IPv6 协议对比 | IPv4 -＞ IPv6 过渡策略 )
  4. new Map的妙用
  5. iOS深入探索直播推拉流实现流程(二：推流权限判断 )
  6. 解决三星 BIOS 模式没有 Fast Bios Mode选项 U盘动项问题
  7. C#获取邮件客户端保存的邮箱密码
  8. Jackson 框架使用说明，轻易转换JSON【转】
  9. Matlab Robotic Toolbox V9.10工具箱(六)：puma560 动力学建模与仿真
  10. UI设计师的实际工作流程是什么样的？