【Win10】让 AppBarButton 支持更复杂的 Icon 内容

最近有一个需求，需要制作这么一个 AppBarButton：

这个 AppBarButton 的 Icon 是一个评论框图标里面再显示评论数（大于 99 条则显示 99+）。其中评论数是通过数据绑定得来的。

要单独显示这个评论框图标或者单独显示评论数都不是难题，然而要同时显示这两者就成了一个大问题了，因为 AppBarButton 的 Icon 属性只能设置一个。再看看 Icon 属性的类型，是 IconElement 这个类。但是，这个类的构造函数是内部的，我们也没法继承它。那么，从 Icon 属性上入手是不可能了。

但是，要注意到，绝大部分的控件都是有模板的，然后可以修改的。对于 AppBarButton，是不是也这样呢？答案是肯定的。

在 MSDN 上，我们可以查阅到 AppBarButton 的默认样式和模板：https://msdn.microsoft.com/zh-cn/library/windows/apps/mt299105.aspx

<!-- Default style for Windows.UI.Xaml.Controls.AppBarButton -->

<Style TargetType="AppBarButton">

  <Setter Property="Background" Value="Transparent"/>

  <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>

  <Setter Property="HorizontalAlignment" Value="Left"/>

  <Setter Property="VerticalAlignment" Value="Top"/>

  <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>

  <Setter Property="FontWeight" Value="Normal"/>

  <Setter Property="Width" Value="68"/>

  <Setter Property="UseSystemFocusVisuals" Value="True" />

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="AppBarButton">

        <Grid

            x:Name="Root"

            MinWidth="{TemplateBinding MinWidth}"

            MaxWidth="{TemplateBinding MaxWidth}"

            Background="{TemplateBinding Background}">

          <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="ApplicationViewStates">

              <VisualState x:Name="FullSize"/>

              <VisualState x:Name="Compact">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

              <VisualState x:Name="Overflow">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

              <VisualState x:Name="OverflowWithToggleButtons">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Margin">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="38,11,0,13"/>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

            </VisualStateGroup>

            <VisualStateGroup x:Name="CommonStates">

              <VisualState x:Name="Normal">

                <Storyboard>

                  <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />

                </Storyboard>

              </VisualState>

              <VisualState x:Name="PointerOver">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />

                </Storyboard>

              </VisualState>

              <VisualState x:Name="Pressed">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />

                </Storyboard>

              </VisualState>

              <VisualState x:Name="Disabled">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

            </VisualStateGroup>

          </VisualStateManager.VisualStateGroups>

          <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}">

            <ContentPresenter

                x:Name="Content"

                Height="20"

                Margin="0,14,0,4"

                Content="{TemplateBinding Icon}"

                Foreground="{TemplateBinding Foreground}"

                HorizontalAlignment="Stretch"

                AutomationProperties.AccessibilityView="Raw"/>

            <TextBlock

                x:Name="TextLabel"

                Text="{TemplateBinding Label}"

                Foreground="{TemplateBinding Foreground}"

                FontSize="12"

                FontFamily="{TemplateBinding FontFamily}"

                TextAlignment="Center"

                TextWrapping="Wrap"

                Margin="0,0,0,6"/>

          </StackPanel>

          <TextBlock

              x:Name="OverflowTextLabel"

              Text="{TemplateBinding Label}"

              Foreground="{TemplateBinding Foreground}"

              FontSize="15"

              FontFamily="{TemplateBinding FontFamily}"

              TextAlignment="Left"

              TextTrimming="Clip"

              TextWrapping="NoWrap"

              HorizontalAlignment="Stretch"

              VerticalAlignment="Center"

              Margin="12,11,0,13"

              Visibility="Collapsed"/>

        </Grid>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

仔细看一下这个模板，我们可以发现这么一句：

Content="{TemplateBinding Icon}"

我们尝试一下将 Icon 修改为 Content。（Content 属性是 AppBarButton 从 Button 类继承得来的，但是 AppBarButton 它自身并没有使用到这个属性。）

然后编写 XAML 测试下：

<CommandBar>

    <AppBarButton Style="{StaticResource MyAppBarButtonStyle}"

                             Label="评论">

        <AppBarButton.Content>

            <Grid>

                <FontIcon Glyph=""

                                 FontFamily="Segoe MDL2 Assets"

                                 HorizontalAlignment="Center"

                                 VerticalAlignment="Center" />

                <TextBlock Text="99+"

                                   HorizontalAlignment="Center"

                                   VerticalAlignment="Center"

                                   FontSize="9"

                                   RenderTransformOrigin="0.5,0.5">

                    <TextBlock.RenderTransform>

                        <TranslateTransform Y="-2.5" />

                    </TextBlock.RenderTransform>

                </TextBlock>

            </Grid>

        </AppBarButton.Content>

    </AppBarButton>

</CommandBar>

运行后，你应该可以看到文章开头的效果了。

最后，当然是稍微封装下了，因为 AppBarButton 是能够继承的。由于没啥技术含量-_-|||，这里就大家自己弄了。

【Win10】让 AppBarButton 支持更复杂的 Icon 内容的更多相关文章

调整ESX的VMFS磁盘格式的块大小，让单个虚拟磁盘支持更大容量
调整ESX的VMFS磁盘格式的块大小,让单个虚拟磁盘支持更大容量前因:客户搭建了VMware ESX企业版的测试平台:有一天接到一个需求,是测试数据库的,需要一个300G的磁盘. 解决过程: 1.按 ...
win10 家庭版不支持gpedit.msc的解决办法
win10 家庭版不支持gpedit.msc的解决办法 1.建立一个批处理文件内容如下: @echo off pushd "%~dp0" dir /b %systemroot%\W ...
一个尖括号能干什么，画一个笑脸开始（为了支持交互，它又增添了JavaScript。HTML页面也越来越臃肿。于是CSS便诞生了。API和核心代码的出现使HTML能够访问更复杂的软件功能－－支持更高级的交互和云服务集成。这就是今天的HTML5）
一个尖括号 < 一个尖括号能干什么 < ? 你可以编出一顶帽子 <(:-p 或一张笑脸 :-> 再或者更直接一些 20世纪90年代初,html作为一种简单标记语言面世,用于在互 ...
【经验】Rufus制作Win10启动盘支持UEFI：比使用UltraISO(软碟通)制作Win10操作系统U盘启动盘更快捷的工具完整教程-
ultraiso中文称之为软碟通,是一款功能强大的光盘映像文件制作/编辑/转换工具,通过它,用户可以直接编辑ISO文件和从ISO中提取文件和目录,也可以从CD-ROM制作光盘映像或者将硬盘上的文件制作 ...
WinForms 2015V2版本Reports支持更多种条形码！
Winforms版Reports的条形码引擎从未如此强大.除了支持38种新旧条形码以外,还增添了很多您一定会喜欢的新属性.如果您因此就担心已经在使用的条形码,那么请您放宽心,因为已有的条形码会继续使用 ...
mysql if对数据进行处理 having对数据进行查询 thinkphp中的exp支持更复杂的where查询
很多时候,数据库获取的信息并不是我们最终想要的,需要通过if进行处理. where支持查询 having支持后查询(查询后的数据,再筛选) 代码如下: if ($this->_post('dos ...
【android】如何让WebView对Video标签的支持更强力
先说结论:各个产商对HTML5特性支持的程度不一样,用默认的WebChromeClient不能普遍适用. 因此咱基于GITHUB上一个VideoEnabledWebView库做了自己的封装,在魅族.华 ...
如何修改Jmeter配置使能支持更大并发
Jmeter做并发测试时,报错 java.lang.OutOfMemoryError:gc overhead limit exceeded. 原因是jmeter默认分配内存的参数很小,256M吧.故而 ...
发现一个小技巧:火狐浏览器对phpmyadmin支持更友好
这段时间ytkah正在迁移服务器(A→B),为了方便起见,直接用phpmyadmin导入数据库.一般我们是用navicat来操作数据库的,但是服务器A设置了权限,无法用navicat连接,只好在浏览器 ...

随机推荐

SVO实时全局光照优化（里程碑MK2）：Sparse Voxel Octree based Global Illumination (SVO GI)
自主实现的实时渲染引擎,对标对象ue4/ce5,超越u3d/klayge.MK2版本侧重于质量与速度的均衡,以下上传示范均为实测截图,均为全分辨率(网页上显示缩小了)1080p/60fps.
Javascript 严格模式
简介严格模式是一种将更好的错误检查引入代码中的方法. 在使用严格模式时,你无法使用隐式声明的变量.将值赋给只读属性或将属性添加到不可扩展的对象等. 声明严格模式可以通过在文件.程序或函数的开头添加 ...
那些一目了然的3D地质模型【转】
http://www.360doc.com/content/16/0830/09/14719766_586950902.shtml
brew 出现 git 错误的问题分析
现象 brew update的时候出现 gitcrash 分析在brew update 的时候看见有 git gc 的字样,提示有在gc 的动作.到/usr/local/ 目录,直接运行 git ...
Java程序员转Android开发必读经验分享
小编最近几日偷偷的发现部分Java程序员想转安卓开发,故此加紧补充知识,为大家搜集资料,积极整理前人的经验,希望可以给正处于困惑中的你,带来些许的帮助. 啰哩啰嗦的说说Java和Android程序的区 ...
This application is currently offline. To enable the application, remove the app_offline.htm file from the application r
退出VS ,把程序中主目录里的app_offline.htm文件删除,重新启动VS 就可以了.
【Cocos2d-Js基础教学（3）各种基类的定义和使用】
在游戏开发过程中我们会遇到很多继承关系的处理,特别是层级之间的关系处理. 可能有的同学也做过类似的处理,比如: 游戏的显示层分级为: 底层Scene ,界面层Layer,页面层Page,弹框层Tip等 ...
iOS 内存管理机制和循环引用处理方法
简述 ARC: 自动引用计数, Automatic Reference Counting MRC: Mannul Reference Counting ARC工作原理 1.当每次创建一个新实例时,AR ...
【转】如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
[leetcode]Excel Sheet Column Number
26进制 class Solution { public: int titleToNumber(string s) { ; ; i < s.size(); i++) { n = n * + s[ ...

【Win10】让 AppBarButton 支持更复杂的 Icon 内容

【Win10】让 AppBarButton 支持更复杂的 Icon 内容的更多相关文章

随机推荐

热门专题