Module 1: Creating an Application by Using Windows Presentation Foundation Overview of WPF Creating a Simple WPF Application Handling Events and Commands.

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

What Is WPF?

It is a new foundation for building Windows-based applications by using:

• Media

• Documents

• Application UI

.NET Framework 4.0.NET Framework 4.0

Windows PresentationFoundation(WPF)

Windows PresentationFoundation(WPF)

Windows Communication Foundation(WCF)

Windows Communication Foundation(WCF)

Windows WorkflowFoundation(WF)

Windows WorkflowFoundation(WF)

Windows CardSpace(WCS)

Windows CardSpace(WCS)

Defining User Interfaces in WPF

<Window ... >...

<Label>Label</Label><TextBox>TextBox</TextBox><RichTextBox ... />

<RadioButton>RadioButton</RadioButton><CheckBox>CheckBox</CheckBox><Button>Button</Button>

</Window>

<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)

Defining the Application

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

<Application.Resources> … </Application.Resources>

</Application>

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

<Application.Resources> … </Application.Resources>

</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

Defining Windows

A stand-alone application contains windows or pages

• They are represented by <Window> 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>

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

<Grid> … </Grid>

</Window>

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>...

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

The WPF Event Model

WPF controls generate events such as:

• Clicking buttons

• Entering text

• Selecting lists

• Gaining focus

Implement event handler method in the code-behind file

Specify an event handler in the XAML file

Handling WPF Control Events

<Button Name="Button1" Click="Button1_Click"> Click here</Button>

<Button Name="Button1" Click="Button1_Click"> Click here</Button>

public void Button1_Click( object sender, RoutedEventArgs e){ MessageBox.Show("Hello WPF");}

public void Button1_Click( object sender, RoutedEventArgs e){ MessageBox.Show("Hello WPF");}

What Are Routed Events?

Root elementRoot element

Child element #1

Child element #1

Child element#2

Child element#2

Leaf element #1

Leaf element #1

Leaf element #2

Leaf element #2

WPF can route events up or down the element tree

Event bubbling:Event routed up element treeEvent bubbling:Event routed up element tree

Event tunneling:Event routed down element treeEvent tunneling:Event routed down element tree

TunnelTunnel

TunnelTunnel

BubbleBubble

BubbleBubble

Item clickedItem 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>

<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; ...}

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

Key concepts in WPF commanding:

• Commands

• Command sources

• Command bindings

• Command manager

Examples of predefined commands:

• Copy, Cut, and Paste

The WPF Navigation Model

Navigate from one page to another pageNavigate from one page to another page

Navigate to a fragment in a pageNavigate to a fragment in a page

Navigate subcontent frames in a pageNavigate subcontent frames in a page

Handling Page Navigation Events

Page Navigation Request

Page Navigation Request

NavigatingNavigating

NavigationProgressNavigationProgress

NavigatedNavigated

LoadCompletedLoadCompleted

FragmentNavigationFragmentNavigation

NavigationStoppedNavigationStopped

NavigationFailedNavigationFailed

Maintaining State by Using Navigation Services

Page1.xaml Page2.xaml

Page1.xaml

Next

Back

• KeepAlive property

• FrameworkPropertyMetadata.Journal

• IProvideCustomContentState

Why Design Patterns?

•Application development is a murky business

•Design patterns support move from chaos to order

•A good pattern aids Design

Implementation

Testing

Maintenance

Extension

Collaboration

Separation of Concerns

MVVM Design Pattern

•Design Pattern for Application UIs

•Evolved from MVP and MVC

•Well suited to developing with WPF

•Suits WPF core features

Data binding

Data templates

Commands

Resources subsystem

MVVM Tiers

Bind and Convert dataBind and Convert data

UI Elements with Data TemplatesUI Elements with Data TemplatesUI Elements with Data TemplatesUI Elements with Data Templates

Object Model or Data Access TierObject Model or Data Access Tier

ViewView

View-ModelView-Model

ModelModel

Abstraction of View with CommandsAbstraction of View with CommandsAbstraction of View with CommandsAbstraction of View with Commands

Lab: Creating a WPF Application

• Exercise 1: Creating a Stand-Alone WPF Application

• Exercise 2: Handling Events and Commands

• Exercise 3: Navigating Between Pages

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?