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.
Subscribe