wpf 自定义圆形按钮
效果图
默认样式
获取焦点样式
点击样式
下面是实现代码:
一个是自定义控件类,一个是控件类皮肤
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Linq; 5 using System.Text; 6 using System.Windows; 7 using System.Windows.Controls; 8 using System.Windows.Data; 9 using System.Windows.Documents; 10 using System.Windows.Input; 11 using System.Windows.Media; 12 using System.Windows.Media.Imaging; 13 using System.Windows.Navigation; 14 using System.Windows.Shapes; 15 16 namespace MF.WPF.CustomControls.RoundButton 17 { 18 /// <summary> 19 /// 按照步骤 1a 或 1b 操作,然后执行步骤 2 以在 XAML 文件中使用此自定义控件。 20 /// 21 /// 步骤 1a) 在当前项目中存在的 XAML 文件中使用该自定义控件。 22 /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根 23 /// 元素中: 24 /// 25 /// xmlns:MyNamespace="clr-namespace:MF.WPF.CustomControls.RoundButton" 26 /// 27 /// 28 /// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。 29 /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根 30 /// 元素中: 31 /// 32 /// xmlns:MyNamespace="clr-namespace:MF.WPF.CustomControls.RoundButton;assembly=MF.WPF.CustomControls.RoundButton" 33 /// 34 /// 您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用, 35 /// 并重新生成以避免编译错误: 36 /// 37 /// 在解决方案资源管理器中右击目标项目,然后依次单击 38 /// “添加引用”->“项目”->[浏览查找并选择此项目] 39 /// 40 /// 41 /// 步骤 2) 42 /// 继续操作并在 XAML 文件中使用控件。 43 /// 44 /// <MyNamespace:RoundButton/> 45 /// 46 /// </summary> 47 /// 48 public class RoundButton : Button 49 { 50 51 public static readonly DependencyProperty EllipseDiameterProperty = DependencyProperty.Register("EllipseDiameter", typeof(double), typeof(RoundButton), new PropertyMetadata(22D)); 52 53 public static readonly DependencyProperty EllipseStrokeThicknessProperty = DependencyProperty.Register("EllipseStrokeThickness", typeof(double), typeof(RoundButton), new PropertyMetadata(1D)); 54 55 public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register("IconData", typeof(Geometry), typeof(RoundButton)); 56 57 public static readonly DependencyProperty IconSizeProperty = DependencyProperty.Register("IconSize", typeof(double), typeof(RoundButton), new PropertyMetadata(12D)); 58 59 static RoundButton() 60 { 61 DefaultStyleKeyProperty.OverrideMetadata(typeof(RoundButton), new FrameworkPropertyMetadata(typeof(RoundButton))); 62 } 63 64 /// <summary> 65 /// 获取或设置椭圆直径。 66 /// </summary> 67 [Description("获取或设置椭圆直径")] 68 [Category("Common Properties")] 69 public double EllipseDiameter 70 { 71 get { return (double)GetValue(EllipseDiameterProperty); } 72 set { SetValue(EllipseDiameterProperty, value); } 73 } 74 75 /// <summary> 76 /// 获取或设置椭圆笔触粗细。 77 /// </summary> 78 [Description("获取或设置椭圆笔触粗细")] 79 [Category("Common Properties")] 80 public double EllipseStrokeThickness 81 { 82 get { return (double)GetValue(EllipseStrokeThicknessProperty); } 83 set { SetValue(EllipseStrokeThicknessProperty, value); } 84 } 85 86 /// <summary> 87 /// 获取或设置图标路径数据。 88 /// </summary> 89 [Description("获取或设置图标路径数据")] 90 [Category("Common Properties")] 91 public Geometry IconData 92 { 93 get { return (Geometry)GetValue(IconDataProperty); } 94 set { SetValue(IconDataProperty, value); } 95 } 96 97 /// <summary> 98 ///获取或设置icon图标的高和宽。 99 /// </summary> 100 [Description("获取或设置icon图标的高和宽")] 101 [Category("Common Properties")] 102 public double IconSize 103 { 104 get { return (double)GetValue(IconSizeProperty); } 105 set { SetValue(IconSizeProperty, value); } 106 } 107 108 } 109 }
1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 3 xmlns:local="clr-namespace:MF.WPF.CustomControls.RoundButton" 4 > 5 6 <SolidColorBrush x:Key="Accent" Color="#0072C6" /> 7 <SolidColorBrush x:Key="ModernButtonBorder" Color="#919191" /> 8 <SolidColorBrush x:Key="ModernButtonTextHover" Color="#d1d1d1" /> 9 <SolidColorBrush x:Key="ModernButtonTextPressed" Color="White" /> 10 <SolidColorBrush x:Key="ModernButtonBorderPressed" Color="White" /> 11 <SolidColorBrush x:Key="ModernButtonIconForegroundPressed" Color="White" /> 12 <Style TargetType="{x:Type local:RoundButton}"> 13 <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 14 <Setter Property="HorizontalContentAlignment" Value="Center" /> 15 <Setter Property="VerticalContentAlignment" Value="Center" /> 16 <Setter Property="Foreground" Value="Black" /> 17 <Setter Property="Padding" Value="1" /> 18 <Setter Property="Template"> 19 <Setter.Value> 20 <ControlTemplate TargetType="{x:Type local:RoundButton}"> 21 <Grid Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" > 22 <Ellipse x:Name="ellipse" 23 Stroke="{DynamicResource ModernButtonBorder}" 24 StrokeThickness="{TemplateBinding EllipseStrokeThickness}" 25 VerticalAlignment="Stretch" /> 26 <Path x:Name="icon" 27 Data="{TemplateBinding IconData}" 28 Width="{TemplateBinding IconSize}" 29 Height="{TemplateBinding IconSize}" 30 Fill="{TemplateBinding Foreground}" 31 Stretch="Uniform" HorizontalAlignment="Center" 32 VerticalAlignment="Center"/> 33 </Grid> 34 <ControlTemplate.Triggers> 35 <Trigger Property="IsMouseOver" Value="True"> 36 <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource Accent}" /> 37 </Trigger> 38 <Trigger Property="IsPressed" Value="True"> 39 <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextPressed}" /> 40 <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonBorderPressed}" /> 41 <Setter TargetName="ellipse" Property="Fill" Value="{DynamicResource Accent}" /> 42 <Setter TargetName="icon" Property="Fill" Value="{DynamicResource ModernButtonIconForegroundPressed}" /> 43 </Trigger> 44 <Trigger Property="IsEnabled" Value="false"> 45 <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextHover}" /> 46 <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonTextHover}" /> 47 <Setter TargetName="icon" Property="Fill" Value="{DynamicResource ModernButtonBorder}" /> 48 </Trigger> 49 <Trigger Property="IsFocused" Value="true"> 50 <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource Accent}" /> 51 </Trigger> 52 </ControlTemplate.Triggers> 53 </ControlTemplate> 54 </Setter.Value> 55 </Setter> 56 </Style> 57 </ResourceDictionary> 58 59 自定义button添加样式
使用此库是,记得在自己项目中添加样式文件 地址:/MF.WPF.CustomControls.RoundButton;component/Themes/Generic.xaml
完整引用
1 <Application x:Class="MF.WPF.CustomControls.RoundButton.Test.App" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:local="clr-namespace:MF.WPF.CustomControls.RoundButton.Test" 5 StartupUri="MainWindow.xaml"> 6 <Application.Resources> 7 <ResourceDictionary> 8 <ResourceDictionary.MergedDictionaries> 9 <ResourceDictionary Source="/MF.WPF.CustomControls.RoundButton;component/Themes/Generic.xaml"/> 10 </ResourceDictionary.MergedDictionaries> 11 </ResourceDictionary> 12 </Application.Resources> 13 </Application>
关于失量图标可参考此网站
http://modernuiicons.com/
直接动态库下载
下载源代和测试用例
End