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>

效果如下:

当还没有选中时

选中时

相关推荐
Polevne21 小时前
WPF\MAUI\Avalonia Dispatcher
wpf
Ares-Wang21 小时前
wpf 图表制作 LiveCharts
wpf
A_nanda2 天前
c#WPF开发常见问题
开发语言·c#·wpf
Wang's Blog4 天前
AI Agent白手起家60: 多智能体架构解析与 LangGraph 入门
人工智能·架构·wpf
.Peter4 天前
.NET/WPF 程序在部分 Windows 电脑无法保存用户环境变量:使用 DPAPI 实现安全兼容
windows·信息安全·c#·.net·wpf·环境变量·dpapi
dalong105 天前
WPF:3D型材模型
3d·wpf
一念春风5 天前
文件透明加密(C、C#)
c语言·c#·wpf
yanaiding6 天前
C# WPF 独立开发看图工具 PixSight 经验介绍(二)—— 水印模块开发实录
图像处理·c#·wpf·个人开发
我是苏苏9 天前
WPF开发01:基础控件及常用模板篇
开发语言·c#·html·wpf
dalong109 天前
WPF:3D顶点共享与法线设置对光照效果的影响
3d·wpf