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); }
        }
        
    }
}

<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