Wpf-自定义控件波纹Button

一介学徒

已于 2024-03-20 17:13:25 修改

阅读量681

点赞数 8

分类专栏： WPF-控件篇文章标签： ui wpf c# 开发语言

于 2024-03-20 17:07:45 首次发布

本文链接：https://blog.csdn.net/rwo_bear/article/details/136882567

版权

WPF-控件篇专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在WPF中创建一个继承自Button的自定义控件SuperButton，通过XAML和C#后端代码实现了鼠标悬停时的动态效果，包括阴影和图形动画。

摘要由CSDN通过智能技术生成

使用用户控件，继承Button

前端代码

<Button x:Class="WpfApp1.SuperButton"
        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:WpfApp1"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        d:DesignHeight="450" d:DesignWidth="800"
        mc:Ignorable="d">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="5">
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Effect">
                                    <Setter.Value>
                                        <DropShadowEffect Direction="-90" Opacity="0.5"
                                                          ShadowDepth="1" Color="Gray" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter Property="Effect">
                                    <Setter.Value>
                                        <DropShadowEffect Direction="0" Opacity="0"
                                                          ShadowDepth="0" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Grid Background="{TemplateBinding Background}"
                      ClipToBounds="True"
                      MouseLeftButtonDown="Grid_MouseLeftButtonDown">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Content="{TemplateBinding Content}" />
                    <Path x:Name="MyPath" Fill="Black">
                        <Path.Data>
                            <EllipseGeometry x:Name="MyEll" RadiusY="{Binding RelativeSource={RelativeSource Mode=Self}, Path=RadiusX}" />
                        </Path.Data>
                    </Path>
                </Grid>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

后端代码

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

        private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            var circle = Template.FindName("MyEll", this) as EllipseGeometry;
            circle.Center = Mouse.GetPosition(this);
            var path = Template.FindName("MyPath", this) as Path;
            DoubleAnimation animation1 = new DoubleAnimation()
            {
                From = 0,
                To = 150,
                Duration = new Duration(TimeSpan.FromSeconds(0.3)),
            };
            circle.BeginAnimation(EllipseGeometry.RadiusXProperty, animation1);
            DoubleAnimation animation2 = new DoubleAnimation()
            {
                From = 0.3,
                To = 0,
                Duration = new Duration(TimeSpan.FromSeconds(0.3)),
            };
            path.BeginAnimation(Path.OpacityProperty, animation2);

        }
    }