1. Module 12 Attached Properties and Behaviors in WPF

2. Module Overview Implementing Attached Properties Implementing Expression Blend Behaviors, Triggers, and Actions Implementing Drag-and-Drop User Interfaces

3. Lesson 1: Implementing Attached Properties Understanding Attached Properties Using Attached Properties Implementing Attached Properties Implementing Attached Behavior by Using Attached Properties

4. Understanding Attached Properties Common WPF attached properties: Grid.Column, Grid.ColumnSpan, Grid.Row, and Grid.RowSpan DockPanel.Dock Canvas.Left, Canvas.Top, and Canvas.ZIndex Similar to dependency properties with the following differences: Similar to dependency properties with the following differences: You do not define a property wrapper You do not need to derive from the DependencyObject class The value is stored with the attached element, not the declaring class instance

5. Using attached properties in XAML: Using Attached Properties Hello World Hello World Declaring type typically follows one of three models: Acts as parent element; child elements set the attached property values Could be the child element for different parent elements or content models Provides a service Using attached properties in code: CheckBox myCheckBox = new CheckBox(); myCheckBox.Content = "Hello World"; DockPanel.SetDock(myCheckBox, Dock.Top); CheckBox myCheckBox = new CheckBox(); myCheckBox.Content = "Hello World"; DockPanel.SetDock(myCheckBox, Dock.Top);

6. public static readonly DependencyProperty IsCustomSourceProperty = DependencyProperty.RegisterAttached( "IsCustomSource", typeof(bool), typeof(MyClass)); public static bool GetIsCustomSource(UIElement target) { return (bool)target.GetValue(IsCustomSourceProperty); } public static void SetIsCustomSource(UIElement target, bool value) { target.SetValue(IsCustomSourceProperty, value); } public static readonly DependencyProperty IsCustomSourceProperty = DependencyProperty.RegisterAttached( "IsCustomSource", typeof(bool), typeof(MyClass)); public static bool GetIsCustomSource(UIElement target) { return (bool)target.GetValue(IsCustomSourceProperty); } public static void SetIsCustomSource(UIElement target, bool value) { target.SetValue(IsCustomSourceProperty, value); } Implementing Attached Properties To implement an attached property: Declare the property by using DependencyProperty.RegisterAttached Implement the Get accessor Implement the Set accessor

7. Implementing Attached Behavior by Using Attached Properties Using attached properties to provide a service: Referred to as attached behavior Examples include: Drag-and-drop operations Panning and zooming Changing element position Input validation Hook events on the target element by using FrameworkPropertyMetadata public static readonly DependencyProperty IsDragSourceProperty = DependencyProperty.RegisterAttached( "IsDragSource", typeof(bool), typeof(MouseMoveAttachedBehavior), new FrameworkPropertyMetadata(true, OnIsDragSourceChanged)); public static readonly DependencyProperty IsDragSourceProperty = DependencyProperty.RegisterAttached( "IsDragSource", typeof(bool), typeof(MouseMoveAttachedBehavior), new FrameworkPropertyMetadata(true, OnIsDragSourceChanged)); private static void OnIsDragSourceChanged( DependencyObject source, DependencyPropertyChangedEventArgs e) { UIElement dragSource = (UIElement)source; dragSource.MouseLeftButtonDown += (s, e) => { // Implement MouseLeftButtonDown handling here. } private static void OnIsDragSourceChanged( DependencyObject source, DependencyPropertyChangedEventArgs e) { UIElement dragSource = (UIElement)source; dragSource.MouseLeftButtonDown += (s, e) => { // Implement MouseLeftButtonDown handling here. }

8. Lesson 2: Implementing Expression Blend Behaviors, Triggers, and Actions Understanding Expression Blend Behaviors Implementing Expression Blend Behaviors Understanding Expression Blend Triggers and Actions Implementing Expression Blend Triggers and Actions

9. Using Expression Blend behaviors in XAML: Understanding Expression Blend Behaviors <il:MouseDragElementBehavior ConstrainToParentBounds="True" /> <il:MouseDragElementBehavior ConstrainToParentBounds="True" /> Expression Blend behaviors: Formalize attached behaviors Provide reusable packaged code Can be added by dragging items from the Assets panel Implemented by using the Behavior class Can be downloaded from the Expression Gallery http://gallery.expression.microsoft.com/

10. Implementing Expression Blend Behaviors using System.Windows; using System.Windows.Interactivity; public class MyButtonBehavior : Behavior { public MyButtonBehavior() : base() { } protected override OnAttached() { this.AssociatedObject.Click += this.Behavior_Click; } protected override OnDetaching() { this.AssociatedObject.Click – this.Behavior_Click; } private void Behavior_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Hello World"); } using System.Windows; using System.Windows.Interactivity; public class MyButtonBehavior : Behavior { public MyButtonBehavior() : base() { } protected override OnAttached() { this.AssociatedObject.Click += this.Behavior_Click; } protected override OnDetaching() { this.AssociatedObject.Click – this.Behavior_Click; } private void Behavior_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Hello World"); } Hook an event on the associated object Unhook the event from the associated object Behavior implementation Constraint type The constraint type must derive from DependencyObject

11. Triggers: Understanding Expression Blend Triggers and Actions Source Element Trigger Target Action Actions: An object that you invoke to perform an action Implemented by using the TriggerAction class Change a property Call a method Open a window Navigate to a page Set focus Contain one or more actions Implemented by using the TriggerBase class EventTrigger DataTrigger

12. Implementing Expression Blend Triggers and Actions Implementing triggers: Derive from the TriggerBase class Override the OnAttached and OnDetaching methods Call the InvokeActions method in response to stimulus Implementing actions: Derive from the TriggerAction class Override the Invoke method Implementing targeted actions: Derive from the TargetedTriggerAction class Override the Invoke method and use the Target property

13. Lesson 3: Implementing Drag-and-Drop User Interfaces Implementing Drag-and-Drop Behavior in a WPF Application Implementing Drag-and-Drop Behavior Between Application Instances

14. Implementing Drag-and-Drop Behavior in a WPF Application Respond to user input: Handle mouse events or use the Thumb control Initiate drag operation: Create DataObject for drag data Call DragDrop.DoDragDrop method DataObject data = new DataObject( "Custom", this.dragData); DragDrop.DoDragDrop( this.dragSource, data, DragDropEffects.Copy); DataObject data = new DataObject( "Custom", this.dragData); DragDrop.DoDragDrop( this.dragSource, data, DragDropEffects.Copy); Complete the drag-and-drop operation: Set the AllowDrop property on the drop target Handle the Drop event

15. Implementing Drag-and-Drop Behavior Between Application Instances Providing visual feedback during a drag-and-drop operation Use default cursors Define custom cursors Provide custom visual feedback: Use default cursors Define custom cursors Provide custom visual feedback: 1 1 3 3 2 2 Adorner-based Window-based Adorner-based Window-based a a b b

16. Lab: Implementing Drag-and-Drop Operations Exercise 1: Implementing Drag-and-Drop Operations Exercise 2: Implementing Expression Blend Behaviors Logon information Estimated time: 75 minutes

17. Lab Scenario You have been asked to update the master view for all work orders in the system to provide drag-and-drop support so that the user can drag individual work orders from the Statistics panel onto a scratch pad. You have also been asked to implement a drag-and-drop behavior for Expression Blend to enable other application developers to reuse the drag-and-drop functionality.

18. Lab Review Review Questions How do you add behavior to the attached element in an attached behavior? Which event do you handle to provide custom visual feedback during a drag-and-drop operation? How do you constrain the type of elements to which you can apply an Expression Blend behavior?

19. Module Review and Takeaways Review Questions Common Issues and Troubleshooting Tips