Silverlight 3: Navigation Application Tutorial

Submitted by Umesh Patel (March 18, 2009)

The Silverlight Navigation feature provides a rapid means of developing page-based web applications. The two primary controls in the System.Windows.Control.Navigation namespace are Frame and Page. The Frame control hosts a single Page control utilizes the Navigation APIs to allow the user to navigate between the pages. The Page control resembles the commonly used UserControl control to hold the contents of the respected page.

In this tutorial, we will show you to have create a quick Navigation Application.

 

Create a New Project

  1. Select New Project from the File Menu
  2. Select Silverlight Navigation Application template.
  3. Name the project NavigationApplication and click OK.
  4. In the New Silverlight Application dialog, uncheck the Host the Silverlight application in a new Web site checkbox.

    Create New Project

  5. The project generates the default template and files for a sample page-based application.  The Views Folder has pre-generated pages (AboutPage, ErrorWindow, and HomePage).  App.xaml has the application-wide styles used to design the application.  MainPage.xaml has the default implementation of the application with sample data.

    Default Project

  6. Compile and run the project.  The application opens in the default web browser.  Click on the navigation links to test out their functionality.  The browser stores the current address of the application's frame in the address bar.  Another benefit of the navigation feature is its integration with the browser's history.  Access the browser's back history to view the application's history.  

    Output

 

Extending the Project

The default project has two default pages (About and Home).  To add additional pages, you can create pages using the Silverlight Page template and add the buttons to call them in MainPage.xaml  We will extend this process by data binding the navigation links to a local xml file.

  1. Create the Navigation.xml file with the following XML content. 

    <navigation>
    <page name="Home" url="/Views/HomePage.xaml" />
    <page name="About" url="/Views/AboutPage.xaml" />
</navigation>

  2. Add System.Xml.Linq to the project's references.
  3. Add System.Xml.Linq namespace to MainPage.xaml.cs.
  4. Create the NavigatePage class.  This class will be used to store the data from the XML file. 
    public class NavigationPage
    {
        public string Name { get; set; }
        public string Url { get; set; }
    }

  5. The navigation list is rendered in MainPage.xaml.  The static version needs to be replaced with an ItemsControl that is data bounded to the contents of the XML file.  Find the following from MainPage.xaml. 
    <StackPanel Style="{StaticResource NavigationPanelStyle}">
        <Button Click="NavButton_Click" Tag="/Views/HomePage.xaml" Content="home" Style="{StaticResource PageLinkStyle}"/>
        <Button Click="NavButton_Click" Tag="/Views/AboutPage.xaml" Content="about" Style="{StaticResource PageLinkStyle}"/>
    </StackPanel>

    Replace with the following code snippet.

    <ItemsControl x:Name="listNavigation">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Style="{StaticResource NavigationPanelStyle}" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Click="NavButton_Click" Tag="{Binding Url}" Content="{Binding Name}" Style="{StaticResource PageLinkStyle}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

  6. Load the Navigation.xml file and data bind it to the listNavigation control with the following code snippet. 
    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        XElement xml = XElement.Load("Navigation.xml");
     
        List<NavigationPage> pages = (from page in xml.Elements("page")
                                      select new NavigationPage
                                      {
                                          Name = (string)page.Attribute("name"),
                                          Url = (string)page.Attribute("url")
                                      }).ToList();
     
        listNavigation.ItemsSource = pages;
     
         SetPage(pages[0].Url);
    }
  7. Compile and run the project.   The output should remain the same.

 

Add the Links Page

  1. Right-click on the Views folder in the Solution Explorer and select Add New Item.
  2. Select Silverlight Page in the Add Item dialog box and name it LinksPage.xaml.
  3. Add the following code snippet to LinksPage.xaml. 
    <Grid Background="White">
        <StackPanel>
            <TextBlock Text="Links" Style="{StaticResource HeaderTextStyle}"/>
            <HyperlinkButton Content="http://www.silverlighttoys.com" NavigateUri="http://www.silverlighttoys.com" Style="{StaticResource HyperlinkButtonStyle}"/>
        </StackPanel>
    </Grid>

  4. Add the new page entry to Navigation.xml. 
    <page name="Links" url="/Views/LinksPage.xaml" />

  5. Compile and run the project.   Click on the Links hyperlink to test it out.

 

Conclusion

The Navigation Application feature can be used to develop rich, complete web applications. Web Browser interaction ensures that the end user get the traditional navigation flow as they traverse through the application.

Tutorials