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 pass 1 1 Hello World! Evaluate 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 pass 2 2 Window or Page element Determine the final size of each child object and place in its layout slot Layout class Child objects

WPF Layout Classes Canvas VirtualizingStackPanel DockPanel Grid StackPanel Wrap 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

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 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 Examples Text DateTime UIElement Multiple objects This is text content of a Button04/03/ :06 Button

Demonstration: Creating a User Interface by Using Content Controls In this demonstration, you will see how to use the ContentControl class

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

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 TabItem header TabItem header GroupBox 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

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 handler <ListBox SelectionChanged="ListBox1_SelectionChanged">... <ListBox SelectionChanged="ListBox1_SelectionChanged">... Define 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

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

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 values For example: brushes, styles, and control templates XAML Code

Defining Resources 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 XAML

Referencing Resources in XAML To reference a resource statically PropertyName="{StaticResource ResourceKey}" <Button Background="{StaticResource blueBrush}" Foreground="{StaticResource whiteBrush}"> Text <Button Background="{StaticResource blueBrush}" Foreground="{StaticResource whiteBrush}"> Text To reference a resource dynamically PropertyName="{DynamicResource ResourceKey}" <Button Background="{DynamicResource blueBrush}" Foreground="{DynamicResource whiteBrush}"> Text <Button Background="{DynamicResource blueBrush}" Foreground="{DynamicResource whiteBrush}"> Text

Referencing Resources Programmatically FindResource method SolidColorBrush brush = (SolidColorBrush) this.FindResource("whiteBrush"); SolidColorBrush brush = (SolidColorBrush) this.FindResource("whiteBrush"); SetResourceReference method this.myButton.SetResourceReference( Button.BackgroundProperty, "whiteBrush"); this.myButton.SetResourceReference( Button.BackgroundProperty, "whiteBrush"); Resources 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