AI 助理
备案控制台
开发者社区 云计算 文章 正文

UWP Button添加圆角阴影（一）

2018-10-11 1137
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:UWP Button添加圆角阴影（一）原文：UWP Button添加圆角阴影（一） 众所周知，17763之前的UWP控件，大部分是没有圆角属性的；而阴影也只有17763中的ThemeShadow可以直接在xaml中使用，之前的版本只能用DropShadow，用法极其别扭。
原文: UWP Button添加圆角阴影（一）

原文：UWP Button添加圆角阴影（一）
众所周知，17763之前的UWP控件，大部分是没有圆角属性的；而阴影也只有17763中的ThemeShadow可以直接在xaml中使用，之前的版本只能用DropShadow，用法极其别扭。
本文就给出一个虽然很别扭，但是效果还不错的，比较通用的圆角+阴影的方案。

概念

我们先思考一下，用户感知到的圆角按钮，到底是个什么东西。
任何一个按钮，不外乎Background和Content两部分，用户可以从Content中获取到按钮的信息，而按钮的形状，在没有Border的情况下，用户对Button形状最直观的感受就是Background！
也就是说，我们只要让一个按钮的Background是一个圆角矩形，他在大多数情况下，就是一个圆角按钮！
按照这个思路，我们可以在17763之前的UWP，也就是大多数控件都没有CornerRadius这个属性的环境里，造出许多圆角的控件。

圆角

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

<Style TargetType="Button">
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
    <Setter Property="Padding" Value="8,4,8,4" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="FocusVisualMargin" Value="-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Content="{TemplateBinding Content}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Padding="{TemplateBinding Padding}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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

<Style TargetType="Button" x:Key="CornerRadiusShadowButtonStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver"/>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</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结构应该是这个模样的：

<Style TargetType="Button" x:Key="CornerRadiusShadowButtonStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver"/>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="Background" />
                    <ContentPresenter x:Name="ContentPresenter"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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

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

<Style TargetType="Button" x:Key="CornerRadiusShadowButtonStyle">
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Padding" Value="20,10,20,10" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="FocusVisualMargin" Value="-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RadiusX="5" RadiusY="5" />
                    <ContentPresenter x:Name="ContentPresenter"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Content="{TemplateBinding Content}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Padding="{TemplateBinding Padding}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
杰克.陈
目录
相关文章
abcd552191868
|
6月前
QT中 QPlainTextEdit自适应高度的问题（防止出现滚动条）
在QT开发过程中，经常使用到QPlainTextEdit来填入大量的文字，一般我们都会设置QPlainText的固定高度或者默认高度，但是随着文字的增多，就会自动出现滚动条，有时候我们可能需要QPlainText的高度随着自动适应文字的高度（即是说不需要出现滚动条）
abcd552191868
460 0
代码迷途
|
Windows
Winform控件优化之背景透明那些事1：Button控件等背景透明
WinForm不支持真正的透明，其控件透明的实现都是背景颜色设置和对应位置的父控件背景相同。 Winform中控件的背景透明只有三种：Button控件的透明、其他控件的透明...
代码迷途
2917 0
Winform控件优化之背景透明那些事1：Button控件等背景透明
熊猫队长-
|
C#
WPF空心圆角combox
WPF空心圆角combox
熊猫队长-
174 0
初商
|
前端开发
[译] 用 Flutter 打造一个圆形滑块（Slider）
大多数情况下你并不会需要它。但想象一下：如果你想要用户选定一个时间段，或者只是想要一个比直线形状更有趣一点的常规滑块的场景时，就可以使用圆形滑块。
初商
2540 0
杰克.陈
uwp - 获取当前屏幕宽高/应用宽高
原文:uwp - 获取当前屏幕宽高/应用宽高 　　 public static Size GetScreen() { var applicationView = ApplicationView.
杰克.陈
1097 0
杰克.陈
|
前端开发 数据可视化
UWP Button添加圆角阴影（三）
原文:UWP Button添加圆角阴影（三） 原文：UWP Button添加圆角阴影（三） Composition DropShadow是CompositionAPI中的东西，使用Storyboard设置某个属性，就是频繁的触发put_xxx()方法，效率远远不如使用CompositionAnimation。
杰克.陈
894 0
杰克.陈
UWP Button添加圆角阴影（二）
原文:UWP Button添加圆角阴影（二） 原文：UWP Button添加圆角阴影（二） 阴影 对于阴影呢，WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦，只要引用Microsoft.Toolkit.Uwp.UI.Controls这个Nuget包就可以使用啦。
杰克.陈
916 0
杰克.陈
|
C#
WPF 圆角输入框
原文:WPF 圆角输入框 今天打算来做一个圆角的输入框 默认输入框：   这个输入框不好看，并且在XP 跟 WIN 7  WIN10 效果 都不太一样   我们今天不用模板的方式，而是 最简单的方式 来实现 圆角 输入框；     ------------------------...
杰克.陈
1374 0
maskmale
|
图形学
控件渐变色的实现
控件渐变色的实现（一）—— CAGradientLayer实现控件渐变色的实现（二）—— Core Graphics实现
maskmale
785 0
jerry_coder
关于圆角控件
如何新建shape文件：https://jingyan.baidu.com/article/b907e62795139746e7891cb9.html 如何在空间中加入shape.
jerry_coder
755 0