Animation using PathListBox control in Silverlight

The PathListBox is new control introduced in Silverlight 4.0 for listing items in a various shapes like path, circle, arc, rectangle etc. This control is similar to traditional ListBox control which support data binding and display of one or more items at design time or dynamically at run time. The pathlistbox provides many properties like orienation, padding etc.

Watch Video |  Live Demo Download Source Code | Download Presentation

In this tutorial, we’ll create a simple animation using PathListBox Control..

Open Expression Blend Editor & Create a new project in Silverlight Application + Website.

Add a new shape  Ellipse in to the page.

Add a PathListBox control in to the page(PLB).

Drag & drop few images in to PLB control. (Press control to select multiple items from the project properties).

 Select PLB control from object & time line window.

Go to PLB control properties window and find out Layout Paths.

Click on select an object to use as a LayoutPath.

Select Ellipse shape as the LayoutPath

The images should show in circular layout path

Add a Projection for Ellipse  shape called PlaneProjection to rotate the Ellipse.

Add a StoryBoad control from object & time line window.

Switch to XAML version and write few lines of XAML code for animation purpose.

Add a Double Animation inside the StoryBoard control and set Target name & properties.

Add the following line of code in the Page Load method in order to start the animation.

Hit F5 and see the demo.

Watch Video |  Live Demo Download Source Code | Download Presentation

Hope this helps and If you have any comments, please feel free to write your feedback.


Silverlight:A Simple Image ZoomIn Animation

The article describes how we can create a simple Image zoom in and zoom out animation using Silverlight. The interesting thing in Silverlight is most of the animation control we can handle from markup language called XAML.  In order to achieve this we  have to use the StoryBoard & DoubleAnimation class. I am going to write a little XAML code on below.  You can download the  article source code from the bottom of the page.

Click here to view the “Live Demo”

<Storyboard x:Name=”storyboard” Storyboard.TargetName=”image1″>
<DoubleAnimation Storyboard.TargetProperty=”Width” To=”600″ Duration=”0:0:2″></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty=”Height” To=”600″ Duration=”0:0:5″></DoubleAnimation>

In the Storyboard mark up you can see a attribute called Storyboard.TargetName which is the target control name. Here I am going to use the Image control because that is the target control which we are doing the animation.  The next markup is DoubleAnimation we should mention what attribute we want to animate may be width or height or opacity that depends on the Target Control attributes. Here I am going to ZoomIn  the Image so I have to use width and height properties and finally duration will control the time delay.

<Grid x:Name=”LayoutRoot” Width=”610″ Height=”610″>
<Image Height=”40″ Source=”Tulips.jpg” HorizontalAlignment=”Left”   Name=”image1″  VerticalAlignment=”Top” Width=”50″ />
<Button Content=”Zoom In” Height=”23″ HorizontalAlignment=”Left” Margin=”12,469,0,0″ Name=”btnZoomIn” VerticalAlignment=”Top” Width=”75″ Click=”ZoomIn_Click” />
<Button Content=”Zoom Out” Height=”23″ HorizontalAlignment=”Left” Margin=”97,468,0,0″ Name=”btnZoomOut” VerticalAlignment=”Top” Width=”75″ Click=”ZoomOut_Click” />

The above XAML has a Image cotrol which simply binds the Image name to the source attribute and two buttons for zoomIn and zoomOut functionaly.

XAML code behind

private void ZoomIn_Click(object sender, RoutedEventArgs e)

private void ZoomOut_Click(object sender, RoutedEventArgs e)

The above method will have the functionality to start and stop the story board class.

That’s all we are ready to go now.. Live Demo

You can download the entire article from here or copy paste this URL  in to your browser.

Hope this help and If you have any comments, please feel free to write your feedback.