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.

Check this link. https://msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx. Visual state group for selected and unselected is wrong — Archana, Mar 14 '16 at 12:00
Hay @GraceFeng-MSFT, I have updated my question with screen shots and some more details in the end that what exactly I need. I have posted this via another question too but in different procedure ... so look into this and that too. thanks in advance. http://stackoverflow.com/questions/35933968/uwp-how-to-get-listviewitem-currently-clicked-and-previously-clicked/35937053?noredirect=1#comment59626228_35937053 — Zia Ur Rahman, Mar 15 '16 at 09:42
You mean that you want each listviewitems remain its style last time you click the item after you click outside of listview? — Grace Feng, Mar 15 '16 at 10:10
@ZiaUrRahman, is that too much if I ask for your sample? I tested your code just, and it will never be collapsed once I click it. It will be much easier if you share me a small demo to solve this problem. And I can see you've done a great job, I like your style in your pictures. — Grace Feng, Mar 15 '16 at 10:35
There is no unselected visual state in UWP. you have to write custom state and trigger that state in SelectoinChanged event for that particular item — Archana, Mar 15 '16 at 11:16
@GraceFeng-MSFT, I have updated the code to explain it a bit more ... see the Style and other code is updated, plz also read the last and 2nd last para below the screen shots. — Zia Ur Rahman, Mar 15 '16 at 11:42

score 2 · Accepted Answer · edited Mar 17 '16 at 09:55

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);
                    }
                }
            }

        }

You have told RemovedItem list is null. I have checked in windows 10 its working for me. Please post listview control code to check the problem — Archana, Mar 15 '16 at 11:40
thanks for you interest ... the code of Style I have checked is not working ... have u created the CustomStates for demo OR this is actual part of visualstate? And OK, I will share the SelectionChangedevent code too for RemovedItem a bit later. Thanks. — Zia Ur Rahman, Mar 15 '16 at 11:55
I have created it,its not the actual part of visual state of listview. It will only work when you change the visual state in code behind — Archana, Mar 15 '16 at 11:58
Please check the selection changed event code. Its working for me. e.RemovedItems wont be null — Archana, Mar 15 '16 at 12:01
Yes, you are right the e.RemovedItems won't be null ... that was my mistake ... but plz guide me regarding the custom OR SelectionStates Visualstates ... I am stuck in this. — Zia Ur Rahman, Mar 16 '16 at 15:26
Thanks. You are awesome Mr. @user2354187, I didn't see the last part of your answer and just tested the XAML part ... this solved my problem. You are great. thanks buddy. +1 — Zia Ur Rahman, Mar 16 '16 at 16:46
this is infact a great experience that how would we access/start visualstate in code behind, even if it located in Style too. Great effort. thanks. — Zia Ur Rahman, Mar 16 '16 at 16:48
Thanks buddy, your such procedure is awesome, I applied it and it worked You are great ... I was stuck for the last 4 days, but Alhamdulillah now it works fine. thanks. — Zia Ur Rahman, Mar 16 '16 at 17:18
I edited your answer just separate the XAML part and .cs part, and also put a condition that if (litem != null) { VisualStateManager.GoToState(litem, "CustomSelected", true); } :) — Zia Ur Rahman, Mar 16 '16 at 17:19
Hay @Archana, plz look into this question. http://stackoverflow.com/questions/36127597/how-to-select-rang-of-dates-on-finger-slide-on-calendar-control-uwp-win10-vs20 — Zia Ur Rahman, Mar 21 '16 at 09:54
@Archana I have another question http://stackoverflow.com/questions/43461819/the-listviewitem-style-cant-trigger-unselected — lindexi, Apr 18 '17 at 00:47

score 1 · Answer 2 · answered Mar 16 '17 at 03:37

It seems that RemovedItems will be null if you have implemented ISelectionInfo. In that case you should save the removed item in DeselectRange and then access it in SelectionChanged (which is called after DeselectRange).

If you do not have the custom visual states that are discussed above, then you would use VisualStateManager.GoToState(lvi, "Normal", true). This will remove the highlight from the ListViewItem (lvi).

This seems to be a bug in ListView. It does not check the selection state of a selected ListViewItem after clicking on another control outside of ListView and then selecting a new entry in the ListView.

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

2 Answers2

Linked