XAML 中的动画按钮背景颜色 [英] Animate button background color in XAML

问题描述

我刚接触 WPF 和 XAML，所以我有 ResourceDictionary(现在只有一个按钮):

I new to WPF and XAML, so I have ResourceDictionary (one button for now):

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="ButtonProduct" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="Border"  
                            CornerRadius="0" 
                            BorderThickness="0"
                            Focusable="False"
                            BorderBrush="Transparent" Background="White">
                        <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter  Property="Background" Value="#52b0ca"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

悬停时按钮的颜色会发生变化，但如何更改淡入淡出以实现颜色的平滑过渡?

On hover the color of the button changes, but how can I make change in fade in and out, for smooth transition of the color?

推荐答案

您可以使用 EventTrigger 在 MouseEnter 和 上启动 ColorAnimation>鼠标离开:

You can use EventTrigger to start ColorAnimation on MouseEnter and MouseLeave:

<ControlTemplate TargetType="{x:Type Button}">
   <Border Name="Border" CornerRadius="0" BorderThickness="0" Focusable="False" BorderBrush="Transparent" Background="White">
      <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
   </Border>
   <ControlTemplate.Triggers>
      <EventTrigger RoutedEvent="MouseEnter">
         <BeginStoryboard>
            <Storyboard>
               <ColorAnimation From="White" To="#52b0ca" Duration="0:0:1" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color"/>
            </Storyboard>
         </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="MouseLeave">
         <BeginStoryboard>
            <Storyboard>
               <ColorAnimation From="#52b0ca" To="White" Duration="0:0:1" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color"/>
            </Storyboard>
         </BeginStoryboard>
      </EventTrigger>
   </ControlTemplate.Triggers>
</ControlTemplate>

这篇关于XAML 中的动画按钮背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！