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

Understanding Resources

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 statically:To 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 dynamically:To 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 method:FindResource method:

SolidColorBrush brush = (SolidColorBrush) this.FindResource("whiteBrush");SolidColorBrush brush = (SolidColorBrush) this.FindResource("whiteBrush");

SetResourceReference method:SetResourceReference method:

this.myButton.SetResourceReference( Button.BackgroundProperty, "whiteBrush");this.myButton.SetResourceReference( Button.BackgroundProperty, "whiteBrush");

Resources property: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:Merged resource dictionaries:

<Page.Resources> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Resources\MyResources1.xaml" /> <ResourceDictionary Source="Resources\MyResources2.xaml" /> </ResourceDictionary.MergedDictionaries></Page.Resources>

<Page.Resources> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Resources\MyResources1.xaml" /> <ResourceDictionary Source="Resources\MyResources2.xaml" /> </ResourceDictionary.MergedDictionaries></Page.Resources>

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

<Resources />

Defining Styles in XAML

<Page.Resources> <Style x:Key="myStyle" TargetType="{x:Type Label}"> <Setter Property="Background" Value="Blue" /> <Setter Property="Foreground" Value="White" /> </Style></Page.Resources>

<Page.Resources> <Style x:Key="myStyle" TargetType="{x:Type Label}"> <Setter Property="Background" Value="Blue" /> <Setter Property="Foreground" Value="White" /> </Style></Page.Resources> Style for all Label

elements

To define a style that sets properties for all elements of a specified type:To define a style that sets properties for all elements of a specified type:

Define a Style element Define a Style element11

Set the TargetType property to an element type Set the TargetType property to an element type22

Define Setter child elements to set property values Define Setter child elements to set property values33

Extending Styles

You extend a style by using the BasedOn propertyYou extend a style by using the BasedOn property

<Page.Resources> ... <Style x:Key="headerText" BasedOn="{StaticResource myStyle}" TargetType="{x:Type Label}"> ... </Style></Page.Resources>...<StackPanel> <Label Content="Title Text" Style="{StaticResource headerText}" /> <Label Content="Hello world" Style="{StaticResource myStyle}" />

<Page.Resources> ... <Style x:Key="headerText" BasedOn="{StaticResource myStyle}" TargetType="{x:Type Label}"> ... </Style></Page.Resources>...<StackPanel> <Label Content="Title Text" Style="{StaticResource headerText}" /> <Label Content="Hello world" Style="{StaticResource myStyle}" />

headerText

myStyleTitle TextHello world

Setting Styles Programmatically

textblock1.Style = (Style)(Resources["TitleText"]); textblock1.Style = (Style)(Resources["TitleText"]);

To apply a style programmatically:To apply a style programmatically:

Index into the Resources collection Index into the Resources collection11

Cast the resource object into a Style instance Cast the resource object into a Style instance22

Set the Style property on the control Set the Style property on the control33

You can also modify styles programmatically to add, remove, or modify styles in the Resources collectionYou 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• 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: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

<Style TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Fill="Blue"/> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Top"/> </Grid> ...</Style>

<Style TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Fill="Blue"/> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Top"/> </Grid> ...</Style>

Defining a Template for an Items Control

Identifies a panel as the container for the control’s itemsIdentifies a panel as the container for the control’s itemsIsItemsHost

Specifies the panel that the items control uses for the layout of itemsSpecifies the panel that the items control uses for the layout of itemsItemsPanelTemplate

Specifies the place in the control’s visual tree where the ItemsPanelTemplate element goes

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:You use a template binding to define properties in the control template:

Enables the control template to use ambient property values Enables the control template to use ambient property values

<Style TargetType="ListBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBox"> <Border Background="{TemplateBinding ListBox.Background}" CornerRadius="5"> ... </Border> </ControlTemplate> </Setter.Value> </Setter></Style>

<Style TargetType="ListBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBox"> <Border Background="{TemplateBinding ListBox.Background}" CornerRadius="5"> ... </Border> </ControlTemplate> </Setter.Value> </Setter></Style>

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

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: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 fileImplement the event-handler method in the code-behind file

Specify an event handler in the XAML fileSpecify an event handler in the XAML file

<Button Name="Button1" Click="Button1_Click"> Click here</Button>

<Button Name="Button1" Click="Button1_Click"> Click here</Button>

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 elementRoot element

Child element #1

Child element #1

Child element#2

Child element#2

Leaf element #1

Leaf element #1

Leaf element #2

Leaf element #2

WPF can route events up or down the element treeWPF can route events up or down the element tree

Event bubbling: Event routed up element treeEvent bubbling: Event routed up element tree

Event tunneling: Event routed down element treeEvent tunneling: Event routed down element tree

TunnelTunnel

TunnelTunnel

BubbleBubble

BubbleBubble

Item clickedItem clicked

Handling Routed Events

Example of event bubblingExample of event bubbling

• Define leaf elements inside a container element

• Handle leaf events at the container level

<StackPanel Button.Click="CommonClickHandler"> <Button Name="YesButton">Yes</Button> <Button Name="NoButton">No</Button></StackPanel>

<StackPanel Button.Click="CommonClickHandler"> <Button Name="YesButton">Yes</Button> <Button Name="NoButton">No</Button></StackPanel>

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 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:Key concepts in WPF commanding:

• Commands

• Command sources

• Command targets

• Command bindings

Examples of predefined commands:Examples of predefined commands:

• Copy, Cut, and Paste

Defining Commands

Implement the event-handler method in the code-behind fileImplement the event-handler method in the code-behind file

Specify the CommandBindings element in the XAML fileSpecify the CommandBindings element in the XAML file

<Window ...> <Window.CommandBindings> <CommandBinding Command=“Close” CanExecute=“OnCloseCanExecute” Executed=“OnCloseExecuted”/> </Window.CommandBindings> <Button Command=“Close” Content=“Close Application” /></Window>

<Window ...> <Window.CommandBindings> <CommandBinding Command=“Close” CanExecute=“OnCloseCanExecute” Executed=“OnCloseExecuted”/> </Window.CommandBindings> <Button Command=“Close” Content=“Close Application” /></Window>

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

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