MVVM and UI animation

Greetings,

I'm looking for some tips on how to solve the following problem in an MVVM complient manner.

Scenario

Imagine the following landscape page:
On the left hand side we have a ListView that displays your favorite cats. Pressing its delete icon removes the cat from the list.
On the right hand side there is some information about the currently selected cat.


(Excuse my terrible drawing skills)

The problem

The ListView is bound to an ObservableCollection<CatModel>. Adding or removing cats to the collection automatically updates the ListView.
All of this is no problem.
However, when the user presses the delete icon I want there to be a fade out animation before the cat disappears from the ListView.
Additionally, the detail on the right hand side should also not update until the fade animation has completed.

I have tried a couple of ways but neither approach felt right to me.
I assume that there has to be a Triggersomewhere, but I can't seem to fit it all together.

Tagged:
Sign In or Register to comment.