Embed Size (px)
Citation preview
Module 3
Designing and Developing
a User Interface
Module Overview
• Defining Page Layout
• Using Content Controls
• Using Items Controls
• Sharing Logical Resources in a Window
Lesson 1: 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
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
•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 in its layout slotDetermine the final size of each child object and place in its layout slot
Layout class
Child objects
WPF Layout Classes
CanvasCanvas
VirtualizingStackPanelVirtualizingStackPanel
DockPanelDockPanel
GridGrid
StackPanelStackPanel
Wrap PanelWrap Panel
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 the Grid class
Lesson 2: Using Content Controls
• Understanding Content Controls
• Demonstration: Creating a User Interface by Using Content Controls
• Understanding Headered Content Controls
• Demonstration: Creating a User Interface by Using Headered Content Controls
Understanding Content Controls
Common content controls:
• Button
• CheckBox
• GroupItem
• Label
• RadioButton
• RepeatButton
• ToggleButton
• ToolTip
Common content controls:
• Button
• CheckBox
• GroupItem
• Label
• RadioButton
• RepeatButton
• ToggleButton
• ToolTip
•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 UsingContent Controls
In this demonstration, you will see how to use the ContentControl class
Understanding Headered Content Controls
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
•Example•Example
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 3: Using Items Controls
• Understanding Items Controls
• Handling Item Selection
• Demonstration: Creating a User Interface by Using Items Controls
Understanding Items Controls
• 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
Handling Item Selection
Attach event handlerAttach event handler
<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 4: Sharing Logical Resources in a window
• Understanding Resources
• Defining Resources
• Referencing Resources in XAML
• Referencing Resources Programmatically
Understanding Resources
Resources provide a simple way to reuse commonly defined objects and valuesResources provide a simple way to reuse commonly defined objects and values
For example: brushes, styles, and control templates For example: brushes, styles, and control templates
XAML
Code
Defining Resources
You can define resources at various levels:You can define resources at various levels:
• Application scope
• Window or Page scope
• Element-level scope
• Application scope
• Window or Page scope
• Element-level scope
XAMLXAML<Window.Resources> <SolidColorBrush x:Key="blueBrush" Color="Blue"/> <SolidColorBrush x:Key="whiteBrush" Color="White"/> <sys:Double x:Key="myValue">100</sys:Double></Window.Resources>
<Window.Resources> <SolidColorBrush x:Key="blueBrush" Color="Blue"/> <SolidColorBrush x:Key="whiteBrush" Color="White"/> <sys:Double x:Key="myValue">100</sys:Double></Window.Resources>
Referencing Resources in XAML
To reference a resource staticallyTo reference a resource statically
PropertyName="{StaticResource ResourceKey}"PropertyName="{StaticResource ResourceKey}"
<Button Background="{StaticResource blueBrush}" Foreground="{StaticResource whiteBrush}"> Text</Button>
<Button Background="{StaticResource blueBrush}" Foreground="{StaticResource whiteBrush}"> Text</Button>
To reference a resource dynamicallyTo reference a resource dynamically
PropertyName="{DynamicResource ResourceKey}"PropertyName="{DynamicResource ResourceKey}"
<Button Background="{DynamicResource blueBrush}" Foreground="{DynamicResource whiteBrush}"> Text</Button>
<Button Background="{DynamicResource blueBrush}" Foreground="{DynamicResource whiteBrush}"> Text</Button>
Referencing Resources Programmatically
FindResource methodFindResource method
SolidColorBrush brush = (SolidColorBrush) this.FindResource("whiteBrush");SolidColorBrush brush = (SolidColorBrush) this.FindResource("whiteBrush");
SetResourceReference methodSetResourceReference method
this.myButton.SetResourceReference( Button.BackgroundProperty, "whiteBrush");this.myButton.SetResourceReference( Button.BackgroundProperty, "whiteBrush");
Resources propertyResources property
SolidColorBrush brush = (SolidColorBrush) this.Resources["whiteBrush"];SolidColorBrush brush = (SolidColorBrush) this.Resources["whiteBrush"];
Or TryFindResource
Lab: Building a User Interface
• Exercise 1: Choosing User Interface Controls
• Exercise 2: Laying Out the User Interface
• Exercise 3: Creating and Using Resource Dictionaries
Logon information
Estimated time: 75 minutes
Lab Scenario
You have been asked to design and write the UI for the Work Orders application that was described in Module 1. You must first identify the appropriate WPF controls to use to display and manipulate the Work Orders data and then build the UI by using these controls with XAML.
Lab Review
Review Questions
• Why is the Grid control a good choice for general layout purposes?
• Why is the ListView control a good choice for displaying live data?
• Why would you want to put resources in a ResourceDictionary element?
Module Review and Takeaways
• Review Questions
• Best Practices
