Page Navigation for Silverlight 2 RC0

Hi my name is Boryana Miloshevska and  I’m a member of  Telerik`s Silverlight team.
This is my first blog post and it is about the new RadPageNavigation framework that we just released  for Silverlight 2 RC0.

RadPageNavigation is a framework that allows you to easily add navigation service to your application.

To do that you can use the provided RadPage, RadFrame, RadFrameContainer and NavigationService classes, or you can use your own classes to implement the IFrame and ITransition interfaces. The framework is 100%  compatible with the WPF navigation service. Navigation between pages is supported. You can also use frames inside each page and to navigate in the frame (very similar to the HTML iframe). Full history journal for backward/forward is available as well as Deep Linking support (which means that now you can provide a link directly to every Page from your application). In my next blog post I will blog in details about RadPageNavigation deep linking.

NavigationService is the most important class in this framework. In order to perform page navigation you can use one of the following methods:

• Navigate(string) –navigate using string representing RadPage name or fullname.
• Navigate(IFrame)- navigate using string representing IFrame instance.
• GoForward()- If there is items in the ForwordHistory then navigate to last item.
• GoBack()-If there is items in the FrameHistory then navigate to last item.
• LoadFrames(Stream assemblyStream, string initialPagePath) – allows users to load RadPages from different assemblies.
• GetPageByName(Assembly targetAssembly, string frameType)- return RadPage instance using it`s name.
• GetPageByFullName(Assembly targetAssembly, string frameType)- return RadPage instance using it`s fullname.
• PerformTransition(IFrame previousFrame, IFrame nextFrame)-add animation effect between page navigation.By default is uses DefaultTransition but you can set Transition property to SlideTransition or FadeTransition.

In order to implement Deep Linking you can use:
HtmlPage.Window.CurrentBookmark = SelectedPage.GetType().Name or you can use   NavigateToUri(RadFrame frame, Panel pageContent, RadPage currentPage)  method.
NavigationService  also has Navigating event that is raised when   Navigate, GoBack or GoForward is called.
If you prefer not to use NavigationService you may call RadFrame`s Navigate method  or SetSource property and implement the same functionality.

• Navigate(IFrame)
• Navigate(IFrame, ITransition)
• Navigate(string, ITransition)
• Navigate(string)
• Setsource

Another important part from the framework is RadFrameContainer. If you want to use RaFrames or any animation Transition you  must place each RadFrame or RadPage in RadframeContainer.

This tutorial demonstrates how to create a PageNavigation example using nothing more than few RadPages and RadFrameContainers. Here is the final result:

http://demos.telerik.com/silverlight/cvexample

To start off, create a new Silverlight project and call it CvExample. Once you have the project created go ahead and add a reference to the Telerik.Windows.Controls.dll. At the top of your main UserControl, add a namespace in order to use the dll. Next thing you need to do is changing the UserControl with RadPage:

In XAML:

 

In Code-Behind:

 

In exactly the same way add another six RadPages for our CvExampl  and name it in that way:
MainPage, AboutPage, WorkExperiencePage, EducationPage, QualificationPage and SkilsPage.
In order to perform navigation between pages you need an instance of NavigationService class. Open App.xaml.cs , set RadFrameContainer as application RootVisual and call NavigationService`s Navigate method:

In this “CVexample” we have 3 main pages for navigation as RootVisual and 4 pages that are used for navigation in MainPage RadFrameContainer.
Next thing we need to do is adding some content in the pages. It is important to add RadFrameContainer in MainPage in order to have navigation.

 

After you have done all this operations the one thing that is left is calling NavigationService.
Each time you want to navigate from one page to another you have to call NavigationService’s Navigate method. To do this first obtain an instance of NavigationService and passing desired target navigation container in its constructor.

 

If you want just a simple navigation without any animation transitions between pages just call for example
service.Navigate(new AboutPage());.
The other choice is to use RadPageNavigation FadeTransition or SlideTransition.
Slide Effect:

FadeEffect:

Setting one of this transition means that tou tell NavigationService where to navigate the page , how long will
 be the animation effect and in SlideTransitio you can also select Up/Down/Left/Right Directons.

 

Download the source of the project:

CVExample.zip(Change the extention to .zip and unzip it, once you save it locally)