win universal app - UWP - VisualStates SelectionStates "Selected and Unselected" is not working in ListviewItem Style

Question

I am developing UWP Win10 VS2015 App, and using VisualStates in ListviewItem Styles ... I have animations/storyboard in the FocusStates and it works fine, but the problem is when we click outside the Listview so we Lost the Focus and then the animation ended.

Actually I need to start the animation on Selected visualState and end the animation on Unselected visualstate. The animation is working fine but only on PointerOver, PointerPressed, PointerFocused, Unfocused etc but I need it on Selected and Unselected visualstates.

When I click on ListviewItem the Colorband Expand to the Right and when I click on another Item the Previously focused ListviewItem's Colorband is Collapsed and the Currently focused Colorband is Expanded.. I have done this and it works fine on FocusStates Visualstates(PointerFocus/Unfocus) but the Problem is When I even click outside the Listview so the Colorband Collapsed because it Lost Focus and the Unfocus visualstate triggered...but I need this on Selected/Unselected visualstates, so that even when we click outside the Listview item it will not LostFocus until I clicked on another listview Item. Plz help.

The Storyboard for Colorband and all the Visualstates are inside the style code. As I told above that this code and animations working fine with the given Style Code, but if I remove the FocusStates ... it will not work on SelectionStates ... And I need it on SelectionStates.

Answer 1

Style for listview custom selected and unselected states

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="IsHoldingEnabled" Value="True"/>
            <Setter Property="Padding" Value="12,0,12,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
            <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid x:Name="ContentBorder"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CustomStates">
                                    <VisualState x:Name="Unselected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.3" From="60" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="colorBand" EnableDependentAnimation="True">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseOut"/>
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CustomSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.3" From="1" To="60" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="colorBand" EnableDependentAnimation="True">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseOut"/>
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                    </VisualState>
                                    <VisualState x:Name="PressedSelected">
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="colorBand" 
                                    Background="Red"                                    

                                    HorizontalAlignment="Left"
                                    Width="15" 
                                    Height="20" 
                                    RenderTransformOrigin="0.5,0.5">
                                <Border.RenderTransform>
                                    <CompositeTransform/>
                                </Border.RenderTransform>
                            </Border>
                            <!--<Rectangle x:Name="BorderBackground"
                    IsHitTestVisible="False"
                    Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                    Opacity="0"
                    Control.IsTemplateFocusTarget="True"/>-->
                            <Grid x:Name="ContentPresenterGrid"
              Background="Transparent"
              Margin="0,0,0,0">
                                <Grid.RenderTransform>
                                    <TranslateTransform x:Name="ContentPresenterTranslateTransform"/>
                                </Grid.RenderTransform>
                                <ContentPresenter x:Name="ContentPresenter"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Content="{TemplateBinding Content}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="{TemplateBinding Padding}"/>
                            </Grid>
                            <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
                          In the DataPlaceholder state, the Content is not loaded yet so we
                          approximate the size of the item using placeholder text. -->

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Code behind

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.AddedItems != null)
            {
                foreach (var item in e.AddedItems)
                {
                    Debug.WriteLine(item);
                    ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                    if (litem != null)
                    {
                        VisualStateManager.GoToState(litem, "CustomSelected", true);
                    }
                }
            }
            if (e.RemovedItems != null)
            {
                foreach (var item in e.RemovedItems)
                {
                    ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
                    if (litem != null)
                    {
                        VisualStateManager.GoToState(litem, "Unselected", true);
                    }
                }
            }

        }