Module 12 Attached Properties and Behaviors in WPF

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

Lesson 1: Implementing Attached Properties • Understanding Attached Properties • Using Attached Properties • Implementing Attached Properties • Implementing Attached Behavior by Using Attached Properties

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

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

Implementing Attached Properties To implement an attached property: • Declare the property by using DependencyProperty.RegisterAttached • Implement the Get accessor • Implement the Set accessor 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 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 public static readonly DependencyProperty IsDragSourceProperty = DependencyProperty.RegisterAttached( "IsDragSource", typeof(bool), typeof(MouseMoveAttachedBehavior), new FrameworkPropertyMetadata(true, OnIsDragSourceChanged)); • Hook events on the target element by using FrameworkPropertyMetadata private static void OnIsDragSourceChanged( DependencyObject source, DependencyPropertyChangedEventArgs e) { UIElement dragSource = (UIElement)source; dragSource.MouseLeftButtonDown += (s, e) => { // Implement MouseLeftButtonDown handling here.

} }

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

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 class • Can be downloaded from the Expression Gallery http://gallery.expression.microsoft.com/ Using Expression Blend behaviors in XAML:

Implementing Expression Blend Behaviors using System.Windows; using System.Windows.Interactivity; Constraint type public class MyButtonBehavior : Behavior { public MyButtonBehavior() : base() { } Hook an event on the protected override OnAttached() { this.

AssociatedObject .Click += this.Behavior_Click; } associated object Unhook the event from protected override OnDetaching() { this.

AssociatedObject .Click – this.Behavior_Click; } the associated object } private void Behavior_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Hello World"); } Behavior implementation The constraint type must derive from DependencyObject

Understanding Expression Blend Triggers and Actions 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 Triggers: • •

EventTrigger DataTrigger

• Contain one or more actions • Implemented by using the TriggerBase class Target Element Trigger Action Source

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

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

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); Complete the drag-and-drop operation: • Set the AllowDrop property on the drop target • Handle the Drop event

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

Lab: Implementing Drag-and-Drop Operations • Exercise 1: Implementing Drag-and-Drop Operations • Exercise 2: Implementing Expression Blend Behaviors Logon information Virtual machine User name Password 10262A-GEN-DEV Student Pa$$w0rd

Estimated time: 75 minutes

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.

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?

Module Review and Takeaways • Review Questions • Common Issues and Troubleshooting Tips