Creating a sample Navigation Application

Now that we have identified the main points of the Navigation Framework, we will begin by creating a sample from the beginning.

We will create an application which makes use of the Silverlight Navigation functionality, showing how we can control the navigation status when it begins or ends. Also, we will learn how to pass parameters via URI.

  1. To create a new project, go to New Project and choose a Silverlight Navigation Application project.
  2. Give the project a name and click Ok.
  3. Later, we will be asked if we want to create a project for hosting the Silverlight application. For convenience, choose to create an ASP.NET Web Application project.
  4. After clicking OK, Visual Studio applies the Template associated with this kind of project. It generates a structure depending on the solution to locate an area for page definition at first sight, as shown in the following screenshot.
    Creating a sample Navigation Application
    • Main Page: If we observe it, we can see that it has created a main page (MainPage.XAML). This page also contains the Navigation controls (and UriMappers). Here, we can also find the menu links.
    • App.xaml: In this file, we define the application styles (we could add URIMappers here as well).
    • App.cs: This is the application entry point.
    • Page container area: It creates a Views folder and here we add the new pages our application needs. By default, we will find two sample pages, Home.xaml and About.xaml. A ChildWindow control has also been added to the Views folder in order to show the possible errors that the application may generate. ErrorWindow.xaml.

Finally, we can see the web project upon which the Silverlight application will be executed.

Adding a new page

We will add a new page to our project and also create the resulting option in the Navigation menu, which will allow us to display it.

Adding a new page
  1. On the Views folder, add a new Silverlight Page item.
  2. Name it AdminView.XAML.

    If we execute the application at this point, we will see that there is no link to the new page. To get one, we need to modify the MainPage.XAML page, by adding a new UriMapper that identifies the AdminView.XAML page in the following manner:

    <uriMapper:UriMapper>
  <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
  <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
  <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}View.xaml"/>
</uriMapper:UriMapper>
    • Conventionally, when identifying interface objects, we will rename the pages Home.XAML and About.XAML to HomeView.XAML and AboutView.XAML respectively (we should not forget to rename classes). Thus it is clear that the second UriMapper is superfluous; if we execute the application right now, the error "Home Page is not found" would occur (it is configured by default), as displayed in the following screenshot. The application matches the Home URI with the second UriMapper and does not find the /Views/Home.XAML URI.

    Note

    Interface Object Name: It is a good practice to name the interface objects with the suffix "View" in order to identify them clearly.

    Adding a new page
  3. We must delete the second URI of the collection because the UriMapper cannot map the /home URI to the Home.xaml now, because the Navigation Framework takes the first entry in the URI collection that matches with the specified URI, as shown in the UriMapper code.
  4. Then execute the application again.

So where should you click to go to the new page?

We are still to enter another menu entry.

  1. To do so, add a new HyperLinkButton control to the MainPage.XAML page and establish the NavigateUri property to the Admin value as shown in the following code:
  2. Let us execute the application again. 
    <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}">
  <HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}" NavigateUri="/Home" TargetName="ContentFrame" Content="home"/>
  <Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>
  <HyperlinkButton x:Name="Link3"       Style="{StaticResource LinkStyle}" NavigateUri="/Admin" TargetName="ContentFrame" Content="Admin"/>
  <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>
  <HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}" NavigateUri="/About" TargetName="ContentFrame" Content="about"/>
</StackPanel>

    This is how our UriMapper will look:

    <uriMapper:UriMapper>
  <uriMapper:UriMapping Uri="" MappedUri="/Views/HomeView.xaml"/>
  <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}View.xaml"/>
</uriMapper:UriMapper>
上一章目录下一章