Visual Studio 2008: Windows Presentation Foundation

Module 1: Creating an Application by Using Windows Presentation Foundation

Overview of WPF Creating a Simple WPF Application

Handling Events and Commands

Navigating Between Pages

Lesson: Overview of WPF

What Is WPF? WPF Architecture

Defining User Interfaces in WPF

WPF Capabilities and Features WPF Application Types

What Is WPF?
It is a new foundation for building Windows-based applications by using:
Media Documents Application UI Windows Presentation Foundation (WPF) Windows Workflow Foundation (WF) Windows CardSpace (WCS)

Windows Communication Foundation (WCF)

.NET Framework 2.0

WPF Architecture
WPF Core Components

PresentationFramework Managed Code PresentationCore Common Language Runtime

milcore
User32 Kernel DirectX

Unmanaged Code

Defining User Interfaces in WPF

<Window ... > ... <Label>Label</Label> <TextBox>TextBox</TextBox> <RichTextBox ... /> <RadioButton>RadioButton</RadioButton> <CheckBox>CheckBox</CheckBox> <Button>Button</Button> </Window>

WPF Capabilities and Features

WPF provides the following capabilities and features:
XAML-based user interfaces Page layout management Data binding 2-D and 3-D graphics Multimedia Animation Documents and printing Security Accessibility Localization Interoperability with Windows Forms controls

WPF Application Types

Stand-Alone Applications

XAML Browser Applications (XBAPs)

Lesson: Creating a Simple WPF Application

Demonstration: Creating WPF Applications by Using Visual

Studio 2008

Defining the Application Defining Windows or Pages Adding Controls Building and Running a WPF Application

Demonstration: Creating WPF Applications by Using Visual Studio 2008

In this demonstration, you will see how to:
Create a stand-alone WPF application

Create a browser application

Add controls to your application

Defining the Application

Visual Studio generates a XAML application file that specifies:
The code-behind class for the application The startup window or page Application-wide resources

<Application xmlns:x= xmlns= x:Class="MyApp.App" StartupUri="Window1.xaml"> <Application.Resources> </Application.Resources> </Application>

Defining Windows or Pages

A stand-alone application contains windows or pages
They are represented by <Window> or <Page> elements in the XAML file The code-behind file contains event-handler code

<Window xmlns:x= xmlns= x:Class="MyApp.Window1" Title="My Window"> <Grid> </Grid> </Window>

<Page xmlns:x= xmlns= x:Class="MyApp.Page1" WindowTitle="My Page"> <Grid> </Grid> </Page>

Adding Controls
Windows and pages contain controls
The controls are represented by XAML elements <Button> and <TextBox> are examples of these

... <Grid> <TextBox Name="TextBox1" /> <Button Name="Button1">Click here</Button> </Grid> ...

Building and Running a WPF Application

You can build and run a WPF application in Visual Studio
Stand-alone or browser application

Stand-Alone Application

Browser Application

Lesson: Handling Events and Commands

The WPF Event Model Handling WPF Control Events

What Are Routed Events?

Defining Routed Events What Are Commands?

Demonstration: Defining Commands

The WPF Event Model

WPF controls generate events such as:
Clicking buttons Entering text Selecting lists

Gaining focus

Handling WPF Control Events

Specify an event handler in the XAML file <Button Name="Button1" Click="Button1_Click"> Click here </Button>

Implement event handler method in the code-behind file public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show("Hello WPF"); }

What Are Routed Events?

WPF can route events up or down the element tree
Event tunneling: Event routed down element tree Event bubbling: Event routed up element tree Tunnel Bubble Child element #1

Root element

Child element #2
Bubble

Tunnel Leaf element #1

Leaf element #2
Item clicked

Defining Routed Events

Example of event bubbling
Define leaf elements inside a container element Handle leaf events at the container level

<StackPanel Button.Click="CommonClickHandler"> <Button Name="YesButton">Yes</Button> <Button Name="NoButton">No</Button> </StackPanel> private void CommonClickHandler(object sender, RoutedEventArgs e) { Button b = e.Source as Button; ... }

What Are Commands?

Commands separate the semantics of an action from its logic
Multiple sources can trigger the same command You can customize the command logic for different targets

Examples of predefined commands:

Copy, Cut, and Paste

Key concepts in WPF commanding:

Commands Command sources Command bindings Command manager

Demonstration: Defining Commands

In this demonstration, you will see how to:
Define menu items that perform Copy and Paste

commands

Use the native ability of the TextBox to process the Copy

and Paste commands

Lesson: Navigating Between Pages

The WPF Navigation Model Demonstration: Navigating Pages by Using Hyperlinks

Handling Page Navigation Events

Maintaining State by Using Navigation Services

The WPF Navigation Model

Navigate from one page to another page

Navigate to a fragment in a page

Navigate subcontent frames in a page

Demonstration: Navigating Pages by Using Hyperlinks

In this demonstration, you will see how to:
Create hyperlinks to navigate to other pages

Create hyperlinks to navigate between pages and page

fragments

Create a Frame to contain pages in a Window

Handling Page Navigation Events

Page Navigation Request Navigating

NavigationProgress
Navigated LoadCompleted FragmentNavigation

NavigationStopped NavigationFailed

Maintaining State by Using Navigation Services

Next

Page1.xaml

Page2.xaml

Back

Page1.xaml

KeepAlive property

FrameworkPropertyMetadata.Journal
IProvideCustomContentState

Lab: Creating a WPF Application

Exercise 1: Creating a Stand-Alone WPF Application Exercise 2: Handling Events and Commands

Exercise 3: Navigating Between Pages

Exercise 4: Creating an XBAP Application

Logon information

Virtual machine User name Password

6460A-LON-DEV-01 Student Pa$$w0rd

Estimated time: 60 minutes

Lab Review
Why would you want to inherit your window from the

NavigationWindow class?

How do you add an event handler to the Click event of a

<Button> element in XAML?

What is the name of the property that you use to configure

a button to use the NextPage command?

What is the name of the event to which you connect a

handler if you want to manually determine if a command is allowed to be executed?

When your application is running in a browser (XBAP), why

are you not able to access the FileName property of the OpenFileDialog class?

Module Review and Takeaways

Review Questions Common Issues and Troubleshooting Tips

Best Practices
Tools