4Blogging Research – Silverlight Navigation

For Silverlight to be effective as a blog engine the navigation needs to be tightly integrated into the browser. Each blog post will be using the same xaml control but needs to be able to have a unique url in the browser to enable users to bookmark pages. For general use the browser back and forward buttons need to be supported to meet non technical users expectations. Below are documented the steps to create and test this functionality.

Prerequisites:

Steps:

  • Open Visual Studio 2010
  • File > New > Project
  • Installed Templates > Visual C# > Silverlight > Silverlight Navigation Application
  • Enter a name for the application and select a location and click OK
  • Accept the defaults for creating the Silverlight.Web project by clicking Ok
  • Press F5 to run and debug the initial project
  • A browser should open with the image below (or something very similar)

 

The site displayed already has two navigation pages (home and about) available and we can see by the url there is a reference to the current page (home) see below:

http://localhost:[port]/NavigationApplicationTestPage.aspx#/Home

Clicking the about button changes the end of this URL from Home to About

This already means we are part way to meeting at least one of the required criteria to bookmark pages and clicking the back button returns to the home page which checks another item off the list. The next step is to determine if the same xaml control can receive and process multiple URL’s for example:

http://localhost:[port]/NavigationApplicationTestPage.aspx#/BlogPost/?id=MyPostTitle1

http://localhost:[port]/NavigationApplicationTestPage.aspx#/BlogPost/?id=MyPostTitle2

Both links need to be processed by BlogPost.xaml

Steps:

 

  • On the Navigation Application project right click the Views folder > Add Item
  • Select Silverlight Page give it a name such as BlogPost.xaml and click OK
  • Add a textblock to the new page and add the x:Name attribute and call it Title
  • Go to the code behind and in the OnNavigatedTo event set the Text property of Title to the NavigationEventArgs.Uri property e.Uri.ToString()
  • This will display the path passed to the page and if it supports additional parameters to make it unique such as an id
  • Open MainPage.xaml and locate the Home and About HyperlinkButton controls
  • Copy one of the controls modify the Content to a unique name and the NavigateUri as shown below:
  • /[YourPageName]?id=1
  • Repeat and give and id of 2

 

Now press F5 to run and debug

If all has gone well the application will open again with two new buttons, clicking one of the buttons should update the Url to the new page and the path should be displayed in the application. This demonstrates that the page can be aware of additional identifiers and bookmarked with a parameter identifying a blog post.

This may not be the way the navigation is finally implemented but it proves that the concept is sound and can be executed. The code for this example can be downloaded from the 4Blogging CodePlex website.

http://4blogging.codeplex.com/SourceControl/list/changesets

 

Leave a Reply

Your email address will not be published. Required fields are marked *