1. Module 3 Designing and Developing a User Interface

2. Module Overview Defining Page Layout Using Content Controls Using Items Controls Sharing Logical Resources in a Window

3. Lesson 1: Defining Page Layout WPF Page Layout Model WPF Layout Classes Demonstration: Defining Layout by Using Panels Demonstration: Defining Layout by Using Grids

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

5. WPF Layout Classes Canvas VirtualizingStackPanel DockPanel Grid StackPanel Wrap Panel Panel Background Children ZIndex Panel Background Children ZIndex

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

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

9. Demonstration: Defining Layout by Using Grids In this demonstration, you will see how to use the Grid class

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

11. 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/2007 13:06 Button

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

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

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

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

16. Lesson 3: Using Items Controls Understanding Items Controls Handling Item Selection Demonstration: Creating a User Interface by Using Items Controls

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

18. 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) {... }

19. Demonstration: Creating a User Interface by Using Items Controls In this demonstration, you will see how to use the ListBox class

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

21. Lesson 4: Sharing Logical Resources in a window Understanding Resources Defining Resources Referencing Resources in XAML Referencing Resources Programmatically

22. Understanding Resources Resources provide a simple way to reuse commonly defined objects and values For example: brushes, styles, and control templates XAML Code

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

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

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

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

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

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

29. Module Review and Takeaways Review Questions Best Practices