Post on 14-Jan-2016
description
transcript
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