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.


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

Unable to display content. Adobe Flash is required.

Get the code here.

Read the whole article here.

Comments (0)

Skip to main content