Saturday, May 8, 2010

SilverLight 3 TransitionContentControl

In this short post I will show you how you can use the transition content control of silverlight 3. When I have used it I really like the functionality of the transition content control as it provide some basic animation when changing the content of the control.Transition content control is used to show a single piece of content and when that content changes performs a transition animation.Below is the output of the example I have used for the transition content control.
In this example I have used the Content Template property of the transition content control and design the display area of my information. Here you can see that I have used to display the image of the person which is displayed here.

I have used the customer class which have many attributes of the customer like company name, contact name, contact title,address, city, postal code, country, phone and fax. The display of the each property is in following order, First is the company name at the top or you can say at the header of the card, then the contact person name , then contact person title, then country, city, and after that I have also used the label with each property.
Next I have two buttons control one is the next and second one is the previous. When the next button is click then the next record is shown and the for previous the records are shown in reverse order.
In click event of the both the next and previous button I have use the Transition property of the control which is used to gets or sets the name of the transition to use. These correspond directly to the VisualStates inside the PresentationStates group.For the next button click I have used the UpTransition string and for previous button click I have use DownTransition string name. And In each of button click I have call the function GetCustomerRecord which will return the next/previous customer record depending on the value of the Boolean type parameter. True mean next record and false mean previous record. For this function I have used counter which will increment for next record and decrement for previous record. And each time it is called it will return single record from customerRecord list which is initialize when the page is loaded. The return value which is a customer record is assigned to the content of the transition content control which will bind each of the control on it template to new values.Hope you get some starting point about the transition content control.You can download the source code from here
All and any comments / bugs / suggestions are welcomed!

3 comments:

Anonymous said...

I don't see a running sample.. just the source.

Asim Sajjad said...

You can download the source code and run that source code.

Arif hussain said...

Its very good transition effect. It will be appreciated if it was explained step by step to build the transition effect