1.创建自定义按钮类 (CustomButton.cs)
csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace WPF_LoginUI
{
// 自定义按钮类
public class CustomButton : Button
{
// propdp
// 依赖属性 CustomButtomStyles.xaml 绑定相关 ButtonCornerRadius 属性 ==> MainWindow.xaml 使用
// 自定义属性 圆角半径
public CornerRadius ButtonCornerRadius
{
get { return (CornerRadius)GetValue(ButtonCornerRadiusProperty); }
set { SetValue(ButtonCornerRadiusProperty, value); }
}
public static readonly DependencyProperty ButtonCornerRadiusProperty =
DependencyProperty.Register("ButtonCornerRadius", typeof(CornerRadius), typeof(CustomButton));
// 自定义属性 鼠标掠过颜色
public Brush BackgroundHover
{
get { return (Brush)GetValue(BackgroundHoverProperty); }
set { SetValue(BackgroundHoverProperty, value); }
}
public static readonly DependencyProperty BackgroundHoverProperty =
DependencyProperty.Register("BackgroundHoverProperty", typeof(Brush), typeof(CustomButton));
// 自定义属性 鼠标按下颜色
public Brush BackgroundPressed
{
get { return (Brush)GetValue(BackgroundPressedProperty); }
set { SetValue(BackgroundPressedProperty, value); }
}
public static readonly DependencyProperty BackgroundPressedProperty =
DependencyProperty.Register("BackgroundPressed", typeof(Brush), typeof(CustomButton));
}
}
2.创建自定义按钮 样式xaml文件(CustomButtomStyles.xaml)
xml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:bb="clr-namespace:WPF_LoginUI">
<!--使用关联的类 -->
<Style TargetType="{x:Type bb:CustomButton}">
<Setter Property="Template">
<Setter.Value>
<!--关联自定义类-->
<ControlTemplate TargetType="{x:Type bb:CustomButton}">
<!-- 外框相关属性 Background 绑定既有属性 CornerRadius 绑定自定义属性-->
<Border x:Name="buttonBorder"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding ButtonCornerRadius}">
<!-- 中间文本框 绑定按钮自带属性 -->
<TextBlock Text="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<!--触发器-->
<ControlTemplate.Triggers>
<!-- 触发器 鼠标掠过-->
<Trigger Property="IsMouseOver" Value="True">
<!-- 发生触发 修改Border的背景属性 -->
<Setter TargetName="buttonBorder" Property="Background"
Value="{Binding BackgroundHover, RelativeSource={RelativeSource TemplatedParent}}"></Setter>
</Trigger>
<!-- 触发器 鼠标按下-->
<Trigger Property="IsPressed" Value="True">
<!-- 发生触发 修改Border的背景属性 -->
<Setter TargetName="buttonBorder" Property="Background"
Value="{Binding BackgroundPressed, RelativeSource={RelativeSource TemplatedParent}}"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
3.项目添加样式文件
xml
<Application x:Class="WPF_LoginUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPF_LoginUI"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<!--添加自定义按钮样式 字典文件-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CustomButtomStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
4.使用自定义按钮
xml
<!-- 第四行 登录按钮 -->
<local:CustomButton x:Name="BtnLogin" Background="#3C7FF8" Grid.Row="3" Grid.Column="0"
Foreground="Wheat"
BackgroundHover="red"
BackgroundPressed="Green"
FontSize="20"
ButtonCornerRadius="5"
Content="登录" Grid.ColumnSpan="2"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Command="{Binding LoginAction}"/>