Selected style overriden by MouseOver style

Question

I'm trying to style a ListBoxItem that the item is green when it is selected and lightgreen when the mouse is over the item.

This works, but when an item is selected and I move my mouse over that item, the selected style disappears. How can I fix this ?

<Style x:Key="{x:Type ListBoxItem}"
                TargetType="ListBoxItem">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="SnapsToDevicePixels"
                Value="true" />
            <Setter Property="OverridesDefaultStyle"
                Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="Border"
                                Margin="0,3,0,3"
                                SnapsToDevicePixels="true">
                            <Border.Background>
                                <SolidColorBrush Color="Transparent" />
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="Green" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Textblock"
                                                Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="White" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="LightGreen" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <TextBlock x:Name="Textblock" 
                                       FontFamily="Segoe UI" Foreground="{StaticResource AlmostWhite}" FontSize="15" Padding="5,7,5,7" VerticalAlignment="Center">
                                <ContentPresenter  />
                            </TextBlock>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

As @Novitchi S mentioned, it would be much simpler defining this Style using basic Triggers:

<Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="Green" />
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="LightGreen" />
        </Trigger>
    </Style.Triggers>
</Style>

Even if you really wanted to use a Storyboard, you could just add it into the Trigger.EnterActions section.

---

UPDATE >>>

There really is no need to use a MultiTrigger to achieve your requirement either. I probably didn't spot your requirement to keep the selected colour when the mouse is over the item... you just need to reverse the order of the Triggers... the latter one will 'override' the behaviour of the former one:

<Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="LightGreen" />
        </Trigger>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="Green" />
        </Trigger>
    </Style.Triggers>
</Style>

Answer 2

If using Triggers an option for you, then you could use MultiTriggers to say don't apply MouseOver color when the Item is Selected.

Below is the style with MultiTriggers, and it MouserOver won't override the background when Item is selected.

<Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="Green" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsSelected" Value="False" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="LightGreen" />
        </MultiTrigger>
    </Style.Triggers>
</Style>

Not sure, how you can achieve this with VSM, I will be watching this thread for a better answer.