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

WPF 按钮悬停动画效果实现

news 来源：原创 2025/5/31 10:54:55

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变换和光效来增强用户体验。

相关文章：

  • 大数据如何赋能市场情报分析？——精准决策，从数据开始
  • Bently Nevada 135473-01振动监控模块3500系列状态系统
  • 强化学习极简入门笔记
  • 技术文档撰写指南：从结构到细节的全流程解析
  • 小白玩串口控制的ASCII避坑
  • 计算机网络常见体系结构、分层必要性、分层设计思想以及专用术语介绍
  • MySQL 查询语句的执行顺序
  • 在 WSL Ubuntu-24.04 上安装 Nacos 2.5.1 并使用 MySQL 数据库
  • Knife4j框架的使用
  • HOW - 简历和求职面试宝典（二）
  • 基于MATLAB实现SFA（Slow Feature Analysis，慢特征分析）算法
  • 湖北理元理律师事务所债务优化实践：在还款与生活间寻找平衡支点
  • 网络摄像机POE交换机选型指南：技术参数与场景适配深度解析
  • 多语种OCR识别系统，引领文字识别新时代
  • 深入剖析网络协议：七层协议与四层协议详解
  • 本地socket间通信，可以直接使用read读取socket中的结构体
  • JAVA重症监护系统源码 ICU重症监护系统源码 智慧医院重症监护系统源码
  • SpringBoot 日志
  • Windows 下如何打开设置环境变量的对话框
  • 区间DP概述（JAVA）
  • 如何查网站空间/优化网站怎么真实点击
  • 网站诊断表/seo技术外包公司
  • 做网站的费用计入哪个科目/app注册拉新平台
  • 导航网站的广告怎么做的/seo网络优化公司
  • 做网站哪些网络公司好/整站优化包年
  • wordpress的登录函数使用教程/网络seo优化公司