1

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.

Zia Ur Rahman
  • 1,850
  • 1
  • 21
  • 30

2 Answers2

3
<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
        }
    }

      }
Archana
  • 3,213
  • 1
  • 15
  • 21
  • Try this. I have binded ColorBand value to background property. I ll post other method in a while – Archana Mar 11 '16 at 09:59
  • No. first of all the visual state is confusing where to use, so I left the visual state part, but the SelectionChanged method I used and the 2nd condition of args.RemovedItem is always null ... so it didn't work :( – Zia Ur Rahman Mar 11 '16 at 14:48
  • When you change the selection previously selected item will come in RemovedItem list. So first time it will be null. – Archana Mar 14 '16 at 04:29
  • Opps. I had written code for ListBox. I edited the answer for ListView.Please check now – Archana Mar 14 '16 at 04:50
  • That was not the prob, I have changed the Listbox to Listview but I put the debug point in removedItem condition but it always null and the debugger is not pointing/hitting the data inside RemovedItem Condition. :( – Zia Ur Rahman Mar 14 '16 at 08:12
  • OK, I have bind the values in Style of Listviewitem via this procedure {Binding Content.RowHeight, RelativeSource={RelativeSource TemplatedParent}}, and it worked. But regarding the Visualstate, I am using inside ListviewItem Style but the Selected and Unselected Visualstate is not working ... how can I get working via these two states in UWP. Please. As you have mentioned these two states but I have tried and even searched a lot but its not working ... Instead the PointerFocus and Unfocus visual/states working fine, but when we Lost Focus, even click outside the list the Color Band collapsed – Zia Ur Rahman Mar 14 '16 at 08:15
  • So, I need actually the animation via Selected and Unselected visualstates rather than Focus and Unfocus. :) – Zia Ur Rahman Mar 14 '16 at 08:19
  • Yes UWP Win10 VS2015 – Zia Ur Rahman Mar 14 '16 at 09:19
  • Oh. I was checking in windows phone 8.1 – Archana Mar 14 '16 at 09:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106208/discussion-between-user2354187-and-zia-ur-rahman). – Archana Mar 14 '16 at 09:24
  • Check this link https://msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx. I guess you visual state group for selected state is wrong – Archana Mar 14 '16 at 11:58
  • Yes, I have tested and it works ... as it doesn't solve my problem ... but regarding my question it works and this has been marked as Answer. And I am sorry due to my little mistake the RemovedItems was always null because there were If((sender as Listview).SelectedIndex == -1) { return } in SelectionChanged Event and so it made the RemovedItems always null. but after removing this line, it worked. Thanks. – Zia Ur Rahman Mar 16 '16 at 15:21
  • Thanks buddy, your such procedure is awesome, I applied it by my another question http://stackoverflow.com/questions/35983452/uwp-visualstates-selectionstates-selected-and-unselected-is-not-working-in-l, wherein you already had given the answer. 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:10
  • 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:55
0

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
    }
Shoxik
  • 119
  • 1
  • 7
  • But RemovedItem list will give the previously selected item. Why again use two extra properties for that? – Archana Mar 14 '16 at 04:55
  • I said that this is the most easiest way of course if you have knowledge about API you can use it too. Mostly when I know how to do what I need to do with complexity O(1) then I use my own logic because that's give to me the best practice and control over my code and if I have no Idea how to do what I need than I read some API docs – Shoxik Mar 14 '16 at 14:32