I am applying a ItemContainerStyle to a ListBox control. In my ListBoxItem style I have several triggers containing storyboard animations that apply to the current state of the ListBoxItem (IsSelected, IsMouseOver).
It all works fine and dandy until after I have selected a ListBoxItem, then the IsMouseOver storyboard animation isn't fired for the ListBoxItem which was previously selected.
I can't see where the problem is, so I am hoping someone will help me out with this issue.
Cheers
Here is the code I am using
<Style x:Key="ListBoxFeedItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" Margin="5" SnapsToDevicePixels="true">
<Grid Name="Grid" Height="Auto" Margin="5">
<TextBlock Margin="10" Text="{Binding Path=Name}" FontSize="14" TextTrimming="CharacterEllipsis" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#4CDFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#00DFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#FFDFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="#00DFDFDF" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Check the order of your Triggers.
Have a look at Multiple storyboards on one property
Check out Yuri's answer.May be that's what you are looking for.
Related
<Button x:Name="ListItem_Button_Play" VerticalAlignment="Center"
Style="{StaticResource PlayButtonStyle}" Foreground="{x:Null}">
<Image Source="Resources/ListItem_Button_Play.png"/>
</Button>
I have a Button in my DataTemplate. I applied a Style to it to remove the default hover effect. Also, to make it grow bigger when mouse pointer enter the hover area.
<Style x:Key="PlayButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border"
Width="{Binding Path=ActualHeight, ElementName=border}"
BorderThickness="0"
CornerRadius="{Binding Path=ActualHeight, ElementName=border}"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
<DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
<DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
I successfully changed the Border shape of the Button to follow the Image (ellipse). But not the hover area.
After some experiments, i can conclude that although the shape of the Border has changed, the shape of hover area are still the same. The red area above is the hover area.
Is there a way to change the Hover Area shape just like the "Play" Image ??
Avoid things like the Height/Width bindings you have whose path is itself. RelativeSource if you need, but in this case none of that should be necessary. Besides, you already have two Setter's halfway down with your Height and Width hard set already...
I made a few minor tweaks but this should sort you out and tests fine on my end.
<Style x:Key="PlayButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background" Value="Purple"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border"
CornerRadius="50"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
<DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
<DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
I have the following Style that contains an animation used to expand a Border:
<Style TargetType="{x:Type Border}" x:Key="BorderAnimations">
<Setter Property="FlowDirection" Value="RightToLeft" />
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetProperty="Width"
BeginTime="0:0:0"
From="" To="420" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetProperty="Width"
BeginTime="0:0:0"
From="420" To="90" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
I want to set the From property to the generics' button Width. Here I have the generic Button style:
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="80" />
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="{DynamicResource MainBlue}" />
<Setter Property="Height" Value="{Binding
ElementName=MainUCPanel, Path=Height,
Converter={StaticResource ArithmeticConverter},
ConverterParameter=Int32.Parse(values[0]) / 6}" />
<Setter Property="Width" Value="{Binding Path=Height, RelativeSource={RelativeSource Self}}" />
<Setter Property="DataContext" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type view:DesktopUCMain}}, Path=DataContext}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" CornerRadius="5" x:Name="bd">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#FF1E90FF" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#27ace3" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
I've tried to set it as:
From="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=ActualWidth}"
But it's not working...
NOTE: these styles are located on a ResourceDictionary.xaml. How can I achieve the animation to get this width?
EDIT: Thrown exception:
Cannot freeze this Storyboard timeline tree for use across threads.
I'm setting DataGridRow BackgroundColor to Green or to Red with trigger based on LogError value.
I want to animate newly added rows with transparency.
This works fine:
From="Transparent" To="Red"
But what I want color to goes to is current color set with Style. Its not always Red it could be Green as well.
This does not work:
From="Transparent" To="{TemplateBinding DataGridRow.Background}"
or
From="Transparent" To="{Binding RelativeSource={RelativeSource Self}, Path=Backgound}"
Code:
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property = "Background" Value="LimeGreen"/>
<Style.Triggers>
<DataTrigger Binding="{Binding LogMessage}" Value="Exception has occured">
<Setter Property = "Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)"
Duration="00:00:03"
From="Transparent"
To="{TemplateBinding DataGridRow.Background}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
Error message: Cannot freeze this Storyboard timeline tree for use across threads.
There are few problems in your XAML code.
First, you have specified default style under resources section of DataGrid and later provide your own style which will override default style.
Either you should define new style and set its BasedOn DP to refer to default style. But in your case i don't see any use of defining separate style just for trigger.
Second, you want your animation to go from Transparent to colour selected in style which can either by LimeGreen or Red depending on trigger. So, you should not set To value in your animation since it will automatically picked up.
This will work as you desire -
<DataGrid>
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property ="Background" Value="LimeGreen"/>
<Style.Triggers>
<DataTrigger Binding="{Binding LogMessage}"
Value="Exception has occured">
<Setter Property = "Background" Value="Red"/>
</DataTrigger>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty=
"(DataGridRow.Background).(SolidColorBrush.Color)"
Duration="00:00:03"
From="Transparent"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
</DataGrid>
#Den
You have to determinate a standart Color, before you animate. This is my Style for animating a row and cell.
<Style TargetType="{x:Type DataGridRow}">
<Style.Setters>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="Transparent"/>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#FFF37C21"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)" Duration="00:00:0.2" To="#FFF37C21"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)" Duration="00:00:0.2" To="Transparent"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Style.Setters>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid x:Name="gridCell" Background="#00FFFFFF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<ContentPresenter
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)">
<DiscreteObjectKeyFrame KeyTime="00:00:0.2">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)">
<DiscreteObjectKeyFrame KeyTime="00:00:0.2">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Light</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
I need to create a color animation. I have a control (a slick button - minimize, close) which works perfectly. There's a mouseover trigger that changes its color. The problem is when I want to animate this color transition. :S
There's an example how it looks like:
<ControlTemplate x:Key="SlickButtonTemplate" TargetType="{x:Type controls:SlickButtonControl}">
<Grid>
<Border x:Name="ButtonBackgroundBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}"
Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" BorderBrush="Black" BorderThickness="1">
</Border>
<Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderBrush="Black"
BorderThickness="1">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="#FFFFFFFF" Direction="270" ShadowDepth=".75" Softness="0.20"/>
</Border.BitmapEffect>
</Border>
<Border x:Name="ButtonContentBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderThickness="1">
<ContentPresenter Width="Auto" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.Setters>
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
</Trigger.Setters>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Trigger.Setters>
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
<Setter Property="Background" TargetName="ButtonBackgroundBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"></Setter>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SlickButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template" Value="{StaticResource SlickButtonTemplate}" />
</Style>
I tried to remove Trigger.Setters section and replace it by:
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="ButtonBackgroundBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
It works once. There is an animation when mouse enters on the button area but no animation when it leaves. Next when mouse enters on that button again - no animation, but color changes immediately:S I dunno how to do that. I beg for some help.
Thx in advance.
Not here
<Trigger Property="IsMouseOver" Value="False">
Not here
<Trigger.Setters>
But here
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
Should be:
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="0"></Setter>
By the way I think you got Property="IsMouseOver" Value="False" confused with Property="IsPressed" Value="True"
and still the Opacity for ButtonBackgroundBorder on IsMouseOver=false should be 0
Thx, I'm stupid, don't comment:P
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.Setters>
<Setter Property="Background" TargetName="buttonBackgroundPressedBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}" />
</Trigger.Setters>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
Everything works fine:)
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.Background>
<SolidColorBrush x:Name="backgroundBrush" Color="Transparent" Opacity="0.1"/>
</Grid.Background>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="backgroundBrush" Property="Color" Value="Green" />
</DataTrigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="backgroundBrush"
Storyboard.TargetProperty="Color"
To="White" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="backgroundBrush"
Storyboard.TargetProperty="Color"
AccelerationRatio="1" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
Doesn't compile with error 'Cannot find the trigger target 'backgroundBrush'.'
If I remove the DataTrigger it will compile and work. If I change the DataTrigger to use TargetName="grid" Property="Background" it will compile and work (but without the desired opacity).
Where am I going wrong?
While I'm not sure why the brush isn't in the namescope, you can do this by swapping out the brush, and "dotting-down" to the Color property of the background brush in the animations like so:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.Background>
<SolidColorBrush Color="Transparent" Opacity="0.1"/>
</Grid.Background>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="grid" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Green" Opacity="0.1"/>
</Setter.Value>
</Setter>
</DataTrigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="grid"
Storyboard.TargetProperty="Background.Color"
To="White" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="grid"
Storyboard.TargetProperty="Background.Color"
AccelerationRatio="1" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>