Page navigation is an important part of application development and Windows Presentation Foundation supports navigation in two types of applications. These are the standalone application and the XAML browser application also known as XBAP applications. In addition to navigation between pages in the application it also supports navigation to other types of content such as HTML, objects and XAML files.
Implementing a page
Page class is one of the classes supported by WPF and you can use hyperlinks declaratively to go from page to page. You could also go from page to page programmatically using the NavigationService. In this article navigation using hyperlinks will be described.
Page can be viewed as a package that consists of content which may be of many different kinds such as .NET framework objects, HTML, XAML, etc. Using the page class you can implement a Page which is a navigable object with XAML content.
You implement a page declaratively by using the following markup:
<Page />
Page is the root element of a Page which requires XAML namespace in its declaration as shown above. The Page can contain only one child element and you may simplify the snippet to just:
<Page >
<Page.Content>
<!-- Page Content -->
Hello, XAML
</Page.Content>
</Page>
Since a Page has the content you can access any content on the page by the dot notation Page.content as shown here above.
Creating a Page in Visual Studio 2008
When you use Visual Studio 2008 you can create a WPF Browser application in C# as shown in the New Project window (opened with File | New Project…).
When you create the project as above you will be creating a project which has a Page element as shown in the figure.
Page1.xaml has both a preview window as well as XAML markup in a tabbed arrangement as shown here. Page1 is a named page object with a class [x:Class=”Page1″]. You can review the content shown in the earlier snippet by taking out the extra namespace from the page shown here.
The contents on a page can consist of other objects such as controls which can be used for various activities one of which is navigating from page to page. These controls can provoke events which can be implemented both as mark up and code that supports the page(also known as code behind). The page created by Visual Studio provides the necessary configuration to interact with the page as shown in Page1.xaml in the above figure and the code behind page shown in the figure below. The default page created by Visual Studio fulfils the three necessary criteria for a page with which you can interact by providing the following:
- x:Class=”Page1″ this markup attribute enables the MS Build engine to build a Page1 partial class which has the same name as the attribute of x:Class namely “Page1”
- This requires the inclusion of a namespace provided by the second namespace declaration
- The generated class should implement an InitializeComponent and the default page has this implemented as show above
Configuring a Start Page
When the application starts you need to specify that the browser should bring up a designated page. In order to support this the browser application requires an infrastructure to host the application and the WPF’s Application class provides the necessary information in the form of an ApplicationDefinition file. In the XBAP application we have created you may review the information in the Application definition as shown here.
You can specify the start up page as the application starts by specifying it in the Application definition as shown in the next figure. Without the StartupURI the page does not get displayed. The StartupURI can also be specified in a Startup event handler.
Page appearance in the browser
As the application starts up you may want to control how the page hosted in the window appears. You can set certain properties declaratively as shown where the WindowTitle, WindowWidth, WindowHeight, Title can all be set. The first three items are what you will see when the page gets displayed. For example consider the following xaml mark up:
<Page x_Class="WPFSharp_Nav01.Page1"
WindowWidth="500"
WindowHeight="200"
Title="Pagex"
Background="Blue"
WindowTitle="What is this?"
>
<TextBox Width="400" Height="25">Hello, XAML Browser App</TextBox>
</Page>
The page gets displayed as shown when the application starts up. The WindowWidth is the outer width and the WindowHeight is the outer height of the browser window.
