在WPF ListBoxItems中使用故事板动画进行鼠标悬停和选择(Using storyboard animations for mouseover and selection in WPF Li

在WPF ListBoxItems中使用故事板动画进行鼠标悬停和选择(Using storyboard animations for mouseover and selection in WPF ListBoxItems)

我有一个WPF应用程序，它有一个列表框，我正在尝试应用一些鼠标悬停效果。 当我使用简单的Setter来更改鼠标悬停/选择时的背景颜色时，这一切都可以正常工作，但是我认为如果它在状态之间动画，它看起来会更好，所以我切换了Setter以进入/退出Storyboard 。 它一开始工作得很好（鼠标悬停动画进出，选择动画进出），但一旦选择了一些东西，然后变成了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出口故事板后卡住了。

有任何想法吗？

I've got a WPF app that has a listbox which I'm trying to apply some mouseover effects to. It all works fine when I use simple Setters to change the background color on mouseover/selection, but I figured it would look nicer if it animated between states, so I switched the Setters for enter/exit Storyboards. It all works nicely initially (mouseover animates in & out, selection animates in & out), but once something has been selected and then become deselcted, it will never do the mouseover effect again.

Here's the minimal code example to show the issue:

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

I've made the exit animations fade to a non-black color so you can see that the it's getting stuck after the IsSelected exit storyboard.

Any ideas?

最满意答案

故事板的默认行为是继续将属性值设置为动画最后一帧的值。 请参阅动画提示和技巧 ，尤其是“动画后不能更改属性的值”部分。 你永远不会停止故事板，所以最终它们都在运行，并且最后声明的是设置最终值。

您可以将故事板的FillBehavior设置为Stop，以便Storyboard在完成后停止设置值。 我想你会想在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>

The default behavior of a Storyboard is to continue setting the property value to value from the last frame of the animation. See Animation Tips and Tricks, especially the "Can't Change the Value of a Property after Animating it" section. You are never stopping the storyboards, so eventually they are all running and whichever one is declared last is setting the final value.

You can set the FillBehavior of the Storyboards to Stop so that the Storyboard will stop setting the value after it completes. I think you will want to do this on the ExitActions storyboards, but not on the EnterAction storyboards unless you also set the background color with a normal trigger. Something like this:

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