WPF 自定义控件之 Button

XAML:

<Button
    x:Class="MyMediaPlayer.UserControls.RoundedImageButton"
    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:MyMediaPlayer.UserControls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="450"
    d:DesignWidth="800"
    Background="LightGray"
    mc:Ignorable="d">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type local:RoundedImageButton}">
            <Border
                x:Name="ButtonContainer"
                Background="{TemplateBinding Background}"
                ClipToBounds="True"
                CornerRadius="{TemplateBinding CornerRadius}"
                ToolTip="{TemplateBinding ToolTip}">
                <Grid>
                    <Border Padding="{TemplateBinding Padding}">
                        <Image
                            x:Name="ButtonImage"
                            Source="{TemplateBinding Image}"
                            Stretch="Uniform" />
                    </Border>
                    <Label
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        Content="{TemplateBinding Content}"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"
                        FontWeight="{TemplateBinding FontWeight}"
                        Foreground="{TemplateBinding Foreground}" />
                </Grid>
            </Border>
            <!-- TemplateBinding 仅适用于 ControlTemplate 的视觉树,此处须用 RelativeSource。如果有更外层的控件还可用类似语法 {Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=FontSize} -->
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ButtonContainer" Property="Background" Value="{Binding MouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}" />
                    <Setter TargetName="ButtonImage" Property="Source" Value="{Binding MouseOverImage, RelativeSource={RelativeSource TemplatedParent}}" />
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="ButtonContainer" Property="Background" Value="{Binding PressedBackground, RelativeSource={RelativeSource TemplatedParent}}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>
    

CS:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace MyMediaPlayer.UserControls
{
    /// <summary>
    /// RoundedImageButton.xaml 的交互逻辑
    /// </summary>
    public partial class RoundedImageButton : Button
    {
        public RoundedImageButton()
        {
            InitializeComponent();
        }

        // 声明一个依赖属性  
        public static readonly DependencyProperty ImageProperty =
            DependencyProperty.Register("Image", typeof(ImageSource), typeof(RoundedImageButton));

        // 定义属性包装器
        public ImageSource Image
        {
            get { return GetValue(ImageProperty) as ImageSource; }
            set { SetValue(ImageProperty, value); }
        }

        // 声明一个依赖属性  
        public static readonly DependencyProperty MouseOverImageProperty =
            DependencyProperty.Register("MouseOverImage", typeof(ImageSource), typeof(RoundedImageButton));

        // 定义属性包装器
        public ImageSource MouseOverImage
        {
            get { return GetValue(MouseOverImageProperty) as ImageSource; }
            set { SetValue(MouseOverImageProperty, value); }
        }

        // 声明一个依赖属性  
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(RoundedImageButton)
                ,new PropertyMetadata(new CornerRadius(5)));

        // 定义属性包装器
        public CornerRadius CornerRadius
        {
            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }

        // 声明一个依赖属性  
        public static readonly DependencyProperty MouseOverBackgroundProperty =
            DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(RoundedImageButton)
                ,new PropertyMetadata(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#E4E4E4"))));

        // 定义属性包装器
        public Brush MouseOverBackground
        {
            get { return GetValue(MouseOverBackgroundProperty) as Brush; }
            set { SetValue(MouseOverBackgroundProperty, value); }
        }

        // 声明一个依赖属性  
        public static readonly DependencyProperty PressedBackgroundProperty =
            DependencyProperty.Register("PressedBackground", typeof(Brush), typeof(RoundedImageButton)
                ,new PropertyMetadata(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#D6D6D6"))));

        // 定义属性包装器
        public Brush PressedBackground
        {
            get { return GetValue(PressedBackgroundProperty) as Brush; }
            set { SetValue(PressedBackgroundProperty, value); }
        }
    }
}

代码简单,但细节很多,备忘一下

posted on 2025-03-27 11:43  空明流光  阅读(29)  评论(0)    收藏  举报

导航