Here are the steps to create a generic form control: 1. Derive a class from Control 2. Define dependency properties for form title, help text, IsValid 3. Register routed events for Submit and Cancel 4. Define attached properties to specify submit/cancel buttons and input controls 5. Create a default style with templates for view and edit modes 6. Implement validation logic and update IsValid 7. Handle submit/cancel button clicks to trigger events The key aspects are using dependency properties, routed events, attached properties and templates to create a reusable form control.

1. Presented by G. Sharada

2. Who is this training for?
 Preferably, has attended Session #1 training for WPF

3. What I intend to do.
 Problem solution approach: use sample applications to
showcase the practical application of the topics to be
covered.
 Less focus on theory, more on coding.

4. Word of caution
 In Windows Forms, there are two ways to do everything: a
good way and a bad way.
 In WPF, there are ten ways to do everything: two that are
amazing, 3 that are good, 1 that is bad, and 4 that suck.
 It’s distinguishing the 2 amazing solutions which is so
challenging. So how do we get there?

5. Excellent Resources on WPF
 Online Resources
 MSDN
 http://www.wpftutorial.net/
 http://drwpf.com/blog/
 http://joshsmithonwpf.wordpress.com/a-guided-tour-of-wpf/
 Books
 WPF 4 Unleashed
 Pro WPF in C# 2010
 WPF Control Development Unleashed
 WPF Recipes in C# 2008
 Case studies
 Vertigo Family.Show
 PhotoSuru

6. Agenda
Dependency Properties • 25 minutes
Routed Events • 20 minutes
Control Authoring • 25 minutes
Data Binding • 25 minutes
Convertors • 20 minutes
Validation • 20 minutes
Exercise #1 – Creating a generic form control
Q&A

8. Dependency properties
 Not normal properties
 A completely new implementation of properties
 Needed to use core WPF features such as animation,
data binding and styles.
 Although, they are designed to be consumed in the
same way as normal properties – but they vastly differ
in their implementation behind the scenes.
 Performance was the motivating factor

9. Defining a dependency property
 Dependency property can be added to only
dependency objects
 Is defined as a static field in the associated class
public static readonly DependencyProperty
IsSpinningProperty;

10. Registering a dependency property
 To use dependency property we need to register it with
WPF
 Is performed in a static constructor for the associated
class
IsSpinningProperty = DependencyProperty.Register(
"IsSpinning", typeof(Boolean),

11. Parameters to Register()
 The property name
 The data type used by the property
 The type that owns this property
 Optionally, a FrameworkPropertyMetadata object
with additional property settings
 Optionally, a callback that performs validation for the
property

12. Adding a Property(CLR) Wrapper
 Wrap dependency property in a traditional .NET
property.
public bool IsSpinning {
get { return (bool)GetValue(IsSpinningProperty); }
set { SetValue(IsSpinningProperty, value); }
}

13. Property functionality
 Resources
 Data Binding
 Styles
 Animation
 Property Value inheritance

14. Create and use a dependency property

15. Attached dependency properties
 Allows different child elements to specify unique values for
a property that is actually defined in a parent element.
 Example: DockPanel.Dock property
<DockPanel>
<CheckBox DockPanel.Dock="Top">
Hello
</CheckBox>
</DockPanel>

16. Custom Attached properties
public static readonly DependencyProperty
IsBubbleSourceProperty =
DependencyProperty.RegisterAttached( "IsBubbleSource",
typeof(Boolean), typeof(AquariumObject), new
FrameworkPropertyMetadata(false,
FrameworkPropertyMetadataOptions.AffectsRender) );
public static void SetIsBubbleSource(UIElement element, Boolean
value) { element.SetValue(IsBubbleSourceProperty, value); }
public static Boolean GetIsBubbleSource(UIElement element) {
return (Boolean)element.GetValue(IsBubbleSourceProperty); }

17. Create and use a attached property

19. Routed Events
 Events with more travelling power
 they can tunnel down or bubble up the element tree and
be processed by event handlers along the way
 Types
 Direct events
 Bubbling events
 Tunneling events

20. Tunneling and Bubbling events

21. Registering a Routed Event
public static readonly RoutedEvent TapEvent =
EventManager.RegisterRoutedEvent( "Tap",
RoutingStrategy.Bubble, typeof(RoutedEventHandler),
typeof(MyButtonSimple));
// Provide CLR accessors for the event
public event RoutedEventHandler Tap {
add { AddHandler(TapEvent, value); }
remove { RemoveHandler(TapEvent, value); }
}

22. Attached events
 Enables elements to handle events that are declared in
a different element
<Grid Button.Click="myButton_Click">
<Button Name="myButton" >Click Me</Button>
</Grid>

23. Add Events to a User Control

25. Reusing existing controls
 Support for rich content
 Styles to alter appearance and behavior
 Data templates to customize how data is displayed
 Control templates to define control’s structure and
appearance
 Triggers to dynamically change appearance and
behavior

26. Creating a new control
 Deriving from a user control
 You want to build your control similarly to how you
build an application.
 Your control consists only of existing components.
 You don't need to support complex customization.
 Deriving from Control
 You want the appearance of your control to be
customizable via the ControlTemplate.
 You want your control to support different themes.
 Deriving from FrameworkElement (Out of scope)

27. Create a Custom ToolTip Style

28. Set the Content Property of a User Control

29. Create a Lookless Custom Control

31. Data Binding
 The process that establishes a connection between the
application UI and business logic
 Use any object as your binding source and bind it to
almost any target UI element
 Once a binding is established, the data in the source is
automatically and dynamically propagated to the
binding target, and vice versa.

32. Data Binding Basics
 Direction of data flow

33. Data Binding Basics (contd.,)
 What triggers source updates

34. Creating a Binding
 Specifying the Binding Source
 Specifying the Path to the Value
<DockPanel.Resources>
<c:MyData x:Key="myDataSource"/>
</DockPanel.Resources>
<Button Width="150" Height="30"
Background="{Binding Source={StaticResource
myDataSource}, Path=ColorName}">I am bound to be
RED!</Button>

35. Create a two-way binding

36. Binding to collections
 A binding source object can be treated either as a
single object of which the properties contain data or as
a data collection of polymorphic objects that are often
grouped together

37. Data templating
 How the data object is displayed visually is controlled
primarily by data templates, data converters, and data
triggers

38. Use Data Templates to Display Bound Data

40. Data Conversion
 Convert the source value of a binding in order to assign
it to the target value
 For example: Convert string value to type Brush

41. MultiBinding Convertor
 a target property has a collection of bindings
 a custom IMultiValueConverter is used to produce a
final value from the values of the bindings
<TextBlock Name="textBox2" DataContext="{StaticResource
NameListData}">
<TextBlock.Text>
<MultiBinding Converter="{StaticResource myNameConverter}"
ConverterParameter="FormatLastFirst">
<Binding Path="FirstName"/>
<Binding Path="LastName"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>

42. Use Value Converters to Convert Bound Data

44. Data Validation
 Associating Validation Rules with a Binding
 ExceptionValidationRule - checks for exceptions thrown
during the update of the binding source property
 DataErrorValidationRule - object checks for errors that
are raised by objects that implement
the IDataErrorInfo interface
 Providing Visual Feedback
 Use Validation.HasError property
 Use Validation.ErrorTemplate property

45. Specify Validation Rules for a Binding

46. Bind to IDataErrorInfo

47. Exercise: Create a generic form
control
 Dependency properties for form-title, help-text
 Dependency property for IsValid
 Routed events for Submit and Cancel
 Attached property to specify Submit and Cancel
buttons
 Attached property to specify input control(s) to be
validated
 Data template for View mode
 Control template for Edit mode