ListBox style in WPF - MouseLeave and UnSelect fadeout - wpf

Question

I'm styling a listbox to have some effects like MouseLeave and UnSelect fadeout.
It works when no item selected. But once some items are selected one by one, effects not working for them anymore! even if they're not selected.
Ideal behavior is when, items behave constantly in response to events and property changes.
I want to have List Box items that respond to MouseOver and MouseLeave events when they're not selected, and respond to Unselect property change.
Resourse Dictionary:
<ResourceDictionary>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="DisabledControlLightColor-LS1">#FFE8EDF9</Color>
<Color x:Key="SelectedBackgroundColor-LS1">#FFC5CBF9</Color>
<Color x:Key="MouseOverBackgroundColor-LS1">#FFE5E9F7</Color>
<Color x:Key="SelectedUnfocusedColor-LS1">#FFDDDDDD</Color>
<Color x:Key="UnSelectedBackgroundColor-LS1">#00C5CBF9</Color>
<Color x:Key="ControlLightColor-LS1">White</Color>
<Color x:Key="ControlMediumColor-LS1">#FF7381F9</Color>
<Color x:Key="BorderMediumColor-LS1">#FF888888</Color>
<Color x:Key="DisabledBorderLightColor-LS1">#FFAAAAAA</Color>
<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
<Style x:Key="LS1-MS" TargetType="ListBox">
<Setter Property="ItemContainerStyle" Value="{DynamicResource LSItem-LS1}"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="95" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border Name="Border" BorderThickness="1" CornerRadius="2">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlLightColor-LS1}" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor-LS1}" />
</Border.BorderBrush>
<ScrollViewer Margin="0" Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledControlLightColor-LS1}" />
</Setter.Value>
</Setter>
<Setter TargetName="Border" Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource DisabledBorderLightColor-LS1}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LSItem-LS1" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseEnterBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseLeaveFadeOut">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SelectBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="unSelectBcFadeOut">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.BorderBrush>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard3" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard" Storyboard="{StaticResource MouseEnterBC}"/>
</Trigger.EnterActions>
</Trigger>
<EventTrigger RoutedEvent="Selector.Selected">
<BeginStoryboard x:Name="SelectBC_BeginStoryboard2" Storyboard="{StaticResource SelectBC}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Selector.Unselected">
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard1" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
<StopStoryboard BeginStoryboardName="SelectBC_BeginStoryboard2"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MainWindow.Xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox Style="{DynamicResource LS1-MS}" Margin="42,10,72,10">
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
</ListBox>
</Grid>

Answer 1

You are never stopping the storyboards, so eventually they are all running.I have added file FillBehavior="Stop" in storyboard.You can set the FillBehavior of the Storyboards to Stop so that the Storyboard will stop setting the value after it completes.
<Style x:Key="LSItem-LS1" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseEnterBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseLeaveFadeOut" FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SelectBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="unSelectBcFadeOut" FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.BorderBrush>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard" Storyboard="{StaticResource MouseEnterBC}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard3" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="SelectBC_BeginStoryboard2" Storyboard="{StaticResource SelectBC}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseLeaveFadeOut}"></BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>