Module 12 Attached Properties and Behaviors in WPF

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

Common WPF 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

Using attached properties in XAML:

Using Attached Properties

<DockPanel> <CheckBox DockPanel.Dock="Top">Hello World</CheckBox></DockPanel>

<DockPanel> <CheckBox DockPanel.Dock="Top">Hello World</CheckBox></DockPanel>

Declaring type typically follows one of three models: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);

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:To implement an attached property:

• Declare the property by using DependencyProperty.RegisterAttached

• Implement the Get accessor

• Implement the Set accessor

Implementing Attached Behavior by Using Attached Properties

Using attached properties to provide a service: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. }}

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

Using Expression Blend behaviors in XAML:Using Expression Blend behaviors in XAML:

Understanding Expression Blend Behaviors

<Rectangle Height="150" Width="150"> <i:Interaction.Behaviors> <il:MouseDragElementBehavior ConstrainToParentBounds="True" /> </i:Interaction.Behaviors></Rectangle>

<Rectangle Height="150" Width="150"> <i:Interaction.Behaviors> <il:MouseDragElementBehavior ConstrainToParentBounds="True" /> </i:Interaction.Behaviors></Rectangle>

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/

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"); }}

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"); }}

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

Triggers:Triggers:

Understanding Expression Blend Triggers and Actions

Source

ElementElement Trigger

Target

Action

Actions:Actions:

• An object that you invoke to perform an action

• Implemented by using the TriggerAction<T> 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<T> class

• EventTrigger

• DataTrigger

Implementing Expression Blend Triggers and Actions

Implementing triggers:Implementing triggers:

• Derive from the TriggerBase<T> class

• Override the OnAttached and OnDetaching methods

• Call the InvokeActions method in response to stimulus

Implementing actions:Implementing actions:

• Derive from the TriggerAction<T> class

• Override the Invoke method

Implementing targeted actions:Implementing targeted actions:

• Derive from the TargetedTriggerAction<T> 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:Respond to user input:

Handle mouse events or use the Thumb control

Initiate drag operation: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: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 operationProviding 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:

11

33

22

Adorner-based

Window-based

Adorner-based

Window-based

aa

bb

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

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