WPF按钮走马灯效果

XML 复制代码
<Window x:Class="LightingButton.MainWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">
    <Grid>
        <Grid Margin="10">
            <!-- 把按钮和光效放在同一个 Grid 里,共享尺寸 -->
            <Grid x:Name="ButtonContainer"
                  Width="160"
                  Height="50">
                <!-- 按钮 -->
                <Button Content="AOI检测"
                        Foreground="White"
                        FontSize="16"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Button">
                                        <Border x:Name="border"
                                                Background="{TemplateBinding Background}"
                                                CornerRadius="12">
                                            <ContentPresenter HorizontalAlignment="Center"
                                                              VerticalAlignment="Center" />
                                        </Border>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver"
                                                     Value="True">
                                                <Setter TargetName="border"
                                                        Property="Background"
                                                        Value="#1976D2" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Background"
                                    Value="#2196F3" />
                            <Setter Property="BorderThickness"
                                    Value="0" />
                        </Style>
                    </Button.Style>
                </Button>

                <!-- 光效层:直接覆盖在按钮上 -->
                <Path x:Name="MovingGlow"
                      Stroke="#FF4081"
                      StrokeThickness="3"
                      StrokeLineJoin="Round"
                      StrokeStartLineCap="Round"
                      StrokeEndLineCap="Round"
                      Opacity="0">
                    <!-- 动态生成与按钮相同尺寸的圆角矩形 -->
                    <Path.Data>
                        <RectangleGeometry Rect="1.5,1.5,157,47" 
                            RadiusX="12" 
                            RadiusY="12" />
                    </Path.Data>
                    <Path.StrokeDashArray>
                        20, 80
                    </Path.StrokeDashArray>
                </Path>
            </Grid>

            <!-- 触发动画:监听整个容器 -->
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter"
                              SourceName="ButtonContainer">
                    <BeginStoryboard x:Name="hoverGlowStoryboard">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="MovingGlow"
                                             Storyboard.TargetProperty="Opacity"
                                             To="1"
                                             Duration="0:0:0.2" />
                            <DoubleAnimation Storyboard.TargetName="MovingGlow"
                                             Storyboard.TargetProperty="StrokeDashOffset"
                                             From="100"
                                             To="0"
                                             Duration="0:0:2"
                                             RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <EventTrigger RoutedEvent="Mouse.MouseLeave"
                              SourceName="ButtonContainer">
                    <StopStoryboard BeginStoryboardName="hoverGlowStoryboard" />
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="MovingGlow"
                                             Storyboard.TargetProperty="Opacity"
                                             To="0"
                                             Duration="0:0:0.3" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
        </Grid>
    </Grid>
</Window>

效果如下:

当还没有选中时

选中时

相关推荐
柒.梧.1 天前
基于SpringBoot+JWT 实现Token登录认证与登录人信息查询
wpf
十月南城4 天前
Flink实时计算心智模型——流、窗口、水位线、状态与Checkpoint的协作
大数据·flink·wpf
听麟7 天前
HarmonyOS 6.0+ 跨端会议助手APP开发实战:多设备接续与智能纪要全流程落地
分布式·深度学习·华为·区块链·wpf·harmonyos
@hdd7 天前
Kubernetes 可观测性:Prometheus 监控、日志采集与告警
云原生·kubernetes·wpf·prometheus
zls3653657 天前
C# WPF canvas中绘制缺陷分布map
开发语言·c#·wpf
专注VB编程开发20年7 天前
c#Redis扣款锁的设计,多用户,多台电脑操作
wpf
闲人编程8 天前
定时任务与周期性调度
分布式·python·wpf·调度·cron·定时人物·周期性
zls3653658 天前
C# WPF canvas中绘制缺陷分布map并实现缩放
开发语言·c#·wpf
数据知道9 天前
PostgreSQL:Citus 分布式拓展,水平分片,支持海量数据与高并发
分布式·postgresql·wpf
闲人编程10 天前
Redis分布式锁实现
redis·分布式·wpf·进程··死锁·readlock