使用故事板動畫在WPF中的鼠標懸停和選擇ListBoxItems

Question

我有一個WPF應用程序有一個列表框，我試圖應用一些鼠標懸停效果。當我使用簡單的Setter s來更改鼠標懸停/選擇時的背景顏色時，這一切都可以正常工作，但是我認爲如果它在狀態之間動態顯示它看起來會更好，所以我切換了Setter s進入/退出Storyboard s。它一開始都很好（鼠標懸停在&之外，選擇動畫在&以外），但是一旦選擇了一些東西然後變成deselcted，它將不會再次執行鼠標懸停效果。

下面是最少的代碼例子來說明這個問題：

<Window x:Class="WpfTest.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="500" Width="500"> 
    <Window.Resources> 
    <Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}"> 
     <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ListBoxItem}"> 
      <Border x:Name="border" BorderThickness="1" Height="50" Background="#000"> 
       <ContentPresenter /> 
      </Border> 
      <ControlTemplate.Triggers> 
       <MultiTrigger> 
       <MultiTrigger.Conditions> 
        <Condition Property="IsMouseOver" Value="True" /> 
        <Condition Property="IsSelected" Value="False" /> 
       </MultiTrigger.Conditions> 
       <MultiTrigger.EnterActions> 
        <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="border" 
          Storyboard.TargetProperty="Background.Color" To="#00F" /> 
        </Storyboard> 
        </BeginStoryboard> 
       </MultiTrigger.EnterActions> 
       <MultiTrigger.ExitActions> 
        <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="border" 
          Storyboard.TargetProperty="Background.Color" To="#008" /> 
        </Storyboard> 
        </BeginStoryboard> 
       </MultiTrigger.ExitActions> 
       </MultiTrigger> 
       <Trigger Property="IsSelected" Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="border" 
          Storyboard.TargetProperty="Background.Color" To="#F00" /> 
        </Storyboard> 
        </BeginStoryboard> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="border" 
          Storyboard.TargetProperty="Background.Color" To="#800" /> 
        </Storyboard> 
        </BeginStoryboard> 
       </Trigger.ExitActions> 
       </Trigger> 
      </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
     </Setter> 
    </Style> 
    </Window.Resources> 
    <Grid> 
    <ListBox x:Name="ConnectedDevicesListBox" 
     ItemContainerStyle="{DynamicResource ListboxItemStyle}" > 
     <ListItem/> 
     <ListItem/> 
     <ListItem/> 
     <ListItem/> 
     <ListItem/> 
     <ListItem/> 
     <ListItem/> 
     <ListItem/> 
    </ListBox> 
    </Grid> 
</Window> 

我做了退出動畫漸變到一個非黑顏色，所以你可以看到，這是IsSelected退出故事板後卡住。

任何想法？

Answer 1

故事板的默認行爲是繼續將屬性值設置爲動畫最後一幀的值。請參閱Animation Tips and Tricks，尤其是「動畫後不能更改屬性的值」部分。你永遠不會停止故事板，所以最終它們都在運行，並且最後聲明的是設置最終值。

您可以將故事板的FillBehavior設置爲停止，以便故事板在完成後停止設置值。我想你會想在ExitActions故事板上做這件事，但不要在EnterAction故事板上做，除非你還用正常的觸發器設置背景顏色。像這樣：

<MultiTrigger> 
    <MultiTrigger.Conditions> 
     <Condition Property="IsMouseOver" Value="True" /> 
     <Condition Property="IsSelected" Value="False" /> 
    </MultiTrigger.Conditions> 
    <MultiTrigger.EnterActions> 
     <BeginStoryboard> 
      <Storyboard> 
       <ColorAnimation Duration="0:0:0.15" 
        Storyboard.TargetName="border" 
        Storyboard.TargetProperty="Background.Color" To="#00F" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </MultiTrigger.EnterActions> 
    <MultiTrigger.ExitActions> 
     <BeginStoryboard> 
      <Storyboard FillBehavior="Stop"> 
       <ColorAnimation Duration="0:0:0.3" 
        Storyboard.TargetName="border" 
        Storyboard.TargetProperty="Background.Color" To="#008" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </MultiTrigger.ExitActions> 
</MultiTrigger> 
<Trigger Property="IsSelected" Value="True"> 
    <Trigger.EnterActions> 
     <BeginStoryboard> 
      <Storyboard> 
       <ColorAnimation Duration="0:0:0.15" 
        Storyboard.TargetName="border" 
        Storyboard.TargetProperty="Background.Color" To="#F00" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.EnterActions> 
    <Trigger.ExitActions> 
     <BeginStoryboard> 
      <Storyboard FillBehavior="Stop"> 
       <ColorAnimation Duration="0:0:0.3" 
        Storyboard.TargetName="border" 
        Storyboard.TargetProperty="Background.Color" To="#800" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.ExitActions> 
</Trigger>