Wpf-自定义控件波纹Button

使用用户控件,继承Button

前端代码

XML 复制代码
<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>

后端代码

cs 复制代码
    /// <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);

        }
    }
相关推荐
张鱼小丸子_微辣6 分钟前
.Net Framework 4/C# LINQ*
c#
lexiangqicheng8 分钟前
JS-- for...in和for...of
开发语言·前端·javascript
我是老孙27 分钟前
windows10 php报错
开发语言·php
y1021210430 分钟前
Python训练营打卡Day42
开发语言·javascript·ecmascript
2301_8050545641 分钟前
Python训练营打卡Day46(2025.6.6)
开发语言·python
曹勖之1 小时前
撰写脚本,通过发布/joint_states话题改变机器人在Rviz中的关节角度
开发语言·python·机器人·ros2
不惑_1 小时前
用 PyQt5 打造一个可视化 JSON 数据解析工具
开发语言·qt·json
梓仁沐白1 小时前
【Kotlin】注解&反射&扩展
开发语言·python·kotlin
@老蝴1 小时前
C语言 — 编译和链接
c语言·开发语言
本郡主是喵2 小时前
并发编程 - go版
java·服务器·开发语言