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