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>

效果如下:

当还没有选中时

选中时

相关推荐
心平气和量大福大9 小时前
C#-WPF-控件-TextBox 数据绑定
开发语言·c#·wpf
listening77718 小时前
HarmonyOS 6.1 全场景协同实战:从“单机”到“超级终端”的分布式重构
wpf
心平气和量大福大1 天前
C#-WPF-布局-Grid
c#·wpf·visual studio
心平气和量大福大2 天前
C#-WPF-Window主窗体
开发语言·c#·wpf
FuckPatience3 天前
Telerik UI for WPF 值不能为null。参数名:key
ui·wpf
lindexi3 天前
WPF 笔迹延迟优化从硬件到软件的全链路分析
wpf
weixin_727535624 天前
双Token认证体系深度拆解:Spring Security + JWT + Redis
redis·spring·wpf
liuxiaowei34 天前
Winform+WPF双框架实战:喷涂工艺SCADA上位机从0到1搭建(附采集监控源码+车间踩坑实录)
大数据·hadoop·wpf
贺国亚5 天前
模型训练-分布式与GPU调度
分布式·wpf
不羁的木木5 天前
HarmonyOS技术精讲-Connectivity Kit:实战——多屏协同与文件快传应用
华为·wpf·harmonyos