Implementing a Telerik Databound Listbox with Item animation on Windows Phone 7

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s