Mango Sample: Delete Dramatically

In a previous post I walked through the five must-have animations for a Windows Phone application. Since then, some readers have offered a 6th – the “Delete from a List” animation.

This animation is also a great opportunity to tout the virtues of the ObservableCollection. The Observable Collection is a standard Collection that has events tied to the Add and Remove operations.

These events are automatically subscribed to in XAML and allow the UI to keep up-to-date with the back-end changes being made to the data source.

Specifically, it implements the INotifyCollectionChanged interface.

MSDN: You can enumerate over any collection that implements the IEnumerable interface. However, to set up dynamic bindings so that insertions or deletions in the collection update the UI automatically, the collection must implement theINotifyCollectionChanged interface. This interface exposes the CollectionChanged event, an event that should be raised whenever the underlying collection changes.

Animation is not Enough

However you visually decide to remove an item from a list, using Opacity, a ScaleTransform, or some other trick, the job is not complete until the data is actually removed from the underlying data.

As a result of this, a pure-XAML storyboard is not going to be enough. Not only will it be far more complex, but only code-behind will be able to remove the item from the collection.

Opacity

In the following video, I walk through how to create an animation on the ListBoxItem’s Opacity property.

Get the code here.

Using ScaleTransform

In the following video, I walk through how to create an animation on a ScaleTransform’s ScaleX and Y properties.

Get the code here.

Conclusion

In all reality, there is no standard that I can see for this animation. Let your creative juices flow, with these caveats:

1. Don’t over-do it – animations can be annoying if you try to hard
2. Don’t take too long – users like animations, but only for a split second

I can’t say enough how important animations are to your application.

Remember, we are working against the UNINSTALL button – so pour on the pride of ownership. Do good.

Best of luck!