What’s new in Silverlight 3.0 – Navigation Framework

In the world of web we are used to passing urls to each other, so we always get the proper page without surfing through the whole website. Not to mention the search crawlers which access data (data in html pages) directly through these links. However with Flash and Silverlight this becomes a little more complicated. The navigation inside the Silverlight application is not tied to the browsers url field. You cannot reference a specific page in your silverlight application with a simple url. Or at least it would take a hell of a lot code to support it.

Well, in Silverlight 3.0 we have the Navigation Framework which pretty much solves the problem stated above.

Now let’s see…

The Navigation Framework has two main objects:

  • Page – A simple silverlight page where you can navigate to.
  • Frame – Each page will be presented inside the frame which controls the navigation process.

Let’s create a NavigationDemo sample Silverlight Application.

Demo application can be downloaded here:

http://cid-6a68a5d249fe7d3a.skydrive.live.com/embedrowdetail.aspx/Public/NavigationDemo.rar

Let’s create a Pages Folder and add three new Silverlight Pages (HomePage, ProductsPage, ContactPage)

clip_image001_thumb2

Our layout in the MainPage.xaml should resemble to this:

clip_image0016_thumb1

Now we have 3 links in the upper right corner. The whole space below is occupied by the Frame. This is where our pages will be presented. Now set the HyperlinkButtons’ NavigateUri properties to navigate to the proper pages:

clip_image0018_thumb2

Add a simple TextBlock inside each page with a unique text so you know when navigation actually occurs.

image 

Let’s take a closer look:

  1. You can see that the title of the page has changed: it’s “Contacts”. This is done through setting the Page.Title property in ContactPage.xaml to the “Contacts” string.
  2. The Url shows that we are in the Pages folder, on the ContactPage.xaml. Copy the link, open a new web browser and paste the link. You can see that we are navigated directly to the ContactPage. No need to browse through the HomePage. Yay!
  3. The content of the Frame changed to the specific page’s content. In this case the ContactPage’s TextBlock is visible.
  4. Our navigation bar is unchanged since it’s placed outside the frame. The Contact Us link is selected.
  5. On the picture below you can see that the browser’s back and forward buttons are functioning and they enable navigation through the silverlight application’s pages. We also have history support inside our Silverlight app which is pretty cool.

clip_image001

However our link is not too friendly we could really imagine a somewhat nicer url format. Fortunately the solution is already given by the use of UriMappings. (Later we’ll see there is much more to it than providing more friendly urls.)

So let’s go to the App.xaml and create the mappings. The UriMapper is located in the System.Windows.Navigation namespace in the System.Windows.Controls.Navigation assembly.

image_thumb2

So the mappings are created. Now we have to change the NavigateUri properties to the previously defined aliases:

image_thumb5

One last thing that has to be done.  We have to tell the frame to use our previously defined uri mappings to resolve the urls. This can be done through setting the Frame.UriMapper property. We have to reference the static “mapper” resource:

clip_image00112_thumb1

After running the application we can see that the structure of the url has changed:

clip_image00114_thumb1

Now we have the power to manipulate the url the way we want, so let’s create a master-detail like scenario using a classic querystring. Let’s add a new Page called ProductDetailsPage. On the ProductsPage.xaml add a listbox and fill it up with Products instances:

clip_image00118_thumb1

The code-behind:

image_thumb17

On the Page.Loaded event we load the Products and add them to the listbox.

image_thumb7

When clicking the button we get the selected product’s ID and navigate to the ProductDetails page using the Page.NavigationService property’s Navigate() method and by appending the productID after the url. Right know this doesn’t make to much sense for our SL application but now we know what to do. We have to create a new UriMapping.

clip_image00122_thumb1

You can see that we are mapping a url that contains a querystring like parameter to the much shorter and straightforward form of url that we used above. Between the curly braces there is a placeholder called id which you can reference in the mapping. In our case this means that the querystring parameter can be specified directly after the “Products/” url fragment.

Now we have navigation to an empty page which does nothing at this moment. So let’s add some functionality to it like a stackpanel with 3 databound textblocks to create a view for the Product instance.

image_thumb14

The code-behind:

image_thumb15

The OnNavigatedTo method runs after we arrive to this page. Through the Page.NavigationContext property we can access the QueryString! (the mapping hides it) So we get the parameter that we passed to the current page. The rest of the code is just pure and simple data access and data binding .

So we are done. Let’s take a look at the result:

image

Now we can experiment with links (parameters) like these:

http://localhost:24764/NavigationDemoTestPage.aspx#ProductDetails/1
http://localhost:24764/NavigationDemoTestPage.aspx#ProductDetails/2
http://localhost:24764/NavigationDemoTestPage.aspx#ProductDetails/3

The details page for the various product ids are working smoothly. The Navigation Framework introduced in Silverlight 3.0 solves an important issue. By now you probably have some ideas how this will support SEO but in a next post we will take a closer look on the subject.

If you have any questions do not hesitate to leave a comment! 🙂

Advertisements

7 thoughts on “What’s new in Silverlight 3.0 – Navigation Framework

  1. Great job. It’s very useful. But I got a question.I have a login page and home page in my project. There are username and password textbox and login button in my login page. When users click login button with correct username and password, the page should switch to home page. My question is if I can use SL3 navigation into Login page?Thanks in advance.

  2. Hi kevin!Do you have a separate page, or are you talking about the childwindow login control? If you have a separate page then you could use your Page’s NavigationService.Navigate(new Uri("/Pages/Home.xaml",UriKind.Relative)) method to go to home page after a successful login.Hope this helps

  3. Oh sorry, if you were talking about the child window you can pass a reference of your page in the childwindows contstructor then you can use the navgation service. A more proper way would be to pass a DialogResult.Ok back to the caller when login succeeds and then issue a navigation on your page.

  4. Thanks for your answer. I got another question about navigation. Is it possible that use navigation framework in the treeview control?

  5. Sure. You can issue navigation requests in any eventhandler. Plus you could set hyperlinks in your treeviewitemteplate as well.

  6. There’s a problem /NavigationDemoTestPage.aspx#ProductDetails/2 regarding search engine indexing and SEO. In HTML everything after the # is considered to be a "fragment identifier". Google has stated they ignore everything after the # in a URI when crawling and indexing. I’d like MS to provide a solution that results in an SEO-friendly indexable set of URI’s.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s