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

Measurement PassMeasurement Pass11Hello World!

Evaluate each member of the Children collection to determine Its DesiredSizeEvaluate each member of the Children collection to determine Its DesiredSize

WPF Page Layout Model

• Abstract rectangular bounding box

• Retrieve by calling GetLayout on a FrameworkElement

• Abstract rectangular bounding box

• Retrieve by calling GetLayout on a FrameworkElement

Arrangement PassArrangement Pass22 Window or Page element

Determine the final size of each child object and place within Its layout slotDetermine the final size of each child object and place within Its layout slot

Layout class

Child objects

WPF Layout Classes

CanvasCanvas

VirtualizingStackPanelVirtualizingStackPanel

DockPanelDockPanel

GridGrid

StackPanelStackPanel

WrapPanelWrapPanel

Panel

Background

Children

ZIndex

Panel

Background

Children

ZIndex

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

Demonstration: Defining Layout by Using Grids

In this demonstration, you will see how to use theGrid 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

Common content controls:

• Button

• CheckBox

• GroupItem

• Label

• RadioButton

• RepeatButton

• ToggleButton

• ToolTip

Common content controls:

• Button

• CheckBox

• GroupItem

• Label

• RadioButton

• RepeatButton

• ToggleButton

• ToolTip

What Is a Content Control?

• Contains a single item

• Has a Content property

• Contains a single item

• Has a Content property

ExamplesExamples TextText

DateTimeDateTime

UIElementUIElement

Multiple objects

Multiple objects

This is text content of a Button

04/03/2007 13:06

Button

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

Headered content controls:

• Expander

• GroupBox

• TabItem

Headered content controls:

• Expander

• GroupBox

• TabItem

• Specialized ContentControl

• Has a Content property

• Has a Header property

• Specialized ContentControl

• Has a Content property

• Has a Header property

ExampleExample

What Is a Headered Content Control?

TabItem

header

TabItem

header

GroupBoxGroupBox

ExpanderExpander

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

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?

• Contains multiple objects

• Has an Items property

• Has an ItemsSource property

• Contains multiple objects

• Has an Items property

• Has an ItemsSource property

Common items controls:

• ComboBox

• ListBox

• Menu

• StatusBar

• TabControl

• ToolBar

• TreeView

Common items controls:

• ComboBox

• ListBox

• Menu

• StatusBar

• TabControl

• ToolBar

• TreeView

Can be different types

ItemsSource

Items

Attach event handlerAttach event handler

Handling Item Selection

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

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

Define event handlerDefine event handler

public void ListBox1_SelectionChanged( object sender, SelectionChangedEventArgs e){ ...}

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

• Some Windows Forms controls have no equivalent in WPF

• Reuse existing investment in Windows Forms code

Examples:

• DataGridView

• DateTimePicker

• FolderBrowserDialog

• NotifyIcon

Examples:

• DataGridView

• DateTimePicker

• FolderBrowserDialog

• NotifyIcon

System.Windows.Formsassembly

System.Windows.Formsassembly

Referencing Windows Forms Controls in a WPF Application

Add references to the following assemblies:

WPF ApplicationWPF ApplicationWindowsFormsIntegration

assemblyWindowsFormsIntegration

assembly

Using Windows Forms Controls in XAML

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

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

WindowsFormsHost

element

WindowsFormsHost

element

DateTimePicker

child control

DateTimePicker

child control

Add required XML namespace declarations to root <Window> elementAdd required XML namespace declarations to root <Window> element

Interacting with Windows Forms Controls

<wfi:WindowsFormsHost ... >

</wfi:WindowsFormsHost>

<wfi:WindowsFormsHost ... >

</wfi:WindowsFormsHost>

<wf:DateTimePicker ... /><wf:DateTimePicker ... />

• WindowsFormsHost element

• Manipulate default child properties

• WindowsFormsHost element

• Manipulate default child properties

• Child property

• Cast to relevant type

• Attach event handlers

• Manipulate properties

• Child property

• Cast to relevant type

• Attach event handlers

• Manipulate properties

(this.wfh.Child as DateTimePicker).ValueChanged += new EventHander(Window1_ValueChanged);(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