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

Resources provide a simple way to reuse commonly defined objects and valuesResources provide a simple way to reuse commonly defined objects and values

For example: brushes, styles, and control templates For example: brushes, styles, and control templates

What Are Resources?

XAML

Code

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

Defining Resources

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>

To reference a resource statically:To reference a resource statically:

Referencing Resources in XAML

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

MyResources2.xaml

Reusing Resources Across Applications

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

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:WPF provides several localization features:

• Automatic layout

• Localization attributes and comments

• Bidirectional content support

FlowDirection property

Number substitution

• Localized content in satellite assemblies

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

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:

Enables you to represent user interface properties such

as font and background color as styles

Enables you to represent user interface properties such

as font and background color as styles

• Enables you to apply styles to multiple controls

• Promotes consistent appearance of controls

• Enables you to apply styles to multiple controls

• Promotes consistent appearance of controls

Style Control

<Resources />

Defining Styles

<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

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

Extending Styles

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

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:

What Are Control Templates?

• The behavior is defined by a predefined control class

• The appearance is defined by a default ControlTemplate

• The behavior is defined by a predefined control class

• The appearance is defined by a default ControlTemplate

• Define a new ControlTemplate for the control• Define a new ControlTemplate for the control

Control

To define a control template for a content control:To define a control template for a content control:

1. Define a <Style> for a type of control

2. Set the Template property to a ControlTemplate

3. Define a ContentPresenter for the control content

1. Define a <Style> for a type of control

2. Set the Template property to a ControlTemplate

3. Define a ContentPresenter for the control content

Defining a Control Template for a Content Control

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

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

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 goesSpecifies the place in the control’s visual tree where the ItemsPanelTemplate goesItemsPresenter

Defining a Control Template for an Items Control

Horizontal ListBox

Providing User Customization by Using 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 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:A trigger sets properties or starts actions:

Triggered by property value changes or eventsTriggered by property value changes or events

Trigger types:Trigger types:

• EventTrigger

• PropertyTrigger

• EventTrigger

• PropertyTrigger

• MultiTrigger

• DataTrigger and MultiDataTrigger

Trigger actions enable triggers to perform actions:Trigger actions enable triggers to perform actions:

• EnterActions and ExitActions properties

• Actions property for event triggers

• EnterActions and ExitActions properties

• Actions property for event triggers

Defining Property Triggers

To define a property trigger:To define a property trigger:

Define a Trigger element Define a Trigger element11

Specify the property that initiates the trigger Specify the property that initiates the trigger22

Define the behavior of the trigger Define the behavior of the trigger33

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>

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:Animations enable you to animate controls and graphical objects:

• Animate properties such as Width, Height, and Opacity

• Grouped together by using Storyboard objects

• Animate properties such as Width, Height, and Opacity

• Grouped together by using Storyboard objects

Types of animation:Types of animation:

• ColorAnimation

• DoubleAnimation

• PointAnimation

• Custom

• ColorAnimation

• DoubleAnimation

• PointAnimation

• Custom

You add animation elements to a Storyboard element to define animationsYou add animation elements to a Storyboard element to define animations

Defining Animations

<Rectangle Name="MyRectangle" ...> <Rectangle.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0.0" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>

<Rectangle Name="MyRectangle" ...> <Rectangle.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0.0" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>

EventTrigger

Trigger action

Storyboard

Animation

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