当前位置： 首页 > article >正文

WPF 按钮悬停动画效果实现

article 2025/8/30 13:03:56

WPF 按钮悬停动画效果实现

下面我将实现一个专业的按钮悬停动画效果：当鼠标悬停在按钮上时，按钮上的文字由黑色变为白色，同时加粗并变大。

完整实现方案

MainWindow.xaml

<Window x:Class="ButtonHoverEffect.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"xmlns:local="clr-namespace:ButtonHoverEffect"mc:Ignorable="d"Title="按钮悬停动画效果" Height="400" Width="600"WindowStartupLocation="CenterScreen"Background="#FF1E1E1E"><Grid><Grid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><!-- 标题 --><TextBlock Text="专业按钮悬停动画效果" Grid.Row="0"FontSize="28"FontWeight="Bold"Foreground="White"HorizontalAlignment="Center"VerticalAlignment="Bottom"Margin="0,0,0,40"/><!-- 按钮容器 --><StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center"VerticalAlignment="Center"Margin="20"><!-- 示例按钮 1 --><Button Content="主页" Style="{StaticResource HoverButtonStyle}"Margin="20,0"Padding="30,15"/><!-- 示例按钮 2 --><Button Content="产品" Style="{StaticResource HoverButtonStyle}"Margin="20,0"Padding="30,15"/><!-- 示例按钮 3 --><Button Content="关于我们" Style="{StaticResource HoverButtonStyle}"Margin="20,0"Padding="30,15"/><!-- 示例按钮 4 --><Button Content="联系我们" Style="{StaticResource HoverButtonStyle}"Margin="20,0"Padding="30,15"/></StackPanel><!-- 页脚说明 --><TextBlock Grid.Row="2"Text="鼠标悬停在按钮上查看动画效果"FontSize="16"Foreground="#AAAAAA"HorizontalAlignment="Center"VerticalAlignment="Top"Margin="0,40,0,0"/></Grid>
</Window>

App.xaml (添加全局样式)

<Application x:Class="ButtonHoverEffect.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"StartupUri="MainWindow.xaml"><Application.Resources><!-- 按钮悬停动画样式 --><Style x:Key="HoverButtonStyle" TargetType="Button"><!-- 基本样式设置 --><Setter Property="Background" Value="#FF252526"/><Setter Property="Foreground" Value="Black"/><Setter Property="BorderBrush" Value="#FF3F3F46"/><Setter Property="BorderThickness" Value="1"/><Setter Property="FontSize" Value="18"/><Setter Property="FontWeight" Value="Normal"/><Setter Property="Cursor" Value="Hand"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><!-- 按钮视觉结构 --><Border x:Name="border" Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"CornerRadius="8"><!-- 内容容器 --><ContentPresenter x:Name="contentPresenter"HorizontalAlignment="Center"VerticalAlignment="Center"Margin="{TemplateBinding Padding}"/></Border><!-- 触发器 --><ControlTemplate.Triggers><!-- 鼠标悬停触发器 --><Trigger Property="IsMouseOver" Value="True"><!-- 文字颜色变为白色 --><Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="White"/><!-- 文字加粗 --><Setter TargetName="contentPresenter" Property="TextElement.FontWeight" Value="Bold"/><!-- 文字变大 --><Setter TargetName="contentPresenter" Property="TextElement.FontSize" Value="20"/><!-- 背景色变化 --><Setter Property="Background" Value="#FF4A90E2"/><!-- 边框变化 --><Setter Property="BorderBrush" Value="#FF3A80D2"/><!-- 阴影效果 --><Setter Property="Effect"><Setter.Value><DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="#FF4A90E2" Opacity="0.7"/></Setter.Value></Setter></Trigger><!-- 鼠标按下效果 --><Trigger Property="IsPressed" Value="True"><Setter Property="Background" Value="#FF2A70C2"/><Setter Property="BorderBrush" Value="#FF1A60B2"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!-- 平滑动画版本 --><Style x:Key="AnimatedHoverButtonStyle" TargetType="Button" BasedOn="{StaticResource HoverButtonStyle}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><!-- 按钮视觉结构 --><Border x:Name="border" Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"CornerRadius="8"><!-- 内容容器 --><ContentPresenter x:Name="contentPresenter"HorizontalAlignment="Center"VerticalAlignment="Center"Margin="{TemplateBinding Padding}"/></Border><!-- 触发器 --><ControlTemplate.Triggers><!-- 鼠标悬停触发器（带平滑动画） --><EventTrigger RoutedEvent="MouseEnter"><BeginStoryboard><Storyboard><!-- 文字颜色动画 --><ColorAnimation Storyboard.TargetName="contentPresenter"Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"To="White"Duration="0:0:0.3"/><!-- 文字加粗动画（使用FontWeightConverter） --><ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"Storyboard.TargetProperty="(TextElement.FontWeight)"><DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="Bold"/></ObjectAnimationUsingKeyFrames><!-- 文字大小动画 --><DoubleAnimation Storyboard.TargetName="contentPresenter"Storyboard.TargetProperty="(TextElement.FontSize)"To="20"Duration="0:0:0.3"/><!-- 背景色动画 --><ColorAnimation Storyboard.TargetName="border"Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"To="#FF4A90E2"Duration="0:0:0.3"/><!-- 边框色动画 --><ColorAnimation Storyboard.TargetName="border"Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"To="#FF3A80D2"Duration="0:0:0.3"/><!-- 阴影效果动画 --><DoubleAnimation Storyboard.TargetProperty="Effect.(DropShadowEffect.Opacity)"To="0.7"Duration="0:0:0.3"/></Storyboard></BeginStoryboard></EventTrigger><!-- 鼠标离开动画 --><EventTrigger RoutedEvent="MouseLeave"><BeginStoryboard><Storyboard><!-- 文字颜色恢复 --><ColorAnimation Storyboard.TargetName="contentPresenter"Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"To="Black"Duration="0:0:0.3"/><!-- 文字加粗恢复 --><ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"Storyboard.TargetProperty="(TextElement.FontWeight)"><DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="Normal"/></ObjectAnimationUsingKeyFrames><!-- 文字大小恢复 --><DoubleAnimation Storyboard.TargetName="contentPresenter"Storyboard.TargetProperty="(TextElement.FontSize)"To="18"Duration="0:0:0.3"/><!-- 背景色恢复 --><ColorAnimation Storyboard.TargetName="border"Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"To="#FF252526"Duration="0:0:0.3"/><!-- 边框色恢复 --><ColorAnimation Storyboard.TargetName="border"Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"To="#FF3F3F46"Duration="0:0:0.3"/><!-- 阴影效果恢复 --><DoubleAnimation Storyboard.TargetProperty="Effect.(DropShadowEffect.Opacity)"To="0"Duration="0:0:0.3"/></Storyboard></BeginStoryboard></EventTrigger><!-- 鼠标按下效果 --><Trigger Property="IsPressed" Value="True"><Setter Property="Background" Value="#FF2A70C2"/><Setter Property="BorderBrush" Value="#FF1A60B2"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Application.Resources>
</Application>

效果说明

基础效果（使用触发器）

  • 默认状态：

    • 文字颜色：黑色
    • 字体粗细：正常
    • 字体大小：18
    • 背景色：深灰(#FF252526)
    • 边框色：深灰(#FF3F3F46)

  • 鼠标悬停状态：

    • 文字颜色：白色
    • 字体粗细：加粗
    • 字体大小：20
    • 背景色：蓝色(#FF4A90E2)
    • 边框色：深蓝色(#FF3A80D2)
    • 添加蓝色阴影效果

  • 鼠标按下状态：

    • 背景色：深蓝色(#FF2A70C2)
    • 边框色：更深蓝色(#FF1A60B2)

平滑动画效果（使用Storyboard动画）

  • 所有属性变化都有0.3秒的平滑过渡
  • 颜色变化使用ColorAnimation实现渐变
  • 字体大小变化使用DoubleAnimation实现平滑缩放
  • 字体粗细变化使用ObjectAnimationUsingKeyFrames实现

使用说明

1. 基本使用

<Button Content="基本按钮" Style="{StaticResource HoverButtonStyle}"Padding="20,10"/>

2. 带平滑动画的按钮

<Button Content="平滑动画按钮" Style="{StaticResource AnimatedHoverButtonStyle}"Padding="20,10"/>

3. 自定义按钮内容

<Button Style="{StaticResource AnimatedHoverButtonStyle}"Padding="20,10"><StackPanel Orientation="Horizontal" Spacing="10"><Path Data="M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z" Fill="Black" Stretch="Uniform"Width="20"Height="20"/><TextBlock Text="自定义内容" VerticalAlignment="Center"/></StackPanel>
</Button>

高级效果：3D变换和光效

添加3D旋转效果

<!-- 在App.xaml的AnimatedHoverButtonStyle中添加 -->
<EventTrigger RoutedEvent="MouseEnter"><BeginStoryboard><Storyboard><!-- 其他动画... --><!-- 3D旋转效果 --><DoubleAnimation Storyboard.TargetName="transform3D"Storyboard.TargetProperty="RotationX"From="0" To="5" Duration="0:0:0.3"/><DoubleAnimation Storyboard.TargetName="transform3D"Storyboard.TargetProperty="RotationY"From="0" To="5" Duration="0:0:0.3"/></Storyboard></BeginStoryboard>
</EventTrigger><EventTrigger RoutedEvent="MouseLeave"><BeginStoryboard><Storyboard><!-- 其他动画... --><!-- 3D旋转恢复 --><DoubleAnimation Storyboard.TargetName="transform3D"Storyboard.TargetProperty="RotationX"To="0" Duration="0:0:0.3"/><DoubleAnimation Storyboard.TargetName="transform3D"Storyboard.TargetProperty="RotationY"To="0" Duration="0:0:0.3"/></Storyboard></BeginStoryboard>
</EventTrigger>

在按钮模板中添加3D变换：

<Border x:Name="border" ...><Border.RenderTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform/><TranslateTransform/></TransformGroup></Border.RenderTransform><Border.Projection><PlaneProjection x:Name="transform3D"/></Border.Projection><ContentPresenter .../>
</Border>

添加光晕效果

<!-- 在按钮模板中添加 -->
<Border x:Name="glowEffect" Opacity="0"Background="#60FFFFFF"CornerRadius="8"Margin="-5"><Border.Effect><BlurEffect Radius="10"/></Border.Effect>
</Border>

在动画中添加光晕效果：

<EventTrigger RoutedEvent="MouseEnter"><BeginStoryboard><Storyboard><!-- 其他动画... --><!-- 光晕效果 --><DoubleAnimation Storyboard.TargetName="glowEffect"Storyboard.TargetProperty="Opacity"To="1" Duration="0:0:0.3"/></Storyboard></BeginStoryboard>
</EventTrigger><EventTrigger RoutedEvent="MouseLeave"><BeginStoryboard><Storyboard><!-- 其他动画... --><!-- 光晕消失 --><DoubleAnimation Storyboard.TargetName="glowEffect"Storyboard.TargetProperty="Opacity"To="0" Duration="0:0:0.3"/></Storyboard></BeginStoryboard>
</EventTrigger>

专业建议

1. 性能优化

  • 使用硬件加速：

    // 在窗口构造函数中
public MainWindow()
{InitializeComponent();RenderOptions.ProcessRenderMode = System.Windows.Interop.RenderMode.Default;
}

  • 简化动画元素：

    • 避免在动画中使用复杂效果
    • 限制同时进行的动画数量

2. 响应式设计

  • 使用Viewbox包裹按钮内容：
    <Button Style="{StaticResource AnimatedHoverButtonStyle}"><Viewbox><TextBlock Text="响应式按钮"/></Viewbox>
</Button>

3. 主题支持

<Application.Resources><!-- 主题颜色 --><Color x:Key="PrimaryColor">#FF4A90E2</Color><Color x:Key="PrimaryDarkColor">#FF3A80D2</Color><Color x:Key="PrimaryDarkerColor">#FF2A70C2</Color><!-- 在样式中使用主题颜色 --><Style x:Key="HoverButtonStyle" TargetType="Button"><Setter Property="Background" Value="{StaticResource PrimaryColor}"/><!-- 悬停时 --><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="{StaticResource PrimaryDarkColor}"/></Trigger></Style>
</Application.Resources>

4. 无障碍支持

<Style TargetType="Button"><!-- 添加键盘焦点样式 --><Setter Property="FocusVisualStyle"><Setter.Value><Style><Setter Property="Control.Template"><Setter.Value><ControlTemplate><Rectangle Stroke="White" StrokeThickness="2"StrokeDashArray="2 2"Margin="2"SnapsToDevicePixels="true"/></ControlTemplate></Setter.Value></Setter></Style></Setter.Value></Setter><!-- 高对比度支持 --><Style.Triggers><Trigger Property="SystemParameters.HighContrast" Value="true"><Setter Property="Background" Value="WindowText"/><Setter Property="Foreground" Value="Window"/></Trigger></Style.Triggers>
</Style>

这个实现提供了专业且美观的按钮悬停动画效果，完全满足您的需求：鼠标悬停时文字颜色由黑变白、加粗并变大。您可以根据需要选择基本触发器效果或平滑动画效果，还可以添加额外的3D变换和光效来增强用户体验。

http://www.lryc.cn/news/2391706.html

相关文章：

  • 满天星之canvas实现【canvas】
  • 我在架构师面前谈 Spring Inner Beans，他直接点头说：这人有料！
  • Java无序数组 vs 有序数组：性能对比与选型指南
  • 【Linux 基础知识系列】第二篇-Linux 发行版概述
  • 【开源解析】基于PyQt5+Folium的谷歌地图应用开发：从入门到实战
  • 在 Ubuntu 22.04 LTS 上离线安装 Docker
  • python调用langchain实现RAG
  • Qt 中的 d-pointer 与 p-pointer小结
  • 冷库耗电高的一种重要原因分析，以及一种降低冷库电费≥20%的方法
  • 理解 Redis 事务-21（使用事务实现原子操）
  • 神经网络加上注意力机制，精度反而下降，为什么会这样呢？注意力机制的本质是什么？如何正确使用注意力机制？注意力机制 | 深度学习
  • 触控精灵 ADB运行模式填写电脑端IP教程
  • uniapp｜实现多端图片上传、拍照上传自定义插入水印内容及拖拽自定义水印位置,实现水印相机、图片下载保存等功能
  • linux有效裁剪视频的方式(基于ffmpeg，不改变分辨率，帧率，视频质量，不需要三方软件)
  • 服务器密码安全运维解决新思路：凭据管理SMS+双因素SLA认证结合的方案
  • 论文阅读笔记——In-Context Edit
  • Debian 系统 Python 开发全解析：从环境搭建到项目实战
  • Next.js 15 与 Apollo Client 的现代集成及性能优化
  • 【后端高阶面经：MongoDB篇】41、MongoDB 是怎么做到高可用的？
  • IO Vs NIO
  • offset 家族和 client 家族
  • DMBOK对比知识点整理（4）
  • day12 leetcode-hot100-21（矩阵4）
  • Java基础 Day24
  • 提问：鲜羊奶是解决育儿Bug的补丁吗？
  • 关于数据仓库、数据湖、数据平台、数据中台和湖仓一体的概念和区别
  • Hive 分桶（Bucketing）深度解析：原理、实战与核心概念对比
  • 网络协议DHCP
  • 什么是可重组机器人？
  • 4、docker compose