6460A_06

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:WPF provides many features that reduce the need to create new controls:

• Rich content

• Styles

• Control templates

• Triggers

• Data templates

• Rich content

• Styles

• Control templates

• Triggers

• Data templates

Options for Creating New Controls

WPF provides three control-authoring models:WPF provides three control-authoring models:

• Deriving from the UserControl class

• Deriving from the Control class

• Deriving from the FrameworkElement class

• Deriving from the UserControl class

• Deriving from the Control class

• Deriving from the FrameworkElement class

FrameworkElementControlUserControl

User Controls

To create a user control:To create a user control:

1. Define a UserControl element by using XAML

2. Define a class that inherits from UserControl

3. Use styles and triggers if required

1. Define a UserControl element by using XAML

2. Define a class that inherits from UserControl

3. Use styles and triggers if required

Consider creating a user control when: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

• 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:To create a custom control:

1. Define a class that inherits from Control

2. Define a ControlTemplate element

3. Use themes if required

1. Define a class that inherits from Control

2. Define a ControlTemplate element

3. Use themes if required

Consider creating a custom control when: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

• 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:There are two methods to create a FrameworkElement-derived control:

• Direct rendering

• Custom element composition

• Direct rendering

• Custom element composition

Consider using a FrameworkElement-derived control when: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

• 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

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

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

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

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

namespace MyNamespace{

public class NumericUpDown : UserControl{

...

namespace MyNamespace{

public class NumericUpDown : UserControl{

...

To implement the UI of a user control:To implement the UI of a user control:

1. Create a UserControl XAML element

2. Add layout elements and standard controls

3. Implement a class that inherits from UserControl

1. Create a UserControl XAML element

2. Add layout elements and standard controls

3. Implement a class that inherits from UserControl

Implementing Properties and Events

public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", ...);

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

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", ...);

public static readonly RoutedEvent ValueChangedEvent = EventManager.RegisterRoutedEvent("ValueChanged", ...);

To define properties and events for a user control:To define properties and events for a user control:

• Define properties as dependency properties

• Define events as routed events

• Define properties as dependency properties

• Define events as routed events

Creating a Custom Control

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

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

namespace MyNamespace{

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

namespace MyNamespace{

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

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

• Create a class that inherits from the Control class

• Define the appearance by using a Style element

Implementing Commands

public class NumericUpDown : Control{ public static RoutedCommand IncreaseCommand; public static RoutedCommand DecreaseCommand;

...

public class NumericUpDown : Control{ public static RoutedCommand IncreaseCommand; public static RoutedCommand DecreaseCommand;

...

<RepeatButton Command="{x:Static local:NumericUpDown.IncreaseCommand}"

...>Up</RepeatButton><RepeatButton Command="{x:Static local:NumericUpDown.DecreaseCommand}"

...>Down</RepeatButton>

<RepeatButton Command="{x:Static local:NumericUpDown.IncreaseCommand}"

...>Up</RepeatButton><RepeatButton Command="{x:Static local:NumericUpDown.DecreaseCommand}"

...>Down</RepeatButton>

You implement commands in custom controls to decouple the event handling for the controlYou implement commands in custom controls to decouple the event handling for the control

Defined in the template of a Style element

Enhancing Controls by Using Themes

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

...

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

...

[assembly: ThemeInfo( ResourceDictionaryLocation.None, ResourceDictionaryLocation.SourceAssembly)]

[assembly: ThemeInfo( ResourceDictionaryLocation.None, ResourceDictionaryLocation.SourceAssembly)]

To create a theme file:To create a theme file:

1. Create a folder named themes

2. Create generic.xaml

3. Define a ResourceDictionary with the Style element

4. Specify the theme location in the hosting application

1. Create a folder named themes

2. Create generic.xaml

3. Define a ResourceDictionary with the Style element

4. Specify the theme location in the hosting application

Defined in generic.xaml

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

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