wpf 自定义圆形按钮

wpf 自定义圆形按钮

效果图

默认样式

获取焦点样式

点击样式

下面是实现代码：

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

 using System;
 using System.Collections.Generic;
 using System.ComponentModel;
 using System.Linq;
 using System.Text;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;

 namespace MF.WPF.CustomControls.RoundButton
 {
     /// <summary>
     /// 按照步骤 1a 或 1b 操作，然后执行步骤 2 以在 XAML 文件中使用此自定义控件。
     ///
     /// 步骤 1a) 在当前项目中存在的 XAML 文件中使用该自定义控件。
     /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
     /// 元素中:
     ///
     ///     xmlns:MyNamespace="clr-namespace:MF.WPF.CustomControls.RoundButton"
     ///
     ///
     /// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。
     /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
     /// 元素中:
     ///
     ///     xmlns:MyNamespace="clr-namespace:MF.WPF.CustomControls.RoundButton;assembly=MF.WPF.CustomControls.RoundButton"
     ///
     /// 您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用，
     /// 并重新生成以避免编译错误:
     ///
     ///     在解决方案资源管理器中右击目标项目，然后依次单击
     ///     “添加引用”->“项目”->[浏览查找并选择此项目]
     ///
     ///
     /// 步骤 2)
     /// 继续操作并在 XAML 文件中使用控件。
     ///
     ///     <MyNamespace:RoundButton/>
     ///
     /// </summary>
     ///
     public class RoundButton : Button
     {

         public static readonly DependencyProperty EllipseDiameterProperty = DependencyProperty.Register("EllipseDiameter", typeof(double), typeof(RoundButton), new PropertyMetadata(22D));

         public static readonly DependencyProperty EllipseStrokeThicknessProperty = DependencyProperty.Register("EllipseStrokeThickness", typeof(double), typeof(RoundButton), new PropertyMetadata(1D));

         public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register("IconData", typeof(Geometry), typeof(RoundButton));

         public static readonly DependencyProperty IconSizeProperty = DependencyProperty.Register("IconSize", typeof(double), typeof(RoundButton), new PropertyMetadata(12D));

         static RoundButton()
         {
             DefaultStyleKeyProperty.OverrideMetadata(typeof(RoundButton), new FrameworkPropertyMetadata(typeof(RoundButton)));
         }

         /// <summary>
         /// 获取或设置椭圆直径。
         /// </summary>
         [Description("获取或设置椭圆直径")]
         [Category("Common Properties")]
         public double EllipseDiameter
         {
             get { return (double)GetValue(EllipseDiameterProperty); }
             set { SetValue(EllipseDiameterProperty, value); }
         }

         /// <summary>
         /// 获取或设置椭圆笔触粗细。
         /// </summary>
         [Description("获取或设置椭圆笔触粗细")]
         [Category("Common Properties")]
         public double EllipseStrokeThickness
         {
             get { return (double)GetValue(EllipseStrokeThicknessProperty); }
             set { SetValue(EllipseStrokeThicknessProperty, value); }
         }

         /// <summary>
         /// 获取或设置图标路径数据。
         /// </summary>
         [Description("获取或设置图标路径数据")]
         [Category("Common Properties")]
         public Geometry IconData
         {
             get { return (Geometry)GetValue(IconDataProperty); }
             set { SetValue(IconDataProperty, value); }
         }

         /// <summary>
         ///获取或设置icon图标的高和宽。
         /// </summary>
         [Description("获取或设置icon图标的高和宽")]
         [Category("Common Properties")]
         public double IconSize
         {
             get { return (double)GetValue(IconSizeProperty); }
             set { SetValue(IconSizeProperty, value); }
         }

     }
 }

自定义类，继承button

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="clr-namespace:MF.WPF.CustomControls.RoundButton"
                     >

     <SolidColorBrush x:Key="Accent" Color="#0072C6" />
     <SolidColorBrush x:Key="ModernButtonBorder" Color="#919191" />
     <SolidColorBrush x:Key="ModernButtonTextHover" Color="#d1d1d1" />
     <SolidColorBrush x:Key="ModernButtonTextPressed" Color="White" />
     <SolidColorBrush x:Key="ModernButtonBorderPressed" Color="White" />
     <SolidColorBrush x:Key="ModernButtonIconForegroundPressed" Color="White" />
     <Style TargetType="{x:Type local:RoundButton}">
         <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Foreground" Value="Black" />
         <Setter Property="Padding" Value="1" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type local:RoundButton}">
                     <Grid Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" >
                         <Ellipse x:Name="ellipse"
                                      Stroke="{DynamicResource ModernButtonBorder}"
                                      StrokeThickness="{TemplateBinding EllipseStrokeThickness}"
                                      VerticalAlignment="Stretch" />
                         <Path x:Name="icon"
                                   Data="{TemplateBinding IconData}"
                                   Width="{TemplateBinding IconSize}"
                                   Height="{TemplateBinding IconSize}"
                                   Fill="{TemplateBinding Foreground}"
                                   Stretch="Uniform" HorizontalAlignment="Center"
                                   VerticalAlignment="Center"/>
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource Accent}" />
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
                             <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextPressed}" />
                             <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonBorderPressed}" />
                             <Setter TargetName="ellipse" Property="Fill" Value="{DynamicResource Accent}" />
                             <Setter TargetName="icon" Property="Fill" Value="{DynamicResource ModernButtonIconForegroundPressed}" />
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="false">
                             <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextHover}" />
                             <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonTextHover}" />
                             <Setter TargetName="icon" Property="Fill" Value="{DynamicResource ModernButtonBorder}" />
                         </Trigger>
                         <Trigger Property="IsFocused" Value="true">
                             <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource Accent}" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </ResourceDictionary>

 自定义button添加样式

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

完整引用

 <Application x:Class="MF.WPF.CustomControls.RoundButton.Test.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="clr-namespace:MF.WPF.CustomControls.RoundButton.Test"
              StartupUri="MainWindow.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="/MF.WPF.CustomControls.RoundButton;component/Themes/Generic.xaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>
 </Application>

关于失量图标可参考此网站
http://modernuiicons.com/

直接动态库下载

下载源代和测试用例

End