MouseOver和MouseDown上的動畫按鈕

Question

我正在爲WPF中的標準按鈕創建自己的ControlTemplate。當用戶使用鼠標懸停在按鈕上方時，我想改變按鈕的背景，但是當用戶按下按鈕（還有另一種顏色）時，也要更改我的按鈕的背景。這似乎是一種常見的行爲，但我無法讓它工作。

我的模板由內部帶有圖像的邊框組成。它是我想要動畫的邊框的背景色（真的是一種漸變）。我的模板中有觸發器可以激活動畫（故事板）。

MouseOver/Out工作得很好。我按下按鈕時發生問題。新聞動畫按照它應該運行，發佈動畫也是如此。但在這之後，MouseOut將永遠不會運行。該按鈕卡在MouseOver狀態。

我在做什麼錯？

<ControlTemplate TargetType="{x:Type Button}"> 
    <ControlTemplate.Resources> 
     <Storyboard x:Key="MouseOverAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffefefff" Duration="0:0:0.2" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.2" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseOutAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffeeeeee" Duration="0:0:0.2" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffcccccc" Duration="0:0:0.2" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseDownAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.1" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ff9a9aff" Duration="0:0:0.1" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseUpAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffefefff" Duration="0:0:0.1" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.1" /> 
     </Storyboard> 
    </ControlTemplate.Resources> 


    <Border x:Name="ButtonBorder" CornerRadius="0" BorderBrush="#55aaaaaa" BorderThickness="1" Width="23" Height="22"> 
     <Border.Background> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
       <GradientBrush.GradientStops> 
        <GradientStop x:Name="ButtonBorderGradientStop1" Color="#ffeeeeee" Offset="0.0" /> 
        <GradientStop x:Name="ButtonBorderGradientStop2" Color="#ffcccccc" Offset="1.0" /> 
       </GradientBrush.GradientStops> 
      </LinearGradientBrush> 
     </Border.Background> 
     <Image x:Name="ButtonIcon" Source="icons/searchicon_bw.png" Width="16" Height="16" /> 
    </Border> 


    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" /> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" /> 
      </Trigger.ExitActions> 
     </Trigger> 
     <Trigger Property="IsPressed" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseDownAnimation}" /> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseUpAnimation}" /> 
      </Trigger.ExitActions> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Answer 1

動畫有一個名爲FillBehavior屬性，默認值是HoldEnd。

當您的MouseUp動畫完成後，它將保留防止鼠標移出動畫正確顯示的值。實際上，鼠標移出動畫會運行，但會被鼠標移動動畫覆蓋。如果您翻轉觸發器的順序，首先放置IsPressed，您可以看到IsMouseOver動畫覆蓋了所有IsPressed動畫。

您可以設置FillBehavior到停止使動畫停止涵蓋財產當他們完成。

就你而言，在你的MouseOutAnimation和MouseUpAnimation上設置FillBehavior爲Stop就行。

（在這個例子中的故事板設置成它適用於所有包含的動畫。）

<ControlTemplate.Resources> 
    <Storyboard x:Key="MouseOverAnimation" Storyboard.TargetProperty="Color"> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffefefff" Duration="0:0:0.2" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffc7c7ff" Duration="0:0:0.2" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseOutAnimation" Storyboard.TargetProperty="Color" 
       FillBehavior="Stop"> <!-- <=================== --> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffeeeeee" Duration="0:0:0.2" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffcccccc" Duration="0:0:0.2" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseDownAnimation" Storyboard.TargetProperty="Color"> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffc7c7ff" Duration="0:0:0.1" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ff9a9aff" Duration="0:0:0.1" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseUpAnimation" Storyboard.TargetProperty="Color" 
       FillBehavior="Stop"> <!-- <=================== --> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffefefff" Duration="0:0:0.1" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffc7c7ff" Duration="0:0:0.1" /> 
    </Storyboard> 
</ControlTemplate.Resources> 

你可以找到關於FillBehavior在MSDN文章動畫概述What Happens After an Animation Ends?下更多的信息。