Visual Studio® 2008:

Windows® Presentation
Foundation
Module 6: Creating New Controls
• Overview of Control Authoring

• Creating Controls
Lesson: Overview of Control Authoring
• Why Create New Controls?

• Options for Creating New Controls

• User Controls

• Custom Controls

• FrameworkElement-Derived Controls
Why Create New Controls?

WPF provides many features that reduce the need to

create new controls:

• Rich content
• Styles
• Control templates
• Triggers
• Data templates
Options for Creating New Controls

WPF provides three control-authoring models:

• Deriving from the UserControl class

• Deriving from the Control class
• Deriving from the FrameworkElement class

UserControl Control FrameworkElement

User Controls

To create a user control:

• Define a UserControl element by using XAML
• Define a class that inherits from UserControl
• Use styles and triggers if required

Consider creating a user control when:

• You want to build a control in a similar manner to how you
build an application
• Your control consists only of existing components
• You do not need to support complex customization
Custom Controls

To create a custom control:

• Define a class that inherits from Control
• Define a ControlTemplate element
• Use themes if required

Consider creating a custom control when:

• You want to enable customization of your control by using
control templates
• You want your control to support various themes
FrameworkElement-Derived Controls

There are two methods to create a FrameworkElement-

derived control:

• Direct rendering
• Custom element composition

Consider using a FrameworkElement-derived control

when:
• You want precise control over the appearance
• You want to use your own rendering logic
• You want to use custom element composition
Lesson: Creating Controls
• Creating a User Control

• Implementing Properties and Events

• Creating a Custom Control

• Implementing Commands

• Enhancing Controls by Using Themes

• Demonstration: Implementing a NumericUpDown Control

Creating a User Control

To implement the UI of a user control:

• Create a UserControl XAML element
• Add layout elements and standard controls
• Implement a class that inherits from UserControl

<UserControl x:Class="MyNamespace.NumericUpDown" ...>

<Grid ...>
<TextBlock .../>
<RepeatButton ...>Up</RepeatButton>

namespace MyNamespace
{
public class NumericUpDown : UserControl
{
...
 Implementing Properties and Events

To define properties and events for a user control:

• Define properties as dependency properties
• Define events as routed events

public static readonly DependencyProperty ValueProperty

= DependencyProperty.Register("Value", ...);

public decimal Value

{
get { return (decimal)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}

public static readonly RoutedEvent ValueChangedEvent

= EventManager.RegisterRoutedEvent("ValueChanged", ...);
Creating a Custom Control

To define a custom control:

• Create a class that inherits from the Control class
• Define the appearance by using a Style element

namespace MyNamespace
{
public class NumericUpDown : Control {...}
...

<Application
xmlns:local="clr-namespace:MyNamespace" ...>
<Application.Resources>
...
<ControlTemplate
TargetType="{x:Type local:NumericUpDown}">
<Grid>
...
Implementing Commands

You implement commands in custom controls to decouple

the event handling for the control

public class NumericUpDown : Control

{
public static RoutedCommand IncreaseCommand;
public static RoutedCommand DecreaseCommand;
...
Defined in the template of
a Style element
<RepeatButton
Command="{x:Static local:NumericUpDown.IncreaseCommand}"
...>Up</RepeatButton>
<RepeatButton
Command="{x:Static local:NumericUpDown.DecreaseCommand}"
...>Down</RepeatButton>
Enhancing Controls by Using Themes

To create a theme file:

• Create a folder named themes
• Create generic.xaml
• Define a ResourceDictionary with the Style element
• Specify the theme location in the hosting application

<ResourceDictionary ...>
<Style TargetType="{x:Type local:NumericUpDown}">
<ControlTemplate TargetType="{x:Type ...}">
...

Defined in generic.xaml
[assembly: ThemeInfo(
ResourceDictionaryLocation.None,
ResourceDictionaryLocation.SourceAssembly)]

In the hosting application

Demonstration: Implementing a NumericUpDown
Control
In this demonstration, you will see how to:
• Implement a user control

• Implement a custom control

Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
Lab: Enhancing User Interfaces by Using
Custom Controls
• Exercise 1: Implementing a Custom Control

Logon information
Virtual machine 6460A-LON-DEV-06

User name Student

Password Pa$$w0rd

Estimated time: 60 minutes

Lab Review
• How do you implement a custom control?

• How do you define the appearance of a custom control?

Module Review and Takeaways
• Review Questions

• Best Practices