Navigating Pages in XAML Browser Applications

A step-by-step book and eBook to getting the most of Microsoft SQL Server Reporting Services 2008

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 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" />

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 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<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...).

Navigating Pages in XAML Browser Applications

When you create the project as above you will be creating a project which has a Page element as shown in the figure.

Navigating Pages in XAML Browser Applications

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"

    Navigating Pages in XAML Browser Applications

  • This requires the inclusion of a namespace provided by the second namespace declaration
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  • 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.

Navigating Pages in XAML Browser Applications

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.

Navigating Pages in XAML Browser Applications

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"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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.

Navigating Pages in XAML Browser Applications

Navigation between pages

In any application (web site) there will a number of pages and navigating between them effortlessly is crucial for the success of an application. As mentioned previously we will use hyperlink navigation for this article and consider navigation between two pages.

For this purpose add another page [click Project | Add Page... and choose Page(WPF)] to the project. This will add a Page2.xaml. You should change the name to something different but herein Page2 is retained. When you click OK you will add Page2.xaml to the project. Page2 has its own XAML and code behind pages.

In Page1 add a hyperlink element or tag(type-in < inside <Page/>) as shown. When you click on the drop-down in the intellisense window you will add the element <Hyperlink></Hyperlink> to the page. Inside the Opening tag <Hyperlink> if you place your cursor to the right of the letter "k" and hit the space bar once, the intellisense pop-out menu gets displayed wherein you can pick the attributes.

Navigating Pages in XAML Browser Applications

Choose the NavigateURI property and set its value to point to Page2. The completed Hyperlink tag should appear as:

<Hyperlink NavigateURI="Page 2.xaml">Hello, Go to Page 2</Hyperlink>

In Page2 add the code as shown in the next figure. The image is inside the <Hyperlink/> tags. The NavigateURI property is now pointing to Page1.xaml. When you add an image to a page. Choose only the supported image file extension. It appears PNG is not supported. As to the SOURCE property of the image you should set its value to a image file in the project (right click project and choose Add New Item... and browse through your file system) and not in a sub-folder of the project. Herein a Dogwood.jpg file has been added to the project.

Navigating Pages in XAML Browser Applications

So far you have set up a StartUp page which is Page1 and you have a hyperlink to go from Page1 to Page2. When you go to Page2 you have also have to set up a hyperlink to go back to Page1. Build the project and hit the green arrow head in the menu (Start Debugging). After a while the ObjectTestBench window will show up momentarily and Page1 gets displayed in the IE browser (assuming it is the default) as shown. Since WindowTitle was not present the application name gets displayed in the tab.

Navigating Pages in XAML Browser Applications

Click on the hyperlink and verify that it takes you to Page2 as shown. Again your browser tag displays the application name and not the page name. You can verify that clicking the image will take you back to Page1.

Navigating Pages in XAML Browser Applications

Deploying the application to the web server

XBAP applications are also web applications and therefore you can deploy them to an intranet server. You can use Visual Studio 2008 to deploy your application to the web server. Click Project | <ProjectName>_Properties... at the bottom of the drop-down menu. In the tab that displays the properties click on the Publish line item on the left of this window. This opens the details related to the publishing the application to the web server as shown here.

Navigating Pages in XAML Browser Applications

Note that the web site where this will be published to is http://localhost/WPFSharp_Nav02/. You find another location or to other options shown here. Since the default is chosen here you can skip the others. You have two options to publish, using the wizard or using the Publish Now button. Click this button. You will see publishing related activities echoed to your status line in Visual Studio finishing with Publishing Succeeded. This is followed by the published material on the browser as shown.

Navigating Pages in XAML Browser Applications

Click the RUN button. First you get an application downloading message on the browser followed by a preparing to run the application message on the browser and finally Page1 gets displayed as shown.

Navigating Pages in XAML Browser Applications

On the web server you will see the folder structure and files shown in the next figure.

Navigating Pages in XAML Browser Applications

The Application Files folder consist of the following in this version of the deployment:

  1. <projectName>.exe.deploy (binary executable)
  2. <projectName>.exe.manifest(XML assembly file)
  3. <projectName>.xbap

Summary

The article described in detail creating a XAML browser application and provided details of how navigation is implemented. The article also described the deployment of the application to the local web server. Although Firefox is also supposed to be a host the deployed application failed to open in Firefox 5.0.

 

If you have read this article you may be interested to view :

Books to Consider

comments powered by Disqus