Geeks With Blogs
Peter Tweed Exploring and explaining the mysteries of .NET

OK so with the release of 3, I am in catch up mode on the updated functionality.  My first exploration is into the navigation functionality that allows Silverlight 3 apps to take advantage of the Back and Forward buttons in the browser to navigate browsing history of the Silverlight app as well as URL mapping among other things.


In this post I am covering how to add navigation to an existing application.




1.       Create a new Silverlight application

2.       Add a reference to the System.Windows.Controls.Navigation to the Silverlight project

3.       Add the following namespace references to the MainPage.xaml file in the Silverlight project





4.       Add the following controls to the layout root grid in MainPage.xaml


        <StackPanel Orientation="Vertical" >

            <nav:Frame Source="/1" x:Name="NavFrame" Height="200" Width="200" NavigationFailed="NavFrame_NavigationFailed">


                    <urimapper:UriMapper >

                        <urimapper:UriMapping Uri="/" MappedUri="/First.xaml"/>

                        <urimapper:UriMapping Uri="/1" MappedUri="/First.xaml"/>

                        <urimapper:UriMapping Uri="/2" MappedUri="/Second.xaml"/>




            <HyperlinkButton x:Name="Link1" NavigateUri="/1" TargetName="NavFrame" Content="First Page"/>

            <HyperlinkButton x:Name="Link2" NavigateUri="/2" TargetName="NavFrame" Content="Second Page"/>



The StackPanel contains a navigation frame; this is the container control that will hold the content loaded from navigation pages. We provide the navigation frame a name so that the Hyperlink buttons can navigate to navigation pages that are targeted to this named navigation page.  The source attribute of the navigation frame defines the uri for the content that is loaded into the frame when the frame is first displayed.


The UriMapper control allows declarative definition of the Uri mapping rules for the frame in which it is contained.  The urimapper rules are matched against the NavigateUri targeted frame in the order in which they are declared in the xaml.  So the first rule matched will be used to map to a Uri.  In the above example the / and /1 Uris both map to /First.xaml.


Note the source attribute of the navigation frame is set to /1, so when first displayed this Uri maps to /First.xaml and it is displayed in the frame.


The two HyperlinkButton controls at the end of the StackPanel define the NavigateUri that will be navigated to and the TargetName – the name of the navigation frame that will display the navigated to content.


5.       Add a navigation page to your Silverlight project called First.xaml



6.       Change out the layout root grid in First.xaml with the following xaml


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

        <TextBlock Text="FIRST" />



This changes the background color to red and adds the text ‘FIRST’ to identify the first page.


7.       Add a second navigation page to your Silverlight project called Second.xaml

8.       Change out the layout root grid in Second.xaml with the following xaml


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

        <TextBlock Text="second" />



This changes the background color to blue and adds the text ‘second’ to identify the first page.


9.       Build and run the application



The First.xaml page is displayed.


10.   Click on the Second Page hyperlink at the bottom of the page



The Second.xaml page is displayed.


11.   Click the back button – the First.xaml page will be displayed

12.   Click the forward button – the Second.xaml page will be displayed.


Congratulations you have implemented Silverlight 3 navigation into your own application.

What have we done?

We have added a navigation frame control and defined the navigation mappings for the frame.

We have added two navigation pages to be displayed in the navigation frame.

We have added the hyperlink buttons that invoke the navigation via navigation Uris.

We have seen the browser navigation buttons used to navigate the browser history linked to the navigation frame.


Silverlight 3 provides a very simple mechanism to include page level navigation control integrated with the browser history.  This adds a very useful tool in building true RIAs that integrate nicely with the browser environment.

Posted on Friday, July 24, 2009 11:54 PM Silverlight | Back to top

Comments on this post: Navigation in Silverlight 3

# re: Navigation in Silverlight 3
Requesting Gravatar...
how to perform navigation using the button control in silverlight?
Left by pes on Feb 27, 2010 6:09 AM

Your comment:
 (will show your gravatar)

Copyright © PeterTweed | Powered by: