【WPF】自定义按钮样式（添加依赖属性、圆角）

参考

https://www.bilibili.com/video/BV13D4y1u7XX/?p=21

代码示例

1、自定义CustomButton按钮继承Button

namespace WpfStudy.Buttons
{
    public class CustomButton : Button
    {
        public CornerRadius CornerRadius
        {
            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }

        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(CustomButton));

        public Brush BackgroundOfMouseHover
        {
            get { return (Brush)GetValue(BackgroundOfMouseHoverProperty); }
            set { SetValue(BackgroundOfMouseHoverProperty, value); }
        }
        public static readonly DependencyProperty BackgroundOfMouseHoverProperty =
            DependencyProperty.Register("BackgroundOfMouseHover", typeof(Brush), typeof(CustomButton));

    }
}

2、创建资源字典

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:btns="clr-namespace:WpfStudy.Buttons"
                    >
    <Style TargetType="{x:Type btns:CustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type btns:CustomButton}">
                    <Border x:Name="border" Background="{TemplateBinding Background}" 
                        CornerRadius="{TemplateBinding CornerRadius}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        >
                        <TextBlock Text="{TemplateBinding Content}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                TextAlignment="Center"
                                x:Name="textBlock"
                                />
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="{Binding BackgroundOfMouseHover,RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="textBlock" Property="Foreground" Value="Black"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="border" Property="Background" Value="Red"/>
                            <Setter TargetName="textBlock" Property="Foreground" Value="#fff"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

3、App.xaml中在全局引入资源字典

<Application x:Class="WpfStudy.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfStudy"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Style/CustomButtonStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

4、使用自定义按钮

<Window x:Class="WpfStudy.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfStudy"
        xmlns:btns="clr-namespace:WpfStudy.Buttons"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow" d:DesignHeight="119.5" d:DesignWidth="248.5">
    <Grid>
        <btns:CustomButton Content="打开"
                           Background="Green"
                           Foreground="#fff"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           VerticalContentAlignment="Center"
                           HorizontalContentAlignment="Center"
                           Width="100"
                           Height="60"
                           CornerRadius="20"
                           BackgroundOfMouseHover="LightBlue"
                           />
    </Grid>

</Window>

思考

复杂、需要注意的地方：

1. 依赖属性的命名格式、参数格式，可以使用propdp快捷键。

2. 理解资源字典中的标签

• 哪个标签嵌套哪个标签，分别是在哪一层使用哪个标签。
• 绑定Button已有依赖属性时使用TemplateBinding，TemplateBinding的含义和用法。
• 绑定CustomButton自定义依赖属性时使用Binding，注意Binding后面的格式，例如：

<Setter TargetName="border" Property="Background" 
Value="{Binding BackgroundOfMouseHover,RelativeSource={RelativeSource TemplatedParent}}"/>

• 当触发器的Setter中不明确指定哪个组件的属性时，先为组件增加一个x:Name，再用TargetName指定组件的名字。

3. 对齐属性的含义
   注意区分：

• HorizontalAlignment
• VerticalAlignment
• HorizontalContentAlignment
• VerticalContentAlignment

感觉是这样的：

• HorizontalAlignment、VerticalAlignment用于描述组件自身位于上层组件的对齐情况。
  想象有一个外壳（Border标签），描述该外壳相对上层的位置。
  对于ControlTemplate也就只有一个Content，里面正好放一个大的外壳，用于描述该CustomButton。
• HorizontalContentAlignment、VerticalContentAlignment用于描述组件内部的对齐情况。
  外壳内部内容相对于外壳的位置。