Module 4 Taking Control of the User Interface

Module Overview Sharing Logical Resources in an Application Creating Consistent User Interfaces by Using Styles Changing the Appearance of Controls by Using Templates Handling Events and Commands

Lesson 1: Sharing Logical Resources in an Application Understanding Resources Defining Resources Referencing Resources in XAML Referencing Resources Programmatically Reusing Resources Across Applications

Resources provide a simple way to reuse commonly defined objects and values Understanding Resources 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

Reusing Resources Across Applications MyResources2.xaml Merged resource dictionaries: <ResourceDictionary Source="Resources\MyResources1.xaml" /> <ResourceDictionary Source="Resources\MyResources2.xaml" /> <ResourceDictionary Source="Resources\MyResources1.xaml" /> <ResourceDictionary Source="Resources\MyResources2.xaml" /> MyResources1.xaml Merged Resource Dictionary

Lesson 2: Creating Consistent User Interfaces by Using Styles Understanding Styles Defining Styles in XAML Extending Styles Setting Styles Programmatically

Understanding Styles You use styles to apply property values to elements: You typically define styles in Resources sections in XAML: You use styles to apply property values to elements: You typically define styles in Resources sections in XAML: Enable you to represent user interface properties such as font and background color as styles Enable you to represent user interface properties such as font and background color as styles Enable you to apply styles to multiple controls Promote consistent appearance of controls Enable you to apply styles to multiple controls Promote consistent appearance of controls Style Control

Defining Styles in XAML Style for all Label elements To define a style that sets properties for all elements of a specified type: Define a Style element 1 1 Set the TargetType property to an element type 2 2 Define Setter child elements to set property values 3 3

Extending Styles You extend a style by using the BasedOn property... <Style x:Key="headerText" BasedOn="{StaticResource myStyle}" TargetType="{x:Type Label}"> <Label Content="Title Text" Style="{StaticResource headerText}" /> <Label Content="Hello world" Style="{StaticResource myStyle}" />... <Style x:Key="headerText" BasedOn="{StaticResource myStyle}" TargetType="{x:Type Label}"> <Label Content="Title Text" Style="{StaticResource headerText}" /> <Label Content="Hello world" Style="{StaticResource myStyle}" /> headerText myStyle Title Text Hello world

Setting Styles Programmatically textblock1.Style = (Style)(Resources["TitleText"]); To apply a style programmatically: Index into the Resources collection 1 1 Cast the resource object into a Style instance 2 2 Set the Style property on the control 3 3 You can also modify styles programmatically to add, remove, or modify styles in the Resources collection

Lesson 3: Changing the Appearance of Controls by Using Templates Understanding Control Templates Defining a Template for a Content Control Defining a Template for an Items Control Applying Template Bindings Demonstration: Changing the Appearance of Controls by Using Control Templates

Understanding Control Templates Behavior class ControlTemplate Controls have built-in appearance and behavior: To customize the appearance and structure of a control: Controls have built-in appearance and behavior: To customize the appearance and structure of a control: The behavior is defined by a predefined control class The appearance is defined by a default ControlTemplate class The behavior is defined by a predefined control class The appearance is defined by a default ControlTemplate class Define a new ControlTemplate object for the control Control

Defining a Template for a Content Control To define a control template for a content control: 1.Define a Style element for a type of control 2.Set the Template property to a ControlTemplate object 3.Define a ContentPresenter element for the control content 1.Define a Style element for a type of control 2.Set the Template property to a ControlTemplate object 3.Define a ContentPresenter element for the control content <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Top"/>... <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Top"/>...

Defining a Template for an Items Control Identifies a panel as the container for the control’s items IsItemsHost Specifies the panel that the items control uses for the layout of items ItemsPanelTemplate Specifies the place in the control’s visual tree where the ItemsPanelTemplate element goes ItemsPresenter Horizontal ListBox

Applying Template Bindings You use a template binding to define properties in the control template: Enables the control template to use ambient property values <Border Background="{TemplateBinding ListBox.Background}" CornerRadius="5">... <Border Background="{TemplateBinding ListBox.Background}" CornerRadius="5">...

Demonstration: Changing the Appearance of Controls by Using Control Templates In this demonstration, you will see how to: Modify the appearance of content controls by using control templates Modify the appearance of items controls by using control templates

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

Lesson 4: Handling Events and Commands Understanding Events in WPF Handling Events Understanding Routed Events Handling Routed Events Understanding Commands Defining Commands

Understanding Events in WPF WPF controls generate events such as: Clicking buttons Entering text Selecting lists Gaining focus

Handling Events Implement the event-handler method in the code-behind file Specify an event handler in the XAML file Click here Click here public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show("Hello WPF"); } public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show("Hello WPF"); }

Understanding Routed Events Root element Child element #1 Child element #2 Leaf element #1 Leaf element #2 Leaf element #2 WPF can route events up or down the element tree Event bubbling: Event routed up element tree Event bubbling: Event routed up element tree Event tunneling: Event routed down element tree Event tunneling: Event routed down element tree Tunnel Bubble Item clicked

Handling Routed Events Example of event bubbling Define leaf elements inside a container element Handle leaf events at the container level Yes No Yes No private void CommonClickHandler(object sender, RoutedEventArgs e) { var b = e.Source as Button;... } private void CommonClickHandler(object sender, RoutedEventArgs e) { var b = e.Source as Button;... }

Understanding Commands Commands separate the semantics of an action from its logic Multiple sources can trigger the same command You can customize the command logic for different targets Key concepts in WPF commanding: Commands Command sources Command targets Command bindings Examples of predefined commands: Copy, Cut, and Paste

Defining Commands Implement the event-handler method in the code-behind file Specify the CommandBindings element in the XAML file <CommandBinding Command=“Close” CanExecute=“OnCloseCanExecute” Executed=“OnCloseExecuted”/> <CommandBinding Command=“Close” CanExecute=“OnCloseCanExecute” Executed=“OnCloseExecuted”/> private void OnCloseCanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; } private void OnCloseExecuted(object sender, ExecutedRoutedEventArgs e) { this.Close(); } private void OnCloseCanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; } private void OnCloseExecuted(object sender, ExecutedRoutedEventArgs e) { this.Close(); }

Lab: Dynamically Controlling the User Interface Exercise 1: Creating Styles Exercise 2: Adding Application Commands Exercise 3: Adding Routed Events Exercise 4: Creating a Custom Command Exercise 5: Migrating a Custom Command Logon information Estimated time: 45 minutes

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

Lab Scenario You need to update the Work Orders application to meet the styling requirements of the application. You need to organize the inline styles into separate resource dictionaries. You must then provide the user with the ability to change the styles of the application while the application is running.

Lab Review Review Questions How do you merge multiple resource dictionary elements together? How do you migrate a RoutedUICommand class to fit with the MVVM design pattern?

Module Review and Takeaways Review Questions Best Practices