Module 11 Control Customization

Module Overview Overview of Control Authoring Creating Controls Managing Control Appearance by Using Visual States Integrating WPF and Windows Forms Technologies

Lesson 1: Overview of Control Authoring Why Create New Controls? Options for Creating New Controls Implementing User Controls Implementing Custom Controls Deriving from the FrameworkElement Class

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 FrameworkElementControlUserControl WPF provides three control-authoring models: Deriving from the UserControl class Deriving from the Control class Deriving from the FrameworkElement class

Implementing User Controls To create a user control: Define a UserControl element by using XAML Define a class that inherits from the UserControl class Use styles and triggers if required You may want to create 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

Implementing Custom Controls To create a custom control: Define a class that inherits from the Control class Define a ControlTemplate element Use themes if required You may want to create a custom control when: You want to enable customization of your control by using control templates You want your control to support various themes

Deriving from the FrameworkElement Class There are two method to create a control that derives from the FrameworkElement class: Direct rendering Custom element composition You may want to create a FrameworkElement-derived control when: You want precise control over appearance You want to use your own rendering logic You want to use custom element composition

Lesson 2: 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 create a user control: 1.Create a UserControl XAML element 2.Add layout elements and standard controls 3.Implement a class that inherits from the UserControl class Up Up namespace MyNamespace { public class NumericUpDown : UserControl {... namespace MyNamespace { public class NumericUpDown : UserControl {...

Implementing Properties and Events To define properties and events for a user control: 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",...); Define properties as dependency properties Define events as routed events

Creating a Custom Control To define a custom control: namespace MyNamespace { public class NumericUpDown : Control {...}... namespace MyNamespace { public class NumericUpDown : Control {...}... <Application xmlns:local="clr-namespace:MyNamespace"...>... <ControlTemplate TargetType="{x:Type local:NumericUpDown}">... <Application xmlns:local="clr-namespace:MyNamespace"...>... <ControlTemplate TargetType="{x:Type local:NumericUpDown}">... Create a class that inherits from the Control class Define the appearance by using a Style element

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;... public class NumericUpDown : Control { public static RoutedCommand IncreaseCommand; public static RoutedCommand DecreaseCommand;... <RepeatButton Command="{x:Static local:NumericUpDown.IncreaseCommand}"...>Up <RepeatButton Command="{x:Static local:NumericUpDown.DecreaseCommand}"...>Down <RepeatButton Command="{x:Static local:NumericUpDown.IncreaseCommand}"...>Up <RepeatButton Command="{x:Static local:NumericUpDown.DecreaseCommand}"...>Down Defined in the template of a Style element

Enhancing Controls by Using Themes To create a theme file: [assembly: ThemeInfo( ResourceDictionaryLocation.None, ResourceDictionaryLocation.SourceAssembly)] [assembly: ThemeInfo( ResourceDictionaryLocation.None, ResourceDictionaryLocation.SourceAssembly)] 1.Create a folder named themes 2.Create generic.xaml in the themes folder 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: View the code for a user control implementation of the NumericUpDown control View the code for a custom control implementation of the NumericUpDown control

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

Lesson 3: Managing Control Appearance by Using Visual States Understanding the VisualStateManager Class Implementing Visual States for Controls Changing the Current Visual State Demonstration: Implementing Visual States by Using the VisualStateManager Class

Understanding the VisualStateManager Class VisualStateManager.VisualStateGroups VisualStateGroup VisualState VisualStateGroup.Transitions VisualState VisualTransition Control Code: Contains a Storyboard element [TemplateVisualState( Name = "Normal", GroupName = "CommonStates")] [TemplateVisualState( Name = "Normal", GroupName = "CommonStates")]

Implementing Visual States for Controls <ColorAnimation To="Green" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/> <VisualTransition To="Normal" GeneratedDuration="00:00:00"/> <VisualTransition To="MouseOver" GeneratedDuration="00:00:00.5"> <ColorAnimation To="Green" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/> <VisualTransition To="Normal" GeneratedDuration="00:00:00"/> <VisualTransition To="MouseOver" GeneratedDuration="00:00:00.5">

Changing the Current Visual State Control Code: VisualStateManager.GoToState(this, "MouseOver", true); Type of restrictionFrom propertyTo property From a specified state to another specified state Visual state name From any state to a specified stateNot set Visual state name From a specified state to any state Visual state name Not set From any state to any stateNot set Default transition

Demonstration: Implementing Visual States by Using the VisualStateManager Class In this demonstration, you will see how to: Open the existing application View the control template View the visual states View the visual state transitions View the NumericUpDown control code Run the application

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

Lesson 4: Integrating WPF and Windows Forms Technologies Understanding WPF and Windows Forms Integration Hosting Windows Forms Controls in a WPF Application Hosting WPF Controls in a Windows Forms Application

Understanding WPF and Windows Forms Integration Windows Forms integration: Reuse existing investment in Windows Forms code Some Windows Forms controls have no WPF equivalent WPF integration: Enhance existing investment in Windows Forms code Enables iterative approach to migration to WPF

Hosting Windows Forms Controls in a WPF Application WindowsFormsHost element WindowsFormsHost element System.Windows.Forms and WindowsFormsIntegration assemblies System.Windows.Forms and WindowsFormsIntegration assemblies Child property Cast to relevant type Attach event handlers Manipulate properties Child property Cast to relevant type Attach event handlers Manipulate properties (this.wfh.Child as MaskedTextBox).ValueChanged += new EventHandler(this.MaskedTextBox_ValueChanged); (this.wfh.Child as MaskedTextBox).ValueChanged += new EventHandler(this.MaskedTextBox_ValueChanged);

Hosting WPF Controls in a Windows Forms Application private void MyForm_Load(object sender, EventArgs e) { elemHost = new ElementHost();... System.Windows.Controls.Button wpfButton = new System.Windows.Controls.Button(); wpfButton.Content = "Windows Presentation Foundation Button"; elemHost.Child = wpfButton; // Map the Margin property. this.AddMarginMapping(); // Remove the mapping for the Cursor property. this.RemoveCursorMapping(); // Cause the OnMarginChange delegate to be called. elemHost.Margin = new Padding(23, 23, 23, 23); } private void MyForm_Load(object sender, EventArgs e) { elemHost = new ElementHost();... System.Windows.Controls.Button wpfButton = new System.Windows.Controls.Button(); wpfButton.Content = "Windows Presentation Foundation Button"; elemHost.Child = wpfButton; // Map the Margin property. this.AddMarginMapping(); // Remove the mapping for the Cursor property. this.RemoveCursorMapping(); // Cause the OnMarginChange delegate to be called. elemHost.Margin = new Padding(23, 23, 23, 23); } WindowsFormsIntegration assembly

Lab: Building a User Control Exercise 1: Choosing the Appropriate Control Type Exercise 2: Creating a WPF User Control Exercise 3: Adding a WPF Control to a Windows Forms Application Logon information Estimated time: 45 minutes

Lab Scenario You have been asked to turn your prototype graphic control into a control that the Product Inventory application will consume. The Product Inventory application is written by using Windows Forms, but you will use WPF to write the new control; therefore, you must also integrate the new control into the older application.

Lab Review Review Questions Which method do you use to create a dependency property? Which control do you use to host a WPF control in a Windows Forms application? Which property do you use to add or remove property mappings for a hosted control?

Module Review and Takeaways Review Questions Best Practices