module 12 attached properties and behaviors in wpf
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/1.jpg)
Module 12
Attached Properties and Behaviors in WPF
![Page 2: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/2.jpg)
Module Overview
• Implementing Attached Properties
• Implementing Expression Blend Behaviors, Triggers, and Actions
• Implementing Drag-and-Drop User Interfaces
![Page 3: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/3.jpg)
Lesson 1: Implementing Attached Properties
• Understanding Attached Properties
• Using Attached Properties
• Implementing Attached Properties
• Implementing Attached Behavior by Using Attached Properties
![Page 4: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/4.jpg)
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
![Page 5: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/5.jpg)
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);
![Page 6: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/6.jpg)
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
![Page 7: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/7.jpg)
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. }}
![Page 8: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/8.jpg)
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
![Page 9: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/9.jpg)
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/
![Page 10: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/10.jpg)
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
![Page 11: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/11.jpg)
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
![Page 12: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/12.jpg)
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
![Page 13: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/13.jpg)
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
![Page 14: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/14.jpg)
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
![Page 15: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/15.jpg)
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
![Page 16: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/16.jpg)
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
![Page 17: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/17.jpg)
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.
![Page 18: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/18.jpg)
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?
![Page 19: Module 12 Attached Properties and Behaviors in WPF](https://reader035.vdocuments.net/reader035/viewer/2022062409/5681472c550346895db469ed/html5/thumbnails/19.jpg)
Module Review and Takeaways
• Review Questions
• Common Issues and Troubleshooting Tips