原文：UWP Button添加圆角阴影（一）

众所周知，17763之前的UWP控件，大部分是没有圆角属性的；而阴影也只有17763中的ThemeShadow可以直接在xaml中使用，之前的版本只能用DropShadow，用法极其别扭。

本文就给出一个虽然很别扭，但是效果还不错的，比较通用的圆角+阴影的方案。

概念

我们先思考一下，用户感知到的圆角按钮，到底是个什么东西。

任何一个按钮，不外乎Background和Content两部分，用户可以从Content中获取到按钮的信息，而按钮的形状，在没有Border的情况下，用户对Button形状最直观的感受就是Background！

也就是说，我们只要让一个按钮的Background是一个圆角矩形，他在大多数情况下，就是一个圆角按钮！

按照这个思路，我们可以在17763之前的UWP，也就是大多数控件都没有CornerRadius这个属性的环境里，造出许多圆角的控件。

圆角

从Generic.xaml中，把Button的Style复制出一份，删除没有必要的东西，就成了下面的样子：

  1. <Style TargetType="Button">
  2.     <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
  3.     <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
  4.     <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
  5.     <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
  6.     <Setter Property="Padding" Value="8,4,8,4" />
  7.     <Setter Property="HorizontalAlignment" Value="Left" />
  8.     <Setter Property="VerticalAlignment" Value="Center" />
  9.     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
  10.     <Setter Property="FontWeight" Value="Normal" />
  11.     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
  12.     <Setter Property="UseSystemFocusVisuals" Value="True" />
  13.     <Setter Property="FocusVisualMargin" Value="-3" />
  14.     <Setter Property="Template">
  15.         <Setter.Value>
  16.             <ControlTemplate TargetType="Button">
  17.                 <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
  18.                     <VisualStateManager.VisualStateGroups>
  19.                         <VisualStateGroup x:Name="CommonStates">
  20.                             <VisualState x:Name="Normal" />
  21.                             <VisualState x:Name="PointerOver">
  22.                                 <Storyboard>
  23.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
  24.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
  25.                                     </ObjectAnimationUsingKeyFrames>
  26.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
  27.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" />
  28.                                     </ObjectAnimationUsingKeyFrames>
  29.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
  30.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
  31.                                     </ObjectAnimationUsingKeyFrames>
  32.                                 </Storyboard>
  33.                             </VisualState>
  34.                             <VisualState x:Name="Pressed">
  35.                                 <Storyboard>
  36.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
  37.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
  38.                                     </ObjectAnimationUsingKeyFrames>
  39.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
  40.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
  41.                                     </ObjectAnimationUsingKeyFrames>
  42.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
  43.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
  44.                                     </ObjectAnimationUsingKeyFrames>
  45.                                 </Storyboard>
  46.                             </VisualState>
  47.                             <VisualState x:Name="Disabled">
  48.                                 <Storyboard>
  49.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
  50.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
  51.                                     </ObjectAnimationUsingKeyFrames>
  52.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
  53.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
  54.                                     </ObjectAnimationUsingKeyFrames>
  55.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
  56.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
  57.                                     </ObjectAnimationUsingKeyFrames>
  58.                                 </Storyboard>
  59.                             </VisualState>
  60.                         </VisualStateGroup>
  61.                     </VisualStateManager.VisualStateGroups>
  62.                     <ContentPresenter x:Name="ContentPresenter"
  63.                         BorderBrush="{TemplateBinding BorderBrush}"
  64.                         BorderThickness="{TemplateBinding BorderThickness}"
  65.                         Content="{TemplateBinding Content}"
  66.                         ContentTransitions="{TemplateBinding ContentTransitions}"
  67.                         ContentTemplate="{TemplateBinding ContentTemplate}"
  68.                         Padding="{TemplateBinding Padding}"
  69.                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
  70.                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
  71.                         AutomationProperties.AccessibilityView="Raw" />
  72.                 </Grid>
  73.             </ControlTemplate>
  74.         </Setter.Value>
  75.     </Setter>
  76. </Style>

其实大部分内容不重要，我们先来分析一下这个结构，删掉所有布局之外的属性，就剩下很单纯的Grid装着一个ContentPresenter，是这样的：

  1. <Style TargetType="Button" x:Key="CornerRadiusShadowButtonStyle">
  2.     <Setter Property="Template">
  3.         <Setter.Value>
  4.             <ControlTemplate TargetType="Button">
  5.                 <Grid x:Name="RootGrid">
  6.                     <VisualStateManager.VisualStateGroups>
  7.                         <VisualStateGroup x:Name="CommonStates">
  8.                             <VisualState x:Name="Normal" />
  9.                             <VisualState x:Name="PointerOver"/>
  10.                             <VisualState x:Name="Pressed"/>
  11.                             <VisualState x:Name="Disabled"/>
  12.                         </VisualStateGroup>
  13.                     </VisualStateManager.VisualStateGroups>
  14.                     <ContentPresenter x:Name="ContentPresenter"/>
  15.                 </Grid>
  16.             </ControlTemplate>
  17.         </Setter.Value>
  18.     </Setter>
  19. </Style>

圆角的属性呢，只有在Border，Rectangle中有，当然你要是足够闲，也可以撸Path...

结果很明显了对吧，这就是圆角的两个实现方式，ContentPresenter外面套Border，或者后面放Rectangle当Background。

Border的方式呢，优缺点都很明显。

优点是Border的CornerRadius可以分别设置四个角的半径，而且可以设置给Button设置Border相关属性的时候，让Border的相关属性按照我们定义的Border的形状去绘制。

缺点呢，就是在PC端，Border设置CornerRadius后，会Clip掉内容超出Border的部分（由于17763之前的UWP没有GeometryClip，所以这个圆角Clip也算是个特性...），其实我们可以利用这个特性做圆形头像，圆形播放器啥的...

而Rectangle呢，虽然不能分别设置四个角的半径，但是可以分别设置X的半径和Y的半径...说起来感觉好诡异...

出个人喜好，还有我不喜欢画Border的风格，就选Rectangle的解决方案了。修改完成之后的Style结构应该是这个模样的：

  1. <Style TargetType="Button" x:Key="CornerRadiusShadowButtonStyle">
  2.     <Setter Property="Template">
  3.         <Setter.Value>
  4.             <ControlTemplate TargetType="Button">
  5.                 <Grid x:Name="RootGrid">
  6.                     <VisualStateManager.VisualStateGroups>
  7.                         <VisualStateGroup x:Name="CommonStates">
  8.                             <VisualState x:Name="Normal" />
  9.                             <VisualState x:Name="PointerOver"/>
  10.                             <VisualState x:Name="Pressed"/>
  11.                             <VisualState x:Name="Disabled"/>
  12.                         </VisualStateGroup>
  13.                     </VisualStateManager.VisualStateGroups>
  14.                     <Rectangle x:Name="Background" />
  15.                     <ContentPresenter x:Name="ContentPresenter"/>
  16.                 </Grid>
  17.             </ControlTemplate>
  18.         </Setter.Value>
  19.     </Setter>
  20. </Style>

注意事项：VisualStateManager必须放到控件根元素内，比如Page的VisualStateManager就必须放到Page内第一个元素比如Grid或者StackPanel里，不然是不会生效的。

完整版是这样的，有改颜色的需求可以撸一下VisualState里的颜色：

  1. <Style TargetType="Button" x:Key="CornerRadiusShadowButtonStyle">
  2.     <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
  3.     <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
  4.     <Setter Property="BorderBrush" Value="Transparent" />
  5.     <Setter Property="BorderThickness" Value="0" />
  6.     <Setter Property="Padding" Value="20,10,20,10" />
  7.     <Setter Property="HorizontalAlignment" Value="Left" />
  8.     <Setter Property="VerticalAlignment" Value="Center" />
  9.     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
  10.     <Setter Property="FontWeight" Value="Normal" />
  11.     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
  12.     <Setter Property="UseSystemFocusVisuals" Value="True" />
  13.     <Setter Property="FocusVisualMargin" Value="-3" />
  14.     <Setter Property="Template">
  15.         <Setter.Value>
  16.             <ControlTemplate TargetType="Button">
  17.                 <Grid x:Name="RootGrid">
  18.                     <VisualStateManager.VisualStateGroups>
  19.                         <VisualStateGroup x:Name="CommonStates">
  20.                             <VisualState x:Name="Normal" />
  21.                             <VisualState x:Name="PointerOver">
  22.                                 <Storyboard>
  23.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Fill">
  24.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
  25.                                     </ObjectAnimationUsingKeyFrames>
  26.                                 </Storyboard>
  27.                             </VisualState>
  28.                             <VisualState x:Name="Pressed">
  29.                                 <Storyboard>
  30.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Fill">
  31.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
  32.                                     </ObjectAnimationUsingKeyFrames>
  33.                                 </Storyboard>
  34.                             </VisualState>
  35.                             <VisualState x:Name="Disabled">
  36.                                 <Storyboard>
  37.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Fill">
  38.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
  39.                                     </ObjectAnimationUsingKeyFrames>
  40.                                 </Storyboard>
  41.                             </VisualState>
  42.                         </VisualStateGroup>
  43.                     </VisualStateManager.VisualStateGroups>
  44.                     <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RadiusX="5" RadiusY="5" />
  45.                     <ContentPresenter x:Name="ContentPresenter"
  46.                         BorderBrush="{TemplateBinding BorderBrush}"
  47.                         BorderThickness="{TemplateBinding BorderThickness}"
  48.                         Content="{TemplateBinding Content}"
  49.                         ContentTransitions="{TemplateBinding ContentTransitions}"
  50.                         ContentTemplate="{TemplateBinding ContentTemplate}"
  51.                         Padding="{TemplateBinding Padding}"
  52.                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
  53.                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
  54.                         AutomationProperties.AccessibilityView="Raw" />
  55.                 </Grid>
  56.             </ControlTemplate>
  57.         </Setter.Value>
  58.     </Setter>
  59. </Style>

UWP Button添加圆角阴影（一）的更多相关文章

  1. UWP Button添加圆角阴影（三）

    原文:UWP Button添加圆角阴影(三) Composition DropShadow是CompositionAPI中的东西,使用Storyboard设置某个属性,就是频繁的触发put_xxx() ...

  2. UWP Button添加圆角阴影（二）

    原文:UWP Button添加圆角阴影(二) 阴影 对于阴影呢,WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦,只要引用Microsoft.Toolki ...

  3. 为input输入框添加圆角并去除阴影

    <input type="text" name="bianhao" value="" placeholder="请输入商品编 ...

  4. CSS3圆角,阴影,透明

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...

  5. HackTwelve 为背景添加圆角边框

    1.概要:     ShapeDrawable是一个为UI控件添加特效的好工具.这个技巧适用于那些可以添加背景的控件 2.添加圆角边框其实就是添加的背景那里不是直接添加图片,而是添加一个XML文件即可 ...

  6. iOS给UIimage添加圆角的两种方式

    众所周知,给图片添加圆角有CALayer的cornerRadius, 比如: 最直接的方法: imgView.layer.cornerRadius1=110;   imgView.clipsToBou ...

  7. iOS 在xib或storyboard里为控件添加圆角、外框和外框颜色

    如果要在xib和storyboard里为控件添加圆角和外框宽度,只要这样做就可以 layer.borderWidth     设置外框宽度属性 layer.cornerRadius    设置圆角属性 ...

  8. iOS 高效添加圆角效果实战讲解

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  9. iOS在xib或storyboard里为控件添加圆角、外框和外框颜色

    如果要在xib和storyboard里为控件添加圆角和外框宽度,只要这样做就可以: layer.borderWidth 设置外框宽度属性 layer.cornerRadius 设置圆角属性 只要为属性 ...

随机推荐

  1. leveldb skiplist的改编非并发去除内存池版本 代码练习

    // MuSkipList.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #include <random> #include ...

  2. python flask 项目结构

    1. 今天学习遇到一个问题,以前项目比较简单,所有的@app.route 都是写在一个文件app.py 中的,然后启动也是在这个文件中启动app.run .但是我今天 想写一个新的模块, 于是我新启了 ...

  3. 【51NOD】1006 最长公共子序列Lcs（动态规划）

    给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为:   abcicba abdkscab   ab是两个串的子序列,abc也是,abca也是,其中abca是这两个 ...

  4. SVN previous operation has not finished

    svn提交遇到恶心的问题,可能是因为上次cleanup中断后,进入死循环了. 错误如下: 解决方法:清空svn的队列 1.下载sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc.d ...

  5. UVaLive 3357 Pinary (Fib数列+递归)

    题意:求第 k 个不含前导 0 和连续 1 的二进制串. 析:1,10,100,101,1000,...很容易发现长度为 i 的二进制串的个数正好就是Fib数列的第 i 个数,因为第 i 个也有子问题 ...

  6. 乌龙之MySQL slave IO status：connecting

    搭建了一个主从,状态一直如下: 检查错误日志报错如下: review搭建过程,语法并没有问题. 检查用户及网络,也没有问题: so?what is the cause ? 等等....貌似上面搭建用的 ...

  7. 好文推荐系列--------(2)GruntJS——重复乏味的工作总会有人做（反正我不做）

    GruntJS 是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作.你可以把它看成是JavaScript下的Make或者Ant.它可以完成诸如精简.编译.单元测试.lin ...

  8. winform 可拖动无边框窗体解决办法

    方法一:通过重载消息处理实现. 鼠标的拖动只对窗体本身有效,不能在窗体上的控件区域点击拖动 /// <summary> /// 通过重载消息处理实现.重写窗口过程(WndProc),处理一 ...

  9. 鼠标经过，显示悬浮DIV

    属牛人的本命佛是虚空藏菩萨.属牛人可佩戴属牛黄玉本命佛来提升财运,黄玉的金黄色代表蒸蒸日上,而“金黄”也就是“黄金”的到(倒)来,象征着富贵与财气,佩戴可以招财招富贵,同时黄玉亦是希望之石,可带来智慧 ...

  10. day37(类加载器)

    类的加载器:将class文件加载到JVM中执行这个文件. Java中将类加载器分成三类: 引导类加载器:     JAVA_HOME/jre/lib/rt.jar | 扩展类加载器:     JAVA ...