Why the animation in "SelectedPointerOver" visual state of ListBoxItem will replay each time you move the mouse on it?

Question

I define a custom ListBoxItem style:

            <Style x:Key="MyListBoxItemStyle" TargetType="ListBoxItem">
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="UseSystemFocusVisuals" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Grid x:Name="LayoutRoot" Background="Transparent" BorderThickness="0" Padding="0,0,0,0" Height="42">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Disabled"/>
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="#BAE0FF"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Pressed"/>
                                        <VisualState x:Name="Selected">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="#BAE0FF"/>
                                                <Setter Target="SelectedRectangle.Fill" Value="Green"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="SelectedRectangleScaleTransform" Storyboard.TargetProperty="ScaleY"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="#BAE0FF"/>
                                                <Setter Target="SelectedRectangle.Fill" Value="Yellow"/>
                                                <Setter Target="SelectedRectangleScaleTransform.ScaleY" Value="1"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="#BAE0FF"/>
                                                <Setter Target="SelectedRectangle.Fill" Value="OrangeRed"/>
                                            </VisualState.Setters>
                                            <Storyboard FillBehavior="HoldEnd">
                                                <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="SelectedRectangleScaleTransform" Storyboard.TargetProperty="ScaleY"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPressed">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="#BAE0FF"/>
                                            </VisualState.Setters>
                                            <Storyboard FillBehavior="HoldEnd">
                                                <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="SelectedRectangleScaleTransform" Storyboard.TargetProperty="ScaleY"/>
                                            </Storyboard>
                                        </VisualState>

                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Width="4" Margin="0,4,0,4" Name="SelectedRectangle" Fill="Blue" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <ScaleTransform x:Name="SelectedRectangleScaleTransform" ScaleY="0"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <TextBlock Grid.Column="2" Text="{Binding Title}" VerticalAlignment="Center"></TextBlock>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

When you select an item, I will animate the "SelectedRectangle"

The first time you select an item, the animation is work as well

But if you move the mouse out of this item, or move in again the item, the animation will replay again

That's not I wanted!

The animation should be play just once when you select the item, after that, whatever you move the mouse in or out, the "SelectedRectangle" should keep it's last state(ScaleY=1).

How to fix?

Answer 1

Thanks!

But I finally figured out how visual state works, just put the Selected, SelectedPointerOver to visual state group call "SelectionStates", all visual state in this group are trigger only once, code:

            <Style x:Key="BINDefaultListBoxItemStyle" TargetType="ListBoxItem">
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="UseSystemFocusVisuals" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Grid x:Name="LayoutRoot" Background="Transparent" BorderThickness="0" Padding="0,0,0,0" Height="42">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Disabled"/>
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="LightBlue"/>
                                                <Setter Target="SelectedRectangle.Fill" Value="Red"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                        </VisualState>
                                    </VisualStateGroup>

                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetName="SelectedRectangleScaleTransform" Storyboard.TargetProperty="ScaleY"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="Blue"/>
                                                <Setter Target="SelectedRectangle.Fill" Value="Blue"/>
                                            </VisualState.Setters>
                                            <Storyboard FillBehavior="HoldEnd">
                                                <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetName="SelectedRectangleScaleTransform" Storyboard.TargetProperty="ScaleY"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="Blue"/>
                                                <Setter Target="SelectedRectangle.Fill" Value="Blue"/>
                                            </VisualState.Setters>
                                            <Storyboard FillBehavior="HoldEnd">
                                                <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetName="SelectedRectangleScaleTransform" Storyboard.TargetProperty="ScaleY"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="Blue"/>
                                                <Setter Target="Icon.Foreground" Value="Blue"/>
                                                <Setter Target="SelectedRectangleScaleTransform.ScaleY" Value="1"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPressed">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.Background" Value="Blue"/>
                                                <Setter Target="Icon.Foreground" Value="Blue"/>
                                                <Setter Target="SelectedRectangleScaleTransform.ScaleY" Value="1"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="40"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Width="4" Margin="0,4,0,4" Name="SelectedRectangle" Fill="Blue" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <ScaleTransform x:Name="SelectedRectangleScaleTransform" ScaleY="0"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <TextBlock HorizontalAlignment="Left" Grid.Column="1" Name="Icon" FontSize="24" Foreground="#8f989d" VerticalAlignment="Center" Text="{Binding Icon}" FontFamily="{StaticResource iconfont}"></TextBlock>
                                <TextBlock Grid.Column="2" Text="{Binding Title}" VerticalAlignment="Center"></TextBlock>
                                <!--Badge-->
                                <Grid Visibility="{Binding BadgeVisibility}" Grid.ColumnSpan="3" MinWidth="18" MinHeight="18" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0">
                                    <Ellipse Fill="Red"/>
                                    <TextBlock Text="{Binding Badge}" FontSize="12" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>