Visual Studio 2008:

Windows Presentation
®

Foundation
Module 2: Building User Interfaces
• Defining Page Layout

• Building User Interfaces by Using Content Controls

• Building User Interfaces by Using Items Controls

• Hosting Windows Forms Controls

Lesson: Defining Page Layout
• WPF Page Layout Model

• WPF Layout Classes

• Demonstration: Defining Layout by Using Panels

• Demonstration: Defining Layout by Using Grids

WPF Page Layout Model

1 Measurement Pass • Abstract rectangular bounding box

• Retrieve by calling GetLayout on

Hello World! a FrameworkElement

Evaluate each member of the Children collection to

determine Its DesiredSize

2 Arrangement Pass Window or Page element

Child objects

Layout class

Determine the final size of each child object and place

within Its layout slot
WPF Layout Classes

Canvas

DockPanel

Panel
Grid
Background
Children StackPanel
ZIndex

VirtualizingStackPanel

WrapPanel
Demonstration: Defining Layout by Using Panels
In this demonstration, you will see how to:
• Use the Canvas class

• Use the StackPanel class

• Use the WrapPanel class

• Use the DockPanel class

Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
Demonstration: Defining Layout by Using Grids
In this demonstration, you will see how to use the
Grid class
Lesson: Building User Interfaces by Using
Content Controls
• What Is a Content Control?

• Demonstration: Creating a User Interface by Using

Content Controls
• What Is a Headered Content Control?

• Demonstration: Creating a User Interface by Using

Headered Content Controls
What Is a Content Control?

• Contains a single item Common content controls:

• Has a Content property • Button
• CheckBox
Examples Text • GroupItem
This is text content of a Button • Label
DateTime • RadioButton
04/03/2007 13:06 • RepeatButton
UIElement • ToggleButton

• ToolTip

Button
Multiple
objects
Demonstration: Creating a User Interface by
Using Content Controls
In this demonstration, you will see how to:
• Use the ContentControl class

• Use the Border Decorator class

Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
What Is a Headered Content Control?

• Specialized ContentControl GroupBox

• Has a Content property

Example
• Has a Header property

TabItem
header

Headered content controls:

• Expander

• GroupBox

• TabItem Expander
Demonstration: Creating a User Interface by
Using Headered Content Controls
In this demonstration, you will see how to:
• Use the TabItem class

• Use the GroupBox class

• Use the Expander class

Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
Lesson: Building User Interfaces by Using
Items Controls
• What Is an Items Control?

• Handling Item Selection

• Demonstration: Creating a User Interface by Using Items

Controls
What Is an Items Control?

Items

Common items controls:

ItemsSource
• ComboBox

• ListBox

Can be • Menu
different types
• StatusBar

• TabControl
• Contains multiple objects
• ToolBar
• Has an Items property
• TreeView
• Has an ItemsSource property
Handling Item Selection

Attach event handler

<ListBox
SelectionChanged="ListBox1_SelectionChanged">
...
</ListBox>

Define event handler

public void ListBox1_SelectionChanged(

object sender,
SelectionChangedEventArgs e)
{
...
}
Demonstration: Creating a User Interface by
Using Items Controls
In this demonstration, you will see how to use the ListBox
class
Lesson: Hosting Windows Forms Controls
• Why Host Windows Forms Controls in WPF?

• Referencing Windows Forms Controls in a WPF Application

• Using Windows Forms Controls in XAML

• Interacting with Windows Forms Controls

Why Host Windows Forms Controls in WPF?

• Some Windows Forms controls have no equivalent in WPF

• Reuse existing investment in Windows Forms code

Examples:
• DataGridView

• DateTimePicker

• FolderBrowserDialog
• NotifyIcon
Referencing Windows Forms Controls in a WPF
Application

Add references to the following assemblies:

System.Windows.Forms
assembly

WindowsFormsIntegration
WPF Application assembly
Using Windows Forms Controls in XAML

WindowsFormsHost
element

<Window ... >

...
<wfi:WindowsFormsHost x:Name="wfh">
<wf:DateTimePicker x:Name="dtp" />
</wfi:WindowsFormsHost>
...
</Window>

DateTimePicker
child control

Add required XML namespace declarations to

root <Window> element
Interacting with Windows Forms Controls
• WindowsFormsHost element
• Manipulate default child
properties
<wfi:WindowsFormsHost ... >

<wf:DateTimePicker ... />

</wfi:WindowsFormsHost> • Child property

• Cast to relevant type

• Attach event handlers

• Manipulate properties

(this.wfh.Child as DateTimePicker).ValueChanged +=
new EventHander(Window1_ValueChanged);
Lab: Building User Interfaces
• Exercise 1: Defining Page Layout and Adding Content

• Exercise 2: Enhancing the User Interface by Using Items

Controls
• Exercise 3: Integrating Windows Forms Controls

Logon information
Virtual machine 6460A-LON-DEV-02

User name Student

Password Pa$$w0rd

Estimated time: 60 minutes

Lab Review
• When would you use the DockPanel, Border, StackPanel,
and Grid layout classes?
• How do you define the content for a Button element?

• How do you define the child items for a ListView

element?
• Which assemblies must you reference to integrate
Windows Forms controls in your WPF applications?
• Which WPF element do you use to host Windows Forms
controls in your WPF applications?
Module Review and Takeaways
• Review Questions

• Tools