Navigating in and out of a Silverlight 2 site

Making hyperlinks to and from Silverlight (ver. 2) sites can be done in various ways. There are several different scenarios and as many ways to accomplish the task. One Silverlight solution may contain several Silverlight application projects and each Silverlight project may contain several Silverlight controls, that is xaml pages. Determining the one to show on a web page is not always obvious - but not too complicated either.

In order to explore the most common scenarios, let's take a basic Silverlight solution containing one Silverlight application project and an asp.net web site. The Silverlight Application contains two controls:

• Page.xaml (and Page.xaml.cs)
• OtherPage.xaml (and OtherPage.xaml.cs)

and the web site contains two aspx pages:

• Default.aspx
• OtherPage.aspx

The App.xaml file in the Silverlight application determines the default xaml page to show on an aspx (or html) page:

private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new Page();
}

Whereas on the aspx page, the Silverlight control basically contains only the information of the source Silverlight application (a xap-file created in the build of the solution), thus rendering the default xaml page of the application:

asp:silverlight id="Xaml1" runat="server" source="~/ClientBin/Linkkidemo.xap" ...

On the default xaml page of my Silverlight application is a button for changing the Silverlight control to show on the page. The click event of the button is set:

private void btnOtherPage_Click(object sender, RoutedEventArgs e)
{
this.Content = new OtherPage();
}

This will open the OtherPage.xaml user control on the same aspx page viewed in the browser.

If, for one reason or other, there is a need to situate the other Silverlight page on another aspx page, there are several tasks to perform. First, the click event needs to be a hyperlink set to navigate to the actual aspx page, not xaml page for xaml pages cannot be requested to the browser by themselves.

Let's change the click event of the button first. On Page.xaml.cs, first set the statement
using System.Windows.Browser;
and then we can change the click event to:

private void btnOtherPage_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Navigate(new Uri("http://[domainname or testserverport]/OtherPage.aspx"));
}

Now, this will open the intended target page, containing a similar Silverlight control as Default.aspx. The problem is, that by default, the page will actually render the exact same default xaml page as Default.aspx. This needs to be altered. In order to do this, we need to set initialization parameters to specify the page we want.

First, let's open the App.xaml.cs file of the Silverlight application. In it, we need to change the Startup code:

private void Application_Startup(object sender, StartupEventArgs e)
{
IDictionary parameters = e.InitParams;
//Open the default xaml page when no InitParameters are given
if (parameters == null)
{
this.RootVisual = new Page();
}
else if (parameters["PageName"] == "OtherPage")
{
this.RootVisual = new OtherPage();
}
// And else: open the default xaml page
else
{
this.RootVisual = new Page();
}
}

Then, on OtherPage.aspx, we need to set the initializing parameters in the Silverlight control:

asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Linkkidemo.xap" InitParameters="PageName=OtherPage" ...

Now the OtherPage.aspx page will show the OtherPage.xaml page in the Silverlight control.
(Now you may receive an error about a missing key on the Default.aspx page. To correct this, set the InitParameters of the default page to InitParameters="PageName".)

For any other hyperlinks to other pages and sites, the button click event - or e.g. MouseLeftButtonDown event for any object - can be used as a hyperlink button as shown above. But the probably easiest way to create hyperlinks on a Silverlight page is to use the HyperlinkButton control. In Blend, it is in the Asset Library, in VisualStudio it is among Silverlight tools. Use the Content property to set the hyperlink text and the NavigateUri property for the url address.

hyperlinkbutton content="Bordering .Net" navigateuri="http://borderingdotnet.blogspot.com/"