UWP How to get ListviewItem Currently clicked and

Question

I am developing UWP App, I have a Listview bind with a class, wherein upto 10 items. Listview have a DataTemplate and a Usercontrol is inside this DataTemplate.

I want to click on any item so the animation (storyboard) should start and the ColorBand should expand toward right and when I click on another item now the expanded (previously clicked) ColorBand should collapse and the current clicked item's ColorBand should expand.

This approach can be possible if I put this ColorBand inside the Listviewitem Style and use the Visual State Manager, but actually I need to put the border color and corner radius etc dynamically via class in runtime and also have the Edit option if the user want to change the color etc... so it must be via binding.

So I need to run animation on currently clicked item and the previously clicked item simultaneously. plz help, I m stuck due to this.

Answer 1

I think the most easiest way to get previously clicked item is via c# code with two properties. And than you can do with this item whatever you want. Use selection changed event and when it raise you should add this selected item to a new properties something like this:

public object PreviouslySelectedItem {get; set;}
public object CurrentlySelectedItem 
{
get;
set{
       PreviouslySelectedItem = CurrentlySelectedItem ;
       CurrentlySelectedItem = value;
    }
}

private async void Selectionchanged(object sender, SelectionChangedEventArgs args)
    {
        CurrentlySelectedItem = (sender as ListBox).SelectedItem;

        // some handling with null cases and etc.
        // now you can apply your animation on your two items
    }

Answer 2

<VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ColorBand}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="ExtraBold"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>

Using SelectionChanged method

     private async void Selectionchanged(object sender, SelectionChangedEventArgs args)
        {
        foreach(var item in args.AddedItems)
        {
ListViewItem item = (sender as ListView).ContainerFromItem(item) as ListViewItem;
    // you will get slected item here. Use that item to get listbox item
        }
    if(args.RemovedItems!=null)
    {
        foreach(var item in args.RemovedItems)
        {
    //You will get previosly selcted item here
ListViewItem item = (sender as ListView).ContainerFromItem(item) as ListViewItem
        }
    }

      }