Here, we use one of Telerik’s popular controls, the RadDataboundListBox. If you’re not familiar with Telerik Controls, and you do .NET work, you should check them out. I believe they have a trial version for their Windows Phone controls, if you would like to preview. This short tutorial is intended for new users of these controls. Click images to enlarge/view code.
To get started, I’ll create a standard Windows Phone project in Visual Studio and I’ll need to add references to the files highlighted below.
Now I’ll place a Databound Listbox on the MainPage.xaml. The best way to work with the Telerik controls is in Blend. So I’ll open the project in Blend, and add the following namespaces in xaml:
Next, I’ll drag the RadDataboundListBox control from the Toolbox, onto my MainPage. Now in xaml, we need to add an animation to this list box. For this example I created a simple RSS reader to populate the list box. You’ll need to manually manipulate the XAML after placing the Listbox on the page.
To add the animation, we implement the telerikPrimitives:RadDataBoundListBox.ItemRemovedAnimation and define that using the RadMoveAnimation. They have numerous other types of built-in animations that we could use as well, such as Fade, Move and Fade, Scale, Slide, and others. It’s easy to implement some pretty cool effects with their tools.
So here is an example as to how to setup the animation. Be sure to name the animation.
In this example, we just create kind of a slide-out animation. But with the RadMoveAnimation, you can have some fun playing around the various start/end (x , y) points for different effects.
In the code-behind, I use the Tap event to remove the selected ListBox Item, which automatically plays the animation.
So there’s an example of how to very quickly implement a nice visual effect for each item when it’s removed from the listbox.
