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 天前
Java 事件发布-订阅机制全解析:从原生实现到主流中间件
java·中间件·wpf·事件·发布订阅
武藤一雄2 天前
WPF中ViewModel之间的5种通讯方式
开发语言·前端·microsoft·c#·wpf
CSharp精选营2 天前
都是微软亲儿子,WPF凭啥干不掉WinForm?这3个场景说明白了
c#·wpf·跨平台·winform
baivfhpwxf20232 天前
wpf TextBlock 控件如何根据内容换行?
wpf
亘元有量-流量变现2 天前
鸿蒙、安卓、苹果音频设备技术深度解析与开发实践
android·wpf·harmonyos·亘元有量·积分墙
软泡芙2 天前
【Bug】ReactiveUI WPF绑定中依赖属性不更新的问题分析与解决方案
java·bug·wpf
浪扼飞舟2 天前
WPF输入验证(ValidationRule)
java·javascript·wpf
IOFsmLtzR4 天前
Flink Agents 源码解读 --- (5) --- ActionExecutionOperator
microsoft·flink·wpf
廋到被风吹走5 天前
【AI】Codex 复杂任务拆解:从“一气呵成“到“步步为营“
人工智能·wpf
希望永不加班5 天前
SpringBoot 整合 Redis 缓存
spring boot·redis·后端·缓存·wpf