Navigation Applications

If you create a new WPF application using Visual Studio, you may notice that a few icons down from the Avalon Application icon is another project template called Avalon Navigation Application, as shown in Figure 1-6.

Figure 1-6. The Avalon Navigation Application project template in Visual Studio

WPF itself was created as a unified presentation framework, meant to enable building Windows applications with the best features from existing Windows application practice and existing web application practice. One of the nice things that web applications generally provide is a single window showing the user one page of content/functionality at a time, allowing for navigation between the pages. For some applications, including Internet Explorer, the Shell Explorer, Microsoft Money and a bunch of Control Panels, this is thought to be preferable to the more common Windows application practice of showing more than one window at a time.

To enable more of these kinds of applications in Windows, WPF provides the NavigationApplication in Example 1-14 to serve as the base of your custom application class instead of the Application class.

Example 1-14. The C# portion of a navigation application

// MyApp.xaml.cs
using System;
using System.Windows;
using System.Windows.Navigation;

namespace MyNavApp {
  public partial class MyApp : NavigationApplication {}
}

The NavigationApplication itself derives from the Application class and provides additional services such as navigation, history, and tracking the initial page to show when the application first starts, which is specified in the application's XAML file, as in Example 1-15.

Example 1-15. The XAML portion of a navigation application

<!-- MyApp.xaml.cs -->
<NavigationApplication
  x:Class="MyNavApp.MyApp"
  xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
  xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
  StartupUri="Page1.xaml">
</NavigationApplication>

In addition to the StartupUri, which specifies the first XAML page to show in our navigation application, notice that the NavigationApplication element doesn't have a Text property. In fact, if you were to set one, that would cause a compilation error, because a navigation application's main window title is set by the current page. A page in a WPF navigation application is a class that derives from the Page class, e.g., the XAML in Example 1-16.

Example 1-16. A sample navigation page

<!-- Page1.xaml -->
<Page
  x:Class="MyNavApp.Page1"
  xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
  xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
  Text="Page 1">
  <TextBlock FontSize="72" TextWrap="Wrap">
    Check out
    <Hyperlink NavigateUri 

="page2.xaml">page 2</Hyperlink>,
    too.
  </TextBlock>
</Page>

Remember that the root element of a XAML file defines the base class, so this Page root element defines a class (MyNavApp.Page1) that derives from the WPF Page class. The Text property of the page will be the thing that shows in the caption as the user navigates from page to page.

1.2.1. Navigation

The primary way to allow the user to navigate is via the Hyperlink element, setting the NavigateUri to a relative URL of another page XAML in the project. The first page of our sample navigation application looks like Figure 1-7.

Figure 1-7. A sample navigation page in action

In Figure 1-7, the hyperlinked text is underlined in blue, and if you were to move your mouse cursor over the hyperlink, it would show up as red. Further, the page's Text property is set as the window caption, as well as on the toolbar across the top. This toolbar is provided for navigation applications for the sole purpose of providing the back and forward buttons. The act of navigation through the application will selectively enable and disable these buttons, as well as fill in the history drop-down maintained by each button.

Let's define page2.xaml, as shown in Example 1-17.

Example 1-17. Another sample navigation page

<!-- Page2.xaml -->
<Page
  x:Class="MyNavApp.Page2"
  xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
  xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
  Text="Page 2">
    <TextBlock FontSize="72" TextWrap="Wrap">
    Hello, and welcome to page 2.
    <Button FontSize="72" Click="page1Button_Click">Page 1</Button>
    <Button FontSize="72" Click="backButton_Click">Back</Button>

    <Button FontSize="72" Click="forwardButton_Click">Forward</Button>
  </TextBlock>
</Page>

Clicking on the hyperlink on page 1 navigates to page 2, as shown in Figure 1-8.

Figure 1-8. Navigation history and custom navigation controls

Notice in Figure 1-8 that the history for the back button shows page 1, which is where we were just before going to page 2. Also notice the three buttons, which are implemented in Example 1-18 to demonstrate navigating to a specific page, navigating backward, and navigating forward.

Example 1-18. Custom navigation code

// Page2.xaml.cs
using System;
using System.Windows;

using System.Windows.Navigation;

namespace MyNavApp {
  public partial class Page2 : Page {
    void page1Button_Click(object sender, RoutedEventArgs e) {
      NavigationService.GetNavigationService(this).
        Navigate(new Uri("page1.xaml", UriKind.Relative));
    }

    void backButton_Click(object sender, RoutedEventArgs e) {
      NavigationService.GetNavigationService(this).GoBack(  );
    }

    void forwardButton_Click(object sender, RoutedEventArgs e) {
      NavigationService.GetNavigationService(this).GoForward(  );
    }
  }
}

Example 1-18 shows the use of static methods on the NavigationService class to navigate manually just as the hyperlink, back and forward buttons do automatically.