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>