(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

The Silverlight Navigation Framework

(15 votes)
Martin Mihaylov
>
Martin Mihaylov
Joined Oct 29, 2007
Articles:   50
Comments:   70
More Articles
31 comments   /   posted on Mar 30, 2009

This article is compatible with the latest version of Silverlight.


Introduction

With Silverlight 3 a lot of new goodies were introduced and one of them was the navigation framework. It allows us to easily implement navigation between the newly introduced Page controls in a Silverlight application, interacts with the Browser History journal and provides us with Uri mapping. To learn more about these features read on the article.

For this article the demo will be the Mini SilverlightShow application, which I used not a long time ago as a demo to my article about the Telerik's RadPageNavigation control. It is now recreated using the Silverlight Navigation Framework and is known under the codename "Mini Silverlight3Show". :) 

Live demo | Source code

Silverlight Navigation Application template

When you try to create new project, you'll notice that there is a new template in the Silverlight section - the Silverlight Navigation Application. This template contains a sample application that has some controls included and some basic UI. You'll notice that it has a folder named "Views" that contains the pages of the application and the MainPage.xaml is used as master page.

You can easily adjust it to a base for your own application or you can of course start from the scratch (there is nothing special in the template that will cause you problems if you choose to start from the Silverlight Application template).

Frame and Page controls

Let's first start with the two controls that the framework introduces to us.

Frame

The Frame is the control that will handle the validation and is the container for the Page control.

Here are some properties and methods that may be considered as most important:

  • Source - this property provides the Uri of the page that will be opened in the frame, when the frame is loaded. For example if we have a Home.xaml page in the Views folder (don't forget the "/" at the beginning):
<navigation:Frame x:Name="MainContent" Source="/Views/Home.xaml" />
  • Navigate( Uri uri ) - with this method we can navigate through the pages, just pass the correct uri and don't forget the "/" and the Uri Kind:
this.MainContent.Navigate( new Uri( "/Views/Home.xaml", UriKind.Relative ) );
  • JournalOwnership - this property determines if the Frame should use its own journal or the one of the browser to store the navigation history. We'll take a look at it a little bit later.

There are also a lot of useful events that may come in handy: Navigating, Navigated, NavigationFailed, NavigationStopped. Also the frame has its own history journal and you are able to navigate through it using the GoBack() and the GoForward() methods. Later we'll talk about the Browser History journal and the Frame control.

Page

The page is not much different than the UserControl, except that it can be loaded in the Frame control. The most interesting here is the Title property, which sets the title of the page in the browser:

<navigation:Page x:Class="MiniSilverlight3Show.Views.Home" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title="Mini Silverlight3Show - Home">

Cool, isn't it?

Also we are going to take a closer look to the NavigationService and the NavigationContext properties. The NavigationService allows us to get access to the Frame control that has navigated to this page and via the NavigationContext we can get information about the query string.

Browser History integration

By default the Frame control integrates with the Browser History journal, which means that every page, that the Frame control navigates to, is recorded in that journal:

Now it's time to take look at the JournalOwnership property of the Frame control. It has three values:

  • Automatic - If the browser allows, the navigation history will be recorded in its journal, if not - it will be recorded only in the journal of the Frame control.
  • OwnsJournal - the Frame control will store the navigation history only in its own history journal.
  • UsesParentJournal - the Frame will use the journal of the parent Frame control and the JournalOwnership settings of the parent control are then applied. If there is no parent Frame control, the Browser History journal is used.

If you don't want your Frame to integrate with the browser, to use the built-in history journal and to implement your own logic around the go-back and go-forward actions, this property allows you to do so.

NavigationService and NavigationContext

Let's take a look at the following case: We have navigated to the News page and the latest news has loaded. We want to click on news and to navigate to a page that will display its content. The specific here is that we want to place navigation logic into a page that is loaded in the Frame and has no direct access to the Frame control in the master page.

Here comes the NavigationService property of the Page control, that contains information about the Frame that has navigated to this page, and allows us to directly navigate via the same Frame:

this.NavigationService.Navigate( new Uri( String.Format( "/Views/Item.xaml?title={0}&type={1}", ...), UriKind.Relative ) );

The NavigationContext allows us to access the query string of the current page. For example if I pass some parameters, like the title and the type of my item above, I can use it to get them from the query string:

if ( this.NavigationContext.QueryString.ContainsKey( "type" ) 
    && this.NavigationContext.QueryString.ContainsKey( "title" ) )
{
    string title = this.NavigationContext.QueryString[ "title" ];
    string type = this.NavigationContext.QueryString[ "type" ];
}

Urls and DeepLinking

If you have clicked a couple of links in the demo you should have noticed that the url changes according to where you navigate. When navigating, the Frame generates appropriate urls and query strings, so you'd be able to access them via the NavigationContext property and use them further in the context of the current page. Also if you try to copy and paste the url into a new page, when the Silverlight application loads, the Frame control will navigate to the exact page, specified in the url. This means that Silverlight finally supports DeepLinking and allows us to improve the SEO for our applications.

The UriMapper

Now when you have already seen the generated urls, you'd probably say: "They don't look friendly enough." or "There is information in them that I don't want the user to be able to see." There is a solution to this problem too! I introduce you the UriMapper, which allows us to map the urls and display much more user friendly ones in the browser.

In the App.xaml add the following namespace, which contains the UriMapper control:

<Application   
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:navigationCore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
    x:Class="MiniSilverlight3Show.App">

In the resources I add the following UriMapper with the following mappings:

<navigationCore:UriMapper x:Key="MyMapper">
    <navigationCore:UriMapping Uri="Home" MappedUri="/Views/Home.xaml" />
    <navigationCore:UriMapping Uri="News" MappedUri="/Views/Items.xaml?type=news" />
    <navigationCore:UriMapping Uri="Articles" MappedUri="/Views/Items.xaml?type=article" />
    <navigationCore:UriMapping Uri="News/{title}" MappedUri="/Views/Item.xaml?type=news&amp;title={title}" />
    <navigationCore:UriMapping Uri="Articles/{title}" MappedUri="/Views/Item.xaml?type=article&amp;title={title}" />
</navigationCore:UriMapper>

The Uri property determines the url that is displayed by the browser and that must be used to navigate in the code and the MappedUri property determines the url that is mapped when the Frame navigates to the specific page. Also notice the mappings for the Item.xaml page, where the title is not a constant. I define it in both the Uri and the MappedUri properties, and the rest of job a leave to the UriMapper. Finally we provide it to our Frame control via the UriMapper proeprty:

<navigation:Frame x:Name="MainContent"
                  ...
                  UriMapper="{StaticResource MyMapper}">

Conclusion

In this article we have made a simple overview of one of the greatest (for me) features of Silverlight. The Navigation framework allows us to easily navigate between pages, without writing a lot of code or creating custom controls; it supports Browser History integration and DeepLinking, displays adequate urls in the browser and allows us to map them. Actually what more could you want? :)

References

http://silverlight.net/learn/learnvideo.aspx?video=187319 - A nice video by Tim Heuer about the Silverlight 3 Navigation framework

More on Uri Routing by Tim Heuer

Silverlight 3 Navigation API by Thanigainathan Siranjeevi

Silverlight 3: Navigation Application Template Extra themes by Brad Abrams


Subscribe

Comments

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by timheuer on Mar 30, 2009 16:22
    Martin, you are correct in the beta it must be named 'uriMapper' to work :-)
  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Steve on Apr 21, 2009 13:31
    I call this:NavigationService.Navigate(new Uri("/Views/HomePage.xaml", UriKind.Relative));

     from the 'About' page and it doesn't goto the Home Page ?

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Adam on Apr 23, 2009 02:14
    Is NavigationService.Navigate(new Uri("/Views/HomePage.htm", UriKind.Relative)) or Is NavigationService.Navigate(new Uri(http://www.google.com/, UriKind.Absolute)) allowed?
  • -_-

    Limitation: The Silverlight 3 Navigation Framework


    posted by ruddy on Jun 10, 2009 04:12

    It's true only one frame can be used!

    (But there's no error in create another frame, It's bug or )

  • Enrai

    RE: The Silverlight 3 Navigation Framework


    posted by Enrai on Jun 10, 2009 04:48
    @ Steve I cannot reproduce that. I have created a new Navigation application, in the AboutPage.xaml I have added a Button that on click calls NavigationService.Navigate(new Uri("/Views/HomePage.xaml", UriKind.Relative)) and it navigates properly to the HomePage.

     @ Adam For the first case you will get the following error message: "No XAML was found at the location '/Views/Home1.htm'" and for the second: "Navigation is only supported to relative Uri's that are fragments, or begin with '/' or which contain ';component/'". So nor of these is possible. :)

    @ ruddy I have managed to add a second frame in my MainPage.xaml, but no matter what it behaves the same as the first one. Apperantly the Frame behaviour is the same for the hosting page and it is inherited from the first Frame in the visual tree. In the other case I have added to the AboutPage.xaml and it worked properly, without inheriting anything from the Frame in the MainPage.xaml. Hope that helps! :)

    P.S. Sorry for the late answers, but for the last month I was buried in some projects and could not get to answer the comments here.


  • -_-

    RE: The Silverlight 3 Navigation Framework - xaml query string


    posted by Mark Sutton on Jun 29, 2009 16:48
    I was wondering how you pick up the query string arguments for  the xaml pages, for example:
    MappedUri="/Views/Items.xaml?type=news"

    Is type=news accessible in Items.xaml.cs?
  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Enrai on Jun 29, 2009 16:54
    The NavigationContext property of the Page class allows you to access this QueryString and the parameters defined in it. Look again at the NavigationService and NavigationContext section of the article and if you have any question, don't hesitate to ask again! ;)

    P.S. I forgot to sign in ... :)
  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by malbaladejo on Jul 19, 2009 10:42

    In the final SL3 release we have to put the uriMapper's name in the navigation:Frame :

    <

     

    navigation:Frame x:Name="MainContent" NavigationFailed="MainContent_NavigationFailed"
    HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
    Grid.Row="2" Grid.Column="0"
    UriMapper="{StaticResource uriMapper}"
    Margin="30,0,30,0" Source="Home" />

     

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Sepp on Jul 22, 2009 14:13

    Hi,

    is there a opportunity to give information back from page control to frame control?

    look at my page www.born2codebasic.net

    in frame control I do have a link to 'Sing in'. After singning in I want to change the text (or state) to log out. And give the link to my demo shop and so on free. Does anybody have an idea how I can solve this?

    thank you

    Sepp

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by ro on Aug 02, 2009 23:40
    Is there a version of the demo app that works with the released Silverlight 3 version? When I open the sample code, I get numerous errors.
  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Juan on Dec 23, 2009 23:13
    Is there a way to dispose the previous page (xaml) after the frame loads the next one? I mean... If we use the same frame for every pages, eventually it will have all the pages loaded in memory, right?

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Mladen on Dec 24, 2009 17:58
    Hi, good job, we realy do need something like this framework.

    I've tried to analyze memory footprint on default empty template project.

    Is it possible that page is constructed each time I come to this page and it stays in memory forever?

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Mladen on Dec 24, 2009 18:00
    In previous post I wanted to say: each time I come to page, new instance of page is created. And it stays in memory forever?
  • sl_Nick

    RE: The Silverlight 3 Navigation Framework


    posted by sl_Nick on Jan 14, 2010 02:09

    Hi,

    Does this.NavigationService.Navigate work inside the UserControl page <UserControl x:Class="Test2.MainPage". ?

    The this.NavigationService.Navigate is not available when I type it in the UserControl page. Is there a work around solution?

    TIA

    Nick

     

     

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Ashok N on Jan 22, 2010 08:02

    Can you please give me a layout with -
    1. Header.
    2. Left Navigation (Collapsible Menu)
    3. Content Page. (It should change as per the click on Collapsible Menu item).
    4. Footer (with Current Content Page Name).
    5. One Full Screen Button.
    Can you please send me the above functionality ASAP. I have an urgent requirement. All should be in Silverlight Application only.

    |--------------------------------------------------------|
    |            Header.xaml                                 |
    |--------------------------------------------------------|
    |                      |                                 |
    |left.xaml             |            content.xaml         |
    |                      |                                 |
    |Full Screen Btn|                                        |
    |--------------------------------------------------------|
    |              footer.xaml                               |
    |--------------------------------------------------------|

     

    my mail id ashok.just4u@gmail.com

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Adriana Ferreira on May 09, 2010 18:51

    Basics of navigation:Frame in Microsoft Expression Blend 3 Project (silverlight)

     

    I just want to do a very basic thing: to show two different XAML pages, say, Page1.xaml and Page2.xaml in two lateral areas of the MainPage.xaml.

    As far as I understood from the manual, the container for the “Page” element is Frame. So, the code in the MainPage.xaml is the following:

    <UserControl

                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:local="clr-namespace:TesteFrameWork"

                    x:Class="TesteFrameWork.MainPage"

                    Width="640" Height="480">

     

                    <Grid x:Name="LayoutRoot" Background="White">

                                   <Grid.RowDefinitions>

                                                   <RowDefinition/>

                                   </Grid.RowDefinitions>

                                   <Grid.ColumnDefinitions>

                                                   <ColumnDefinition/>

                                   </Grid.ColumnDefinitions>

                                   <navigation:Frame HorizontalAlignment="Left" Margin="0,0,0,8" Width="177" Source="/Page1.xaml"/>

                                    <TextBlock Height="49" Margin="216,73,313,0" VerticalAlignment="Top" Text="Some text" TextWrapping="Wrap"/>

                                   <navigation:Frame HorizontalAlignment="Right" Width="186" Source="/Page2.xaml"/>

                    </Grid>

    </UserControl>

    Unfortunately, the system fails to show the second page Page2.xaml, showing Page1.xaml instead.

    Is there any way to walk around this difficulty -- use a container other than Frame or something else???

  • -_-

    The Silverlight 3 Navigation Framework


    posted by Hansraj rathva on May 21, 2010 14:27

    Can you please give me a layout with -
    1. Header.
    2. Left Navigation (Collapsible Menu)
    3. Content Page. (It should change as per the click on Collapsible Menu item).
    4. Footer (with Current Content Page Name).
    5. One Full Screen Button.
    Can you please send me the above functionality ASAP. I have an urgent requirement. All should be in Silverlight Application only.

    |--------------------------------------------------------|
    |            Header.xaml                                 |
    |--------------------------------------------------------|
    |                      |                                 |
    |left.xaml             |            content.xaml         |
    |                      |                                 |
    |Full Screen Btn|                                        |
    |--------------------------------------------------------|
    |              footer.xaml                               |
    |--------------------------------------------------------|

    my email id : hansraj@promactinfotech.co.in

     

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by RSL on May 31, 2010 17:33
    Very cool very good!! i rate it 5!
  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Mayank Taneja on Oct 06, 2010 14:07

    hey Sepp

    can u please send me the code for ur page....its really nice...i've been lookin on for this feature for quite sumtym now....

  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Mayank Taneja on Oct 06, 2010 14:08
    email id is :    mayanktaneja@hotmail.com
  • -_-

    RE: The Silverlight 3 Navigation Framework


    posted by Hash on Nov 19, 2010 17:13
    Thanks Martin .. Very neat description of the things.
  • lnikolov

    RE: The Silverlight Navigation Framework


    posted by lnikolov on Dec 22, 2010 18:03
    The article has been updated to the latest version of Silverlight and Visual Studio.
  • -_-

    RE: The Silverlight Navigation Framework


    posted by richw23 on Mar 11, 2011 05:47
    Thanks, just the right amount of detail to go with the well-written code.
  • -_-

    RE: The Silverlight Navigation Framework


    posted by DR on Apr 15, 2011 21:27

    Can refer to the content other than XAML, (ex. html) in frame navigation.

     

    DR

  • -_-

    RE: The Silverlight Navigation Framework


    posted by Pankaj Chamria on Apr 28, 2011 08:28

    Excellent article! Really helped me understand Navigation in SL

  • -_-

    RE: The Silverlight Navigation Framework


    posted by Chris on May 04, 2011 11:58

    How can I do "destroy" for a page when user navigate to another page ?

    I need this because dynamics objects are creating in my Page1 constructor and error occurs when user navigate to Page2 and return to Page1 ("La propriété 'System.Windows.Controls.ContentControl.Content' est définie plusieurs fois" => 'System.Windows.Controls.ContentControl.Content' property is define more on time)

  • weitzhandler

    Re: The Silverlight Navigation Framework


    posted by weitzhandler on May 22, 2012 06:01

    Pity UriMapping is sealed.

    In my scenario I've derived and created my custom UriMapper, but I want the UriMapping to have an additional property to be able to set a mapping to be remapped.

    i.e. first from {contacts} to ?type=contact, and then attach all other parameters.

    The current implementation of UriMapper is verbose and not too efficient, hope to see it improved.

  • -_-

    Re: The Silverlight Navigation Framework


    posted by on Jul 05, 2014 05:33
    The highest price achieved in the condo is $2,950 psf between the November 2012 and March 2013 period. Generally, Marina Collection units have been transacting at higher prices as they enjoy a better facing. north park info
  • theterace

    Re: The Silverlight Navigation Framework


    posted by theterace on Jul 15, 2014 07:43
    The indicative price for the unit is $6-6.5 million, which reflects about $2,096-$2,270 psf based on the unit's strata area of 2,863 sq ft. Terrace EC
  • -_-

    Re: The Silverlight Navigation Framework


    posted by on Jul 17, 2014 10:44
    This unit land price is believed to be similar to the last round, when the property was offered for sale through a tender exercise that closed last July. yishun new ec
  • -_-

    Re: The Silverlight Navigation Framework


    posted by on Aug 06, 2014 11:40
    But this scheme is now under review following Monday's announcement, said the BCA and Urban Redevelopment Authority yesterday. They added that any revisions to the scheme could take effect in the second half of the year. yuan ching road ec

Add Comment

Login to comment:
  *      *