WPF XAML 在鼠标悬停时动画/闪烁按钮

Question

I have a custom message box with two button 'Yes' and 'No'. Button 'Yes' is green and button 'No' is red.

I apply the same style for the two buttons through a xaml file defined separately as below:

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>

These two buttons are place in my WPF window as below:

<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>

Now, I would like to perform a nice effect when mouse is positioned over the buttons, some kind of blinking or whatever using storyboard and dependant on the color of the button.

Also I would like to put this storyboard within my existing style file MsgBoxButtonStyle.xaml and no put each storyboard in the window for each button, i want to share it.

How can I do this? some one can provide me a nice effect for buttons?

Answer 1

Just add triggers to the style. Here's an example to start you off.

 <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>