.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Page Transition In Navigation Application in Silverlight

Posted By:Diptimaya Patra       Posted Date: March 30, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Page Transition In Navigation Application in Silverlight. In this article we will be seeing how can we make animation effect.


In my previous article on Navigation Application In Silverlight 3 we discussed about the features of it. There is no animation (or transition effect) while you load pages. Actually we can do this by adding TransitionalContentPresenter. In this article we will be seeing how can we make that effect.

Creating Silverlight Application

Open Visual Studio 2008 and Create a Silverlight Navigation Application.


  1. Open the Solution in Blend 3.

    Navigation in Silverlight 3 Navigation Application is handled by Navigation: Frame. After opening in Blend you can find the Frame in Object and Timeline pane.


    In Silverlight 3 a TransitioningContentControl is available. If we can use the control then we can achieve the transition effects.
  2. Select the ContentFrame in Object and Timeline Pane and Edit the Template and select Edit A Copy.


    Now you will be redirected to the Editing Template Workspace. You will find a Content Presenter, which presents the content of the Page.

  3. Now go ahead and delete this ContentPresenter from the Border.
  4. Search TransitionalContentPresenter from the Asset Library and add it to the Border. Remember to change the width and height of this control.


    For your reference the following figure will help you deciding the Layout of this TransitionalContentPresenter.

  5. Change the Content of TransitionalContentPresenter to "TemplateBinding Content" minus quotes.
Now go ahead and change the content of the related pages of your application to see the real transition effect.

The default Transition Effect is of Fade In and Fade Out. You can customize it by making TransitionalContentControl as a new Template. We will discuss about this in my coming articles.

Enjoy Coding.

Here is the XAML for your reference.

BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">


 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend