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

WPF 按钮悬停动画效果实现

ai 2025/7/21 15:07:47

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.xdnf.cn/news/9691.html

相关文章：

  • 【五模型时间序列预测对比】Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN
  • 《AI大模型的开源与性能优化：DeepSeek R1的启示》
  • 互斥锁、自旋锁、读写锁、悲观锁、乐观锁的应用场景
  • 深入理解C#中的LINQ：数据查询的终极利器
  • 2013-2021年各省电子商务数据
  • 认识多系统萎缩：一种隐匿进展的神经退行性问题
  • spring IOC控制反转
  • 【春秋云镜】CVE-2022-26965 靶场writeup
  • 第一章 项目总览
  • 线性代数入门：轻松理解二阶与三阶行列式的定义与理解
  • Java消息队列与安全实战：谢飞机的烧饼摊故事
  • AI编程报错 API流式传输失败解决方案
  • 如何做好一个决策：基于 Excel的决策树+敏感性分析应用
  • 在ROS2(humble)+Gazebo+rqt下，实时显示仿真无人机的相机图像
  • WPF的UI交互基石：数据绑定基础
  • UDP编程
  • 设计模式之原型模式
  • [9-1] USART串口协议 江协科技学习笔记（13个知识点）
  • pycharm debug的时候无法debug到指定的位置就停住不动了
  • Spring Boot 3.0与Java 17：企业级应用开发的新范式
  • github.com/lib/pq 数据库链接完整示例方式
  • word文档格式规范（论文格式规范、word格式、论文格式、文章格式、格式prompt）
  • 【PhysUnits】15 完善的类型整数基本结构体(basic.rs)
  • AI自动化测试框架browser use 项目测试总结
  • 2025.5.28学习日记 linux三剑客 awk
  • 阿达三国志战棋天下攻略详解最新
  • 从时间到宇宙：探索时间同步的底层奥秘与工程实践
  • AI的“空间盲症“
  • 幸运之轮系统测试报告
  • 影刀RPA-操作网站基础信息