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);

        }
    }
相关推荐
life_time_2 小时前
C语言(22)
c语言·开发语言
界面开发小八哥2 小时前
界面组件DevExpress WPF中文教程:Grid - 如何显示和隐藏列?
wpf·界面控件·devexpress·ui开发·.net9
Minner-Scrapy2 小时前
DApp 开发入门指南
开发语言·python·web app
孤雪心殇2 小时前
简单易懂,解析Go语言中的Map
开发语言·数据结构·后端·golang·go
庸俗今天不摸鱼2 小时前
Canvas进阶-4、边界检测(流光,鼠标拖尾)
开发语言·前端·javascript·计算机外设
菠菠萝宝2 小时前
【Java八股文】10-数据结构与算法面试篇
java·开发语言·面试·红黑树·跳表·排序·lru
奔跑吧邓邓子2 小时前
【Python爬虫(36)】深挖多进程爬虫性能优化:从通信到负载均衡
开发语言·爬虫·python·性能优化·负载均衡·多进程
不会Hello World的小苗3 小时前
Java——链表(LinkedList)
java·开发语言·链表
lsx2024063 小时前
Perl 面向对象编程指南
开发语言