WPF 自定义按钮类实现

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}"/>
相关推荐
三千道应用题9 小时前
WPF&C#超市管理系统(6)订单详情、顾客注册、商品销售排行查询和库存提示、LiveChat报表
开发语言·c#·wpf
✎ ﹏梦醒͜ღ҉繁华落℘1 天前
开发WPF项目时遇到的问题总结
wpf
hqwest2 天前
C#WPF实战出真汁06--【系统设置】--餐桌类型设置
c#·.net·wpf·布局·分页·命令·viewmodel
Vae_Mars2 天前
WPF中使用InputBindings进行快捷键绑定
wpf
hqwest2 天前
C#WPF实战出真汁05--左侧导航
开发语言·c#·wpf·主界面·窗体设计·视图viewmodel
hqwest3 天前
C#WPF实战出真汁01--项目介绍
开发语言·c#·wpf
wuty0073 天前
WPF 实现支持动态调整高度的文本显示控件
wpf·scrollviewer·extentheight·自动高度控件·动态调整高度
范纹杉想快点毕业6 天前
C 语言主控开发与显控开发能力体系及技术栈详解,STM32、QT、嵌入式、边缘系统显示
stm32·单片机·tcp/ip·microsoft·fpga开发·51单片机·wpf
weixin_447103586 天前
WPF之绑定!
c#·wpf
DataIntel6 天前
wpf问题记录
wpf