Silverlight Tips provides simple and useful tutorials and tips with real life examples, live demos and sample codes to download.
About authors:
Damon Serji
Damon Serji,
Silverlight developer working at Metia in London.
Gavin Wignall
Gavin Wignall,
Interactive Design Lead, working in design for over 10 years, the last 3 being in Silverlight.
Allan Muller
Allan Muller,
Developer, working on various types of Silverlight and WCF projects.

DeepLinking is one of the greatest features of Silverlight 3 in my opinion and this post will show you how to add Deep Linking to your Silverlight application in four simple steps:

1. Add Frame control in MainPage.xaml
Add System.Windows.Controls.Navigation in your project References and then a reference to navigation namespace to enable you adding the Frame control.


<UserControl x:Class="SilverlightDeepLinking.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Nav="clr-namespace:System.Windows.Controls;
               assembly=System.Windows.Controls.Navigation"

    mc:Ignorable="d" d:DesignWidth="546" d:DesignHeight="150">
  <Grid Width="546" Height="150" x:Name="LayoutRoot" Background="#FFC2CBD8">
    <Nav:Frame x:Name="MainFrame" UriMapper="{StaticResource uriMapper}"
    HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
  </Grid>
</UserControl>

2. Add URI Routing using UriMapper


<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="SilverlightDeepLinking.App"
             xmlns:Nav="clr-namespace:System.Windows.Navigation;
             assembly=System.Windows.Controls.Navigation"
>
    <Application.Resources>
        <Nav:UriMapper x:Key="uriMapper">
            <Nav:UriMapping Uri="" MappedUri="/HomePage.xaml" />
            <Nav:UriMapping Uri="About" MappedUri="/About.xaml" />
        </Nav:UriMapper>
    </Application.Resources>
</Application>

3. Add your pages to the application
Here I have added a Homepage.xaml and About.xaml and added different content and color to them.

4. Add navigation links to your MainPage.xaml
Since we have Homepage and About page, I am going to add to HyperlinkButtons on my MainPage.xaml in order to enable me browse to my two different pages. Please note, the Homepage and About pages will appear inside your <Nav:Frame control, therefore we should have our navigation links i.e. on top/bottom and have the Frame in the middle, where the content will be displayed.

Here is the MainPage.xaml after adding the HyperlinkButtons and adjusting the layout:


<Grid Width="546" Height="150" x:Name="LayoutRoot" Background="#FFC2CBD8">
    <HyperlinkButton x:Name="HomeLink" Content="Homepage"
    HorizontalAlignment="Center" Margin="0,2,60,0" Height="15"
     VerticalAlignment="Top" Background="#009A480E"
     Foreground="#FFC55314" />
    <HyperlinkButton x:Name="AboutLink" Content="About"
     HorizontalAlignment="Center" Margin="60,2,0,0" Height="15"
     VerticalAlignment="Top" Foreground="#FFC55314" />
    <Nav:Frame x:Name="MainFrame" UriMapper="{StaticResource uriMapper}"
    HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
     Margin="0,20,0,0" />
</Grid>

Add the code behind MainPage.xaml.cs

public MainPage()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    HomeLink.Click += new RoutedEventHandler(HomeLink_Click);
    AboutLink.Click += new RoutedEventHandler(AboutLink_Click);
}
private void AboutLink_Click(object sender, RoutedEventArgs e)
{
    MainFrame.Navigate(new Uri("About", UriKind.Relative));
}
private void HomeLink_Click(object sender, RoutedEventArgs e)
{
    MainFrame.Navigate(new Uri("", UriKind.Relative));
}

When you click on the About link, you will navigate away from the current page, note the "#About" at the end of the URL.

The complete project can be downloaded from here.

Posted by Damon Serji on 6. September 2009 12:48 under: Basic
 with 3 Comments

Comments

Hi Damon,

This is a great topic. I have a question about navigation in my project. I have a simple login page in my project. I try to switch the page to mainpage when the users login successfully. Could I use navigation framework to do that? I don't want to use child window to load login page.

Thanks.

Kevin

Posted 12/1/2009 11:42:35 AM

Damon:

Hi Kevin,

I don't see any problems with doing that. its really up to how you are handling the logging process. If you have a "completed" method that gets fired after the user logged in successfully, then in there you can navigate to your homepage, i.e. MainFrame.Navigate(new Uri("", UriKind.Relative));.

Please let me know if you need more details.

Damon

Posted 12/2/2009 4:33:24 PM

Thank You

Posted 8/1/2010 12:45:19 PM

Add comment


(Will show your Gravatar icon)

biuquote
  • Comment
  • Preview