Visual Studio® 2008:

Windows® Presentation
Foundation
Module 3: Customizing Appearance
• Sharing Logical Resources in an Application

• Creating Consistent User Interfaces by Using Styles

• Changing the Appearance of Controls by Using Control

Templates
• Enhancing User Interfaces by Using Triggers and
Animations
Lesson: Sharing Logical Resources in an Application
• What Are Resources?

• Defining Resources

• Referencing Resources in XAML

• Referencing Resources Programmatically

• Reusing Resources Across Applications

• Demonstration: Sharing Resources in a WPF Application

• Defining Localized Resources

What Are 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

XAML
<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:

PropertyName="{StaticResource ResourceKey}"

<Button Background="{StaticResource blueBrush}"

Foreground="{StaticResource whiteBrush}">
Text
</Button>

To reference a resource dynamically:

PropertyName="{DynamicResource ResourceKey}"

<Button Background="{DynamicResource blueBrush}"

Foreground="{DynamicResource whiteBrush}">
Text
</Button>
Referencing Resources Programmatically

FindResource method:

SolidColorBrush brush = (SolidColorBrush)

this.FindResource("whiteBrush");

Or TryFindResource
SetResourceReference method:

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

Resources property:

SolidColorBrush brush = (SolidColorBrush)

this.Resources["whiteBrush"];
Reusing Resources Across Applications

Merged resource dictionaries:

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

Merged Resource Dictionary

MyResources1.xaml MyResources2.xaml
Demonstration: Sharing Resources in a
WPF Application
In this demonstration, you will see how to:
• Define and reference resources by using XAML

• Define and reference resources programmatically

Defining Localized Resources

WPF provides several localization features:

• Automatic layout
• Localization attributes and comments
• Bidirectional content support
 FlowDirection property
 Number substitution
• Localized content in satellite assemblies
Lesson: Creating Consistent User Interfaces by
Using Styles
• What Are Styles?

• Defining Styles

• Extending Styles

• Setting Styles Programmatically

What Are Styles?

You use styles to apply property values to elements:

Enables you to represent user interface properties such
as font and background color as styles

You typically define styles in Resources sections in

XAML:
• Enables you to apply styles to multiple controls
• Promotes consistent appearance of controls

Style Control

<Resources />
Defining Styles

To define a style that sets properties for all elements

of a specified type:

1 Define a <Style> element

2 Set the TargetType property to an element type

3 Define <Setter> child elements to set property values

<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
Extending Styles

You 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}" />

headerText
Title Text myStyle

Hello world
Setting Styles Programmatically

To apply a style programmatically:

1 Index into the Resources collection

2 Cast the resource object into a Style instance

3 Set the Style property on the control

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

You can also modify styles programmatically to add, remove, or

modify styles in the Resources collection
Lesson: Changing the Appearance of Controls by
Using Control Templates
• What Are Control Templates?

• Defining a Control Template for a Content Control

• Defining a Control Template for an Items Control

• Providing User Customization by Using Template Bindings

• Demonstration: Changing the Appearance of Controls by

Using Control Templates
What Are Control Templates?

Controls have built-in appearance and behavior:

• The behavior is defined by a predefined control class
• The appearance is defined by a default ControlTemplate

To customize the appearance and structure of a

control:
• Define a new ControlTemplate for the control

Behavior class

Control
ControlTemplate
Defining a Control Template for a Content Control

To define a control template for a content control:

• Define a <Style> for a type of control
• Set the Template property to a ControlTemplate
• Define a ContentPresenter 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>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Defining a Control Template for an Items Control

Identifies a panel as the container for the

IsItemsHost
control’s items

Specifies the panel that the items control

ItemsPanelTemplate
uses for the layout of items

Specifies the place in the control’s visual

ItemsPresenter
tree where the ItemsPanelTemplate goes

Horizontal ListBox
Providing User Customization by Using Template
Bindings

You use a template binding to define properties in

the control template:
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>
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 a items controls by using control
templates
Lesson: Enhancing User Interfaces by Using
Triggers and Animations
• What Are Triggers?

• Defining Property Triggers

• What Are Animations?

• Defining Animations

• Demonstration: Enhancing Controls by Using Triggers and

Animations
What Are Triggers?

A trigger sets properties or starts actions:

Triggered by property value changes or events

Trigger types:
• EventTrigger • MultiTrigger

• PropertyTrigger • DataTrigger and MultiDataTrigger

Trigger actions enable triggers to perform actions:

• EnterActions and ExitActions properties

• Actions property for event triggers
Defining Property Triggers

To define a property trigger:

1 Define a Trigger element

2 Specify the property that initiates the trigger

3 Define the behavior of the trigger

Style TargetType="{x:Type ListBoxItem}">

<Setter Property="Opacity" Value="0.5" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Opacity" Value="1.0" />
</Trigger>
</Style.Triggers>
</Style>
What Are Animations?

Animations enable you to animate controls and

graphical objects:

• Animate properties such as Width, Height, and Opacity

• Grouped together by using Storyboard objects

Types of animation:
• ColorAnimation

• DoubleAnimation

• PointAnimation

• Custom
Defining Animations

You add animation elements to a Storyboard element

to define animations
EventTrigger
<Rectangle Name="MyRectangle" ...>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard> Trigger action
<DoubleAnimation
Storyboard Duration="0:0:1"
Storyboard.TargetProperty="Opacity"
Animation To="0.0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Demonstration: Enhancing Controls by Using
Triggers and Animations
In this demonstration, you will see how to enhance the
visual impact of controls by using triggers and animations
Lab: Customizing the Appearance of a WPF
Application
• Exercise 1: Sharing Logical Resources in an Application

• Exercise 2: Creating Consistent User Interfaces by Using

Styles
• Exercise 3: Changing the Appearance of Controls by Using
Control Templates
• Exercise 4: Enhancing the User Interface by Using Triggers

and Animations
Logon information

Virtual machine 6460A-LON-DEV-03

User name Student

Password Pa$$w0rd

Estimated time: 60 minutes

Lab Review
• How do you use multiple XAML resource files in a merged
dictionary?
• How do you create a Style that applies to all elements of
a particular type?
• How do you modify the structure and appearance of a
control?
• How do you create a property trigger?

• How do you create a Style that applies to selected

elements?
Module Review and Takeaways
• Review Questions

• Best Practices Related to Styles

• Best Practices Related to Animation

• Tools