Navigating Pages in XAML Browser Applications

Exclusive offer: get 50% off this eBook here
Learning SQL Server 2008 Reporting Services

Learning SQL Server 2008 Reporting Services — Save 50%

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

$29.99    $15.00
by Jayaram Krishnaswamy | December 2009 | Microsoft Web Development

XAML browser applications also known as XBAPs have the features of a web application as well as those of rich client applications leveraging most of the capabilities of WPF. As web applications they can be published to a web server and can be browsed on IE and Firefox.

This article by Dr. Jayaram Krishnaswamy shows how to create a XBAP application using Visual Studio 2008; how to navigate between pages in the application; and how to deploy the application to the local intranet web server using built-in support in Visual Studio.

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

Learning SQL Server 2008 Reporting Services A step-by-step book and eBook to getting the most of Microsoft SQL Server Reporting Services 2008
Published: March 2009
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

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 :

Learning SQL Server 2008 Reporting Services A step-by-step book and eBook to getting the most of Microsoft SQL Server Reporting Services 2008
Published: March 2009
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Jayaram Krishnaswamy

Jayaram Krishnaswamy studied at the Indian Institute of Science in Bangalore India and Madras University in India and taught at the Indian Institute of Technology in Madras. He went to Japan on a Japanese Ministry of Education Research scholarship to complete his PhD in Electrical Engineering from Nagoya University. He was a Post-Doctoral Fellow at Sydney University in Australia; a Government of India Senior Scientific Officer at the Indian Institute of Science in Bangalore and Indian Institute of Technology at Kanpur; a Visiting Scientist at the Eindhoven Institute of Technology in the Netherlands; a visiting Professor of Physics at the Federal University in Brazil; an Associate Research Scientist at a government laboratory in São Jose dos Campos in São Paulo, Brazil; a visiting scientist at the National Research Council in Ottawa, Canada before coming to USA in 1985. He has also taught and worked at the Colorado State University in Fort Collins and North Carolina State University in Raleigh, North Carolina. He worked with Northrop Grumman Corporation on a number of projects related to high energy electron accelerators and Free Electron Lasers. These projects were undertaken at the Brookhaven National Laboratory in Long Island and in the Physics Department at Princeton University. He has over 80 publications in refereed and non-refereed publications and 8 issued patents. He is fluent in Japanese and Portuguese and lives in Honolulu, Hawaii, USA.

He has been working in IT-related fields since 1997. He was once a Microsoft Certified Trainer in Networking and a Siebel Certified developer. He has worked with several IT related companies, such as the Butler International in their Siebel practice, with several IBM sub-contractors and smaller companies. Presently he is active in writing technical articles in the IT field to many online sites such as http://CodeProject.com, http://APSFree.com, http://DevShed.com, http://DevArticles.com, http://OfficeUsers.org, http://ASPAlliance.com, Egghead Café, http://SSWUG.org, Packt Article Network, http://databasedev.co.uk, http://cimaware.com, and many others. Between 2006 and 2010 he wrote more than 400 articles mostly related to database and web related technologies covering Microsoft, Oracle, Sybase, ColdFusion, Sun, and other vendor products.

He has written four books all published by Packt related to Microsoft Database and Application Development: SQL Server Integration Services Using Visual Studio 2005, Learning SQL Server Reporting Services 2008, Microsoft SQL Azure; Enterprise Application Development, and Microsoft Visual Studio Lightswitch Business Application Development. He regularly writes for his four blogs on Blogger; http://Hodentek.blogspot.com, http://HodentekHelp.blogspot.com, http://HodentekMobile.blogspot.com, and http://HodentekMSSS.blogspot.com. He received the 2011 Microsoft Community Contributor award.

Contact Jayaram Krishnaswamy

Books From Packt

Microsoft Dynamics AX 2009 Development Cookbook
Microsoft Dynamics AX 2009 Development Cookbook

Programming Microsoft Dynamics NAV 2009
Programming Microsoft Dynamics NAV 2009

Microsoft Dynamics AX 2009 Programming: Getting Started
Microsoft Dynamics AX 2009 Programming: Getting Started

Entity Framework Tutorial
Entity Framework Tutorial

Implementing Microsoft Dynamics NAV 2009
Implementing Microsoft Dynamics NAV 2009

Microsoft Office Live Small Business: Beginner’s Guide [RAW]
Microsoft Office Live Small Business: Beginner’s Guide [RAW]

Expert Cube Development with Microsoft SQL Server 2008 Analysis Services
Expert Cube Development with Microsoft SQL Server 2008 Analysis Services

C# 2008 and 2005 Threaded Programming: Beginner's Guide
C# 2008 and 2005 Threaded Programming: Beginner's Guide

No votes yet
How can you view the xaml of the page layout in a webbrowser by
How can you view the xaml of the page layout in a webbrowser

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
L
D
9
3
c
A
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software