WPF - Controls & Data
1 like667 views
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.
WPF - Controls & Data
- 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
- 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