wpf 自定义圆形按钮

wpf 自定义圆形按钮

效果图

默认样式

获取焦点样式

点击样式

下面是实现代码：

一个是自定义控件类，一个是控件类皮肤

 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   /// 将此  23   /// 元素中:  24   /// 25   ///    26   /// 27   /// 28   /// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。 29   /// 将此  30   /// 元素中:  31   /// 32   ///    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 IconSize103     {104       get { return (double)GetValue(IconSizeProperty); }105       set { SetValue(IconSizeProperty, value); }106     }107     108   }109 }

 1 <ResourceDictionary ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 2           ="http://schemas.microsoft.com/winfx/2006/xaml" 3           ="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}" Background="Transparent">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>

使用此库是，记得在自己项目中添加样式文件 地址：/MF.WPF.CustomControls.RoundButton;component/Themes/Generic.xaml

完整引用

 1 <Application x:Class="MF.WPF.CustomControls.RoundButton.Test.App" 2        ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3        ="http://schemas.microsoft.com/winfx/2006/xaml" 4        ="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

原标题：wpf 自定义圆形按钮

关键词：wpf