自定义按钮

1. 基础实例

<UserControl
    x:Class="sypos.自定义按钮"
    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:local="clr-namespace:sypos"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Grid>
        <Button
            Width="300"
            Height="100"
            Background="Aquamarine"
            BorderBrush="Bisque"
            Content="自定义按钮"
            FontSize="50"
            Foreground="White">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border
                        x:Name="border"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="4"
                        CornerRadius="10">
                        <!--  按钮内容继承  -->
                        <!--<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />-->
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Text="{TemplateBinding Content}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="Red" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="border" Property="Background" Value="Green" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</UserControl>

2. 自定义扩展属性

相关信息

如果使用颜色属性，必需引用using System.Windows.Media;，不能引用using System.drawing，可以自定义属性using Brush = System.Windows.Media.Brush;

CustomButton

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;
//using Brush = System.Windows.Media.Brush;

namespace sypos.control
{
    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), new PropertyMetadata(new CornerRadius(0)));
        public Brush BackgroundOfMouseHover
        {
            get { return (Brush)GetValue(BackgroundOfMouseHoverProperty); }
            set { SetValue(BackgroundOfMouseHoverProperty, value); }
        }
        public static readonly DependencyProperty BackgroundOfMouseHoverProperty =
            DependencyProperty.Register("BackgroundOfMouseHover", typeof(Brush), typeof(CustomButton), new PropertyMetadata());




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

    }
}

app.xaml

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

CustomButtonStyle.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:control="clr-namespace:sypos.control">
    <Style TargetType="{x:Type control:CustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type control:CustomButton}">
                    <Border
                        x:Name="border"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        Background="{TemplateBinding Background}"
                        CornerRadius="{TemplateBinding CornerRadius}">

                        <TextBlock
                            x:Name="textBlock"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Text="{TemplateBinding Content}"
                            TextAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="{Binding CustomColor, 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>

使用组件

 <local:CustomButton
     Width="377"
     Height="237"
     HorizontalAlignment="Center"
     VerticalAlignment="Center"
     HorizontalContentAlignment="Center"
     VerticalContentAlignment="Center"
     Background="Green"
     Content="打开"
     CornerRadius="5"
     CustomColor="red"
     Foreground="#fff" />