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