Module 12 Attached Properties and Behaviors in WPF

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 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 Common WPF attached properties: • Grid.Column, Grid.ColumnSpan, Grid.Row, and Grid.RowSpan • DockPanel.Dock • Canvas.Left, Canvas.Top, and Canvas.ZIndex

5. Using Attached Properties 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 XAML: <DockPanel> <CheckBoxDockPanel.Dock="Top">Hello World</CheckBox> </DockPanel> Using attached properties in code: CheckBoxmyCheckBox = new CheckBox(); myCheckBox.Content = "Hello World"; DockPanel.SetDock(myCheckBox, Dock.Top);

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

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 readonlyDependencyPropertyIsDragSourceProperty = DependencyProperty.RegisterAttached( "IsDragSource", typeof(bool), typeof(MouseMoveAttachedBehavior), new FrameworkPropertyMetadata(true, OnIsDragSourceChanged)); private static void OnIsDragSourceChanged( DependencyObject source, DependencyPropertyChangedEventArgs e) { UIElementdragSource = (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. Understanding Expression Blend Behaviors 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<T> class • Can be downloaded from the Expression Gallery http://gallery.expression.microsoft.com/ Using Expression Blend behaviors in XAML: <Rectangle Height="150" Width="150"> <i:Interaction.Behaviors> <il:MouseDragElementBehavior ConstrainToParentBounds="True" /> </i:Interaction.Behaviors> </Rectangle>

10. Implementing Expression Blend Behaviors using System.Windows; using System.Windows.Interactivity; public class MyButtonBehavior : Behavior<Button> { 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"); } } Constraint type Hook an event on the associated object Unhook the event from the associated object Behavior implementation The constraint type must derive from DependencyObject

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

12. Implementing Expression Blend Triggers and Actions Implementing triggers: • Derive from the TriggerBase<T> class • Override the OnAttached and OnDetaching methods • Call the InvokeActions method in response to stimulus Implementing actions: • Derive from the TriggerAction<T> class • Override the Invoke method Implementing targeted actions: • Derive from the TargetedTriggerAction<T> 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 DataObject data = new DataObject( "Custom", this.dragData); DragDrop.DoDragDrop( this.dragSource, data, DragDropEffects.Copy); Initiate drag operation: • Create DataObject for drag data • Call DragDrop.DoDragDrop method 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: 1 2 3 Adorner-based Window-based a 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