How to build an Inductive User Interface using the Windows Presentation Foundation

• Download source files - 9 Kb

Introduction

The Windows Presentation Foundation offers a great deal in components to build the user interface for your applications, it not only contains components and controls to build the normal user interface, but it also contains controls and components to build inductive user interfaces.

In this article I will give an introduction on how to build inductive user interfaces using the Windows Presentation Foundation.

Abbreviations and terms

In this article there are some abbreviations and terms that need explaination. The first term is WPF, which stands for Windows Presentation Foundation. This is a collection of components in the .NET framework 3.0 that can be used to build user interfaces using XAML (XML Application Markup Language).
One more term I will be using through-out the article is IUI, which stands for Inductive User Interface.

What is an inductive user interface?

An inductive user interface is a simplified user interface that makes the application feel like you are browsing through a set of HTML pages on the web. But unlike the web, you can make the pages highly interactive with all kinds of controls and functions, you normally wouldn’t find on the web.

The big difference with normal user interface is the possibility to go back one or more steps in the process and the way the user interface is build-up. An inductive user interface requires you to create an interface that is simple, contains the minimum amount of controls and works with more steps than a normal user interface.

A full description of what an Inductive User Interface exactly is can be found in the MSDN article for which you can find the address at the end of this article.

What you need to work with the Windows Presentation Foundation

You will need the .NET Framework 3.0 installed, which can be downloaded by going to http://www.netfx3.com/. You will also need the Visual Studio Extensions for Orcas CTP, this package can be downloaded from: http://www.microsoft.com/downloads/details.aspx?FamilyId=935AABF9-D1D0-4FC9-B443-877D8EA6EAB8&displaylang=en

The provided sample code was build using the RC1 release with the matching extensions for visual studio 2005.

How to setup the user interface

If you are using Visual Studio 2005 with the Orcas CTP installed, you can start a new project by Going to File > New > Project. Select C# in the left column followed by Windows Application (WPF) in the right panel. Give the application a name and select OK to create the new project.

Before doing anything, delete Window1.xaml from the project, you will not need it with this kind of application.

The Windows Presentation Foundation offers some standard components to build an IUI, the core component for this kind of interface is the Page control. This control provides a base on which you can place components to build the page you want to display in the application.

To create a new page, right-click the project in the solution explorer and select Add > New Item. Select Page from the list of possible items, give it a name and select OK.

Visual Studio 2005 creates an empty page, which looks something like this:

<Page x:Class="HowToInductiveUI.Page1"
    xmlns="<A href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation</A>"
    xmlns:x="<A href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</A>"
    Title="Page1">
    <Grid>
        
    </Grid>
</Page>

You can load the page in your application by modifying App.xaml. The result will look like this:

<Application x:Class="HowToInductiveUI.App"
    xmlns="<A href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation</A>"
    xmlns:x="<A href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</A>"
    StartupUri="Page1.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

For those who worked with the Windows Presentation Foundation before, will notice that there’s no window to navigate with. In the past you would need to create a navigation window, but this has changed. Now you only need to provide a start-up URI for the application that directs the application to the right page and you’re done.

Navigating to other pages

Navigation is done through the use of the NavigationService, which is available to every instance of the Page control. This service provides several methods to work with the navigation.

To navigate to a different page you need to do the following. First add a new button to the page:

<Button Name="NextButton" Width="150" Click="NavigateNext">
      Next
</Button>

Next you need to write an event-handler for the click event in the code-behind of the Page. The method looks like this:

private void NavigateNext(object sender, EventArgs e)
{
    this.NavigationService.Navigate(new Page2());
}

When the user clicks the button he or she will be redirect to the new page. Note that the navigation buttons at the top of the window become active and enable the user to navigate back and forth between the two pages.

Conclusion and further reading

This was a short introduction to building an Inductive User Interface in Windows Presentation Foundation. There’s a lot more you can do with the Windows Presentation Foundation, like showing 3D objects, animating the user interface, etc.

If you are interested in doing more you can visit the following sites for more information:

• http://www.netfx3.com/ - Contains a lot of information on how to work with .NET Framework 3.0, including the Windows Presentation Foundation.
  
• http://laurenlavoie.com/avalon/133 - An article on how to build tabbed navigation using the Windows Presentation Foundation.
  
• http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/iuiguidelines.asp - An old but useful article on inductive user interfaces.
  

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here