UWP Button添加圆角阴影（一）

已于 2024-04-12 19:36:06 修改
阅读量114 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： windows .net
于 2019-11-07 21:52:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26328961/article/details/102963712
在17763之前的UWP环境中，通过修改Button的Style，使用Rectangle作为背景实现圆角效果，同时保持按钮状态变化时的颜色切换。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

众所周知，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里，不然是不会生效的。 
format,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>

 

【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
WPF 从0开始写笔记，全属性功能深度剖析 持续更新... 20231225
一个编程的同学
05-10 1617
用途不同：DataTemplate主要用于定义数据绑定的模板，它将一个数据对象的属性绑定到UI元素上，并根据该数据对象的不同值来显示不同的UI元素。需要注意的是，Margin属性只会影响UI元素与其周围控件之间的空间，而不会影响UI元素本身的大小或位置。需要注意的是，CornerRadius属性只会影响UI元素的圆角效果，而不会影响UI元素本身的大小或位置。需要注意的是，direction属性只会影响元素周围的模糊效果的方向，并不会改变元素本身的颜色或其他视觉效果。
【开源】XPShadow， 用阴影让UWP更有层次感
布鲁克石
03-06 844
UWP采用的是纯扁平化的设计，个人感觉极端了点，整个世界都是平的，导致App分不清层次，看不出重点。其实扁平化是趋势，android, ios都在搞，问题是android, ios都可以很轻松的实现阴影来突出重点和分层，android的material design更是火了一通，其中也大量用到阴影（card, float button等）。 做UWP应用的时候就想WinRT用的xaml和WPF差
[UWP]浅谈按钮设计
weixin_30482383的博客
07-10 343
一时兴起想谈谈UWP按钮的设计。 按钮是UI中最重要的元素之一，可能也是用得最多的交互元素。好的按钮设计可以有效提高用户体验，构造让人眼前一亮的UI。而且按钮通常不会影响布局，小小的按钮无论怎么改也不会对性能有多大影响，所以不少注重细节的设计师最为热衷修改按钮。(例如 这位 ) 目前UWP只提供了基础款的按钮样式，网上相关资源也较少，所有写了这篇文章用于介绍在UWP上设计按钮的入门知识。 1. V...
win10 uwp 按下等待按钮
lindexi
01-15 2229
我们经常需要一个按钮，在按下时，后台执行Task，这时不能再次按下按钮。
[UWP]使用GetAlphaMask制作阴影
dino.c
10-30 200
1. 前言 最近常常接触到GetAlphaMask，所以想写这篇文章介绍下GetAlphaMask怎么使用。其实GetAlphaMask的使用场景十分有限，Github上能搜到的内容都是用来配合DropShadow的，所以这篇文章也以介绍DropShadow为主。 2. 合成阴影 先介绍一下合成阴影。Compositor.CreateDropShadow()可以创建一个DropShadow，将这个...
windowsAPI控件样式很老
最新发布
03-25
// 示例：启用Visual Styles（需添加manifest） #pragma comment(linker, "\"/manifestdependency:type='win32' \ name='Microsoft.Windows.Common-Controls' version='6.0.0.0' \ processorArchitecture='*' ...
UWP 应用中的 Button 控件
qq_29340663的博客
03-13 605
UWP 应用中的 Button 控件 前言：无意中翻出的 2017 年自写的一份文稿，十分基础，遣词造句也不乏幼稚之感，属于基础中的基础，经删减编辑发布。（现在谁还开发 UWP 啊） Button控件是构建程序的一个最基本控件，本文件将介绍如何在你的 UWP 应用中插入并使用Button控件。 本文件适用于： Microsoft Visual Studio 2015(包括Update) Microsoft Visual Studio 2017(V15.0,V15.2) 一、 插入Button控件
UWP Button 类控件——Button
weixin_34106122的博客
05-22 270
UWP Button 类控件——Button 　　自从图形界面交互式软件产生那一刻开始，button就成为与用户交互最重要的控件。button的产生来源现实生活中的按钮，可以通过最简单的“点击”方式来触发click事件,从而完成用户与软件的交互。所有基于事件的控件设计思想都源于button触发事件的机制，因此可以说button是交互式软件中的“控件鼻祖”。然而面对再熟悉不过的控件，想要写一...
2018-8-10-win10-UWP-button
lindexi
11-21 384
title author date CreateTime categories win10 UWP button lindexi 2018-08-10 19:16:53 +0800 2018-2-13 17:23:3 +0800 Win10 UWP Button是一个常用控件，有...
win10 uwp 圆角按钮
lindexi
07-29 4994
本文讲的是如何做圆角按钮，我们在UWP本来的按钮都是矩形，圆角Radius没有，所以本文就用简单方法去做圆角按钮。
UWP 阴影效果
L.的博客
03-16 285
引用Microsoft.Toolkit.Uwp.UI.Controls，使用DropShadowPanel <controls:DropShadowPanel Color="Black" OffsetX="10" OffsetY="10" BlurRadius="50" Shado
UWP appButtonBar样式
lindexi
10-21 5802
UWP 的appButtonBar使用<AppBarButton Icon = "Next" Label = "Next" /> Icon是 SymbolIcon 类 这个类可以使用Symbol中的枚举 我做出了每个Symbol的图标和label
2018-2-13-win10-uwp-圆角按钮
lindexi
11-21 397
title author date CreateTime categories win10 uwp 圆角按钮 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23:3 +0800 Win10 UWP 本文讲的是如何做圆角按钮，我们在UWP...
前端学习css案例（2）-button阴影与改变颜色
m0_58777269的博客
03-26 854
在最开始submit-button里面的添加一个参数叫transition，有两个变量，第一个变量的内容就是需要变换的某个参数（本次采用的参数为opactiy），第二个变量的内容就是变换所需要的时间,一般采用0.15s会好一点；第四个是颜色,一般阴影喜欢和原按钮颜色一致，采用rgba（a的含义是opacity），四个参数，第四个参数就是opacity 本次采用了(0,0,0,0.15)此时会遇到一个问题：hover和active都会变换的很突然，没有丝滑，是很突然的改变了颜色。class后面跟着“
[UWP 自定义控件]了解模板化控件(9)：UI指南
weixin_30344995的博客
05-06 231
1. 使用TemplateSettings统一外观 TemplateSettings提供一组只读属性，用于在新建ControlTemplate时使用这些约定的属性。 譬如，修改HeaderedContentControl的ControlTemplate以呈现不同的外观，但各个ControlTemplate之间的HeaderedContentControl中的Margin和FontWeight想要保...
UWP Button添加圆角阴影（二）
weixin_34242658的博客
10-11 172
原文:UWP Button添加圆角阴影（二） 原文：UWP Button添加圆角阴影（二） 阴影 对于阴影呢，WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦，只要引用Microsoft.Toolkit.Uwp.UI.Controls这个Nuget包就可以使用啦。 直接把阴影套在咱们的圆角Button外面呢，会...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值