WPF XAML 在鼠标悬停时对按钮进行动画处理/闪烁

Question

我有一个自定义消息框，有两个按钮"是"和"否"。按钮"是"为绿色，按钮"否"为红色。

我通过单独定义的 xaml 文件对两个按钮应用相同的样式，如下所示：

MsgBoxButtonStyle.xaml：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button" 
x:Key="MsgBoxButtonStyle">
        <Setter Property="Background" 
        Value="Transparent" />
        <Setter Property="TextBlock.TextAlignment" 
        Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border  Name="Border" CornerRadius="0"  
                    BorderBrush="#000" BorderThickness="1,1,1,1" 
                    Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="contentPresenter" 
                        ContentTemplate="{TemplateBinding ContentTemplate}" 
                        Content="{TemplateBinding Content}" 
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                        Margin="{TemplateBinding Padding}" 
                        VerticalAlignment="{TemplateBinding VerticalAlignment}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

这两个按钮放置在我的 WPF 窗口中，如下所示：

<Window x:Class="My.XAML.Controls.Windows.WpfMessageBox"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary  Source="/My.XAML;component/Styles/MsgBoxButtonStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources> 
   <Button Name="btnYes" Content="Yes"                             
            Click="Button_Click" Foreground="Black" 
            Style="{StaticResource MsgBoxButtonStyle}"    
            Background="#b6dbd6" 
            VerticalAlignment="Center" HorizontalAlignment="Stretch"  
            VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
    <Button Name="btnNo" Content="No"                             
            Click="Button_Click" Foreground="Black" 
            Style="{StaticResource MsgBoxButtonStyle}"
            Background="#dbb6b6" 
            VerticalAlignment="Center" HorizontalAlignment="Stretch"  
            VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
</Window>

现在，我想在鼠标位于按钮上时执行一个很好的效果，某种闪烁或使用故事板的任何内容，并且取决于按钮的颜色。

我还想把这个故事板放在我现有的样式文件 MsgBoxButtonStyle.xaml 中，而不是在每个按钮的窗口中放置每个故事板，我想分享它。

我该怎么做？ 有人可以为我提供很好的按钮效果吗？

Answer 1

只需为样式添加触发器即可。下面是一个示例，供您开始。

 <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Duration="0:0:0.250" To="0" 
                                                            Storyboard.TargetProperty="BorderThickness" />
                            <DoubleAnimation Duration="0:0:0.550" To="120" 
                                                            Storyboard.TargetProperty="Height" />
                            <DoubleAnimation Duration="0:0:0.550" To="120" 
                                                            Storyboard.TargetProperty="Width" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Duration="0:0:0.250" To="0" 
                                                            Storyboard.TargetProperty="BorderThickness" />
                            <DoubleAnimation Duration="0:0:0.550" To="100" 
                                                            Storyboard.TargetProperty="Height" />
                            <DoubleAnimation Duration="0:0:0.550" To="100" 
                                                            Storyboard.TargetProperty="Width" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>