Behaviors In WPF & Silverlight Silicon Valley Code Camp 2009

Behaviors in Silverlight & WPF

Joe Gershgorin

http://twitter.com/ThatJoeG

[email protected]

XAML Solutions for XAML Problems

http://twitter.com/ThatJoeG

Demo Attached Behavior

Dependency PropertiesProperties on steroids

• Silverlight & WPF:• Default values• Property Inheritance• Data Binding• Animation• Property Change Notification• Styling

• In WPF Only:• Property Invalidation• Dependent value coercion

Developer usually creates these when creating custom controls, behaviors, and user controls.


public static readonly DependencyProperty HighlightBorderBrushProperty = DependencyProperty.Register( “HighlightBorderBrush", typeof(Brush), typeof(class), new PropertyMetadata(

null, OnHighlightBorderBrushPropertyChanged ) );

# Property wrapperpublic Brush HighlightBorderBrush{ get { return (Brush)GetValue(HighlightBorderBrushProperty); }

set { SetValue(HighlightBorderBrushProperty, value); } }

public static readonly DependencyProperty HighlightBorderBrushProperty = DependencyProperty.Register( “HighlightBorderBrush", typeof(Brush), typeof(class), new PropertyMetadata(

null, OnHighlightBorderBrushPropertyChanged ) );

# Property wrapperpublic Brush HighlightBorderBrush{ get { return (Brush)GetValue(HighlightBorderBrushProperty); }

set { SetValue(HighlightBorderBrushProperty, value); } }


private static void OnHighlightBorderBrushPropertyChanged (DependencyObject d, DependencyPropertyChangedEventArgs e){

var myClass = (MyClass)d;}

private static void OnHighlightBorderBrushPropertyChanged (DependencyObject d, DependencyPropertyChangedEventArgs e){

var myClass = (MyClass)d;}


Unless you enjoy punishment, once you understand dependency

properties use a code generator to create them. For WPF I use Dr. WPF Code Snippets available from here:

http://drwpf.com/Blog/Default.aspx?tabid=36&EntryID=22

http://drwpf.com/Blog/Default.aspx?tabid=36&EntryID=22


Other code generators include Resharper templates and snippets for Silverlight from the Silverlight Contrib Project

http://silverlightcontrib.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=21368

ReSharper Live Templates

* SLDependProp - Generates a Dependency Property without a change callback

* SLDependPropChanged - Generates a Dependency Property with a change callback

* SLDependPropAttached - Generates an Attached Dependency Property

* SLInlineSBCompletedHandler - Generates an inline Storyboard Completed handler

* SLRoutedEvent - Generates a RoutedEvent




ReSharper File Templates

* ClientAccessPolicy.xml File Template * CrossDomain.xml File Template * Silverlight Value Converter Template * Silverlight Panel

Visual Studio Code Snippets

* sldp - Generates a Dependency Property without a change callback

* sldpc - Generates a Dependency Property with a change callback * sldpa - Generates an Attached Dependency Property * slevent - Generates a RoutedEvent * slsbc - Generates an inline Storyboard Completed handler * slpanel - Generates a Panel * slrss - A super basic collection class that loads an RSS feed * slvc - Silverlight Value Converter Template


Kirupa Chinnathambi’s Dependency Property Generator

http://www.kirupa.com/blend_silverlight/dependency_property_generator.htm



Attached PropertiesClass instance to acts on another class instance

• A property settable on a XAML element that isn’t owned by the XAML element

• Defined with a RegisterAttached and setter/getter syntax different from a depedency property.

Attached PropertiesClass instance to acts on another class instance

public static readonly DependencyProperty RowProperty = DependencyProperty.RegisterAttached( “Row", typeof(double), typeof(Grid), new FrameworkPropertyMetadata(0, FrameworkPropertyMetadataOptions.AffectsRender) );

public static void SetRow(UIElement element, double value) { element.SetValue(RowProperty, value); } public static Boolean GetRow(UIElement element){ return (double)element.GetValue(RowProperty); }

public static readonly DependencyProperty RowProperty = DependencyProperty.RegisterAttached( “Row", typeof(double), typeof(Grid), new FrameworkPropertyMetadata(0, FrameworkPropertyMetadataOptions.AffectsRender) );

public static void SetRow(UIElement element, double value) { element.SetValue(RowProperty, value); } public static Boolean GetRow(UIElement element){ return (double)element.GetValue(RowProperty); }

Demo Blend Behavior

What is a Behavior?

• Design pattern

• Attached property

• Static class that acts on other classes

• Classes instance that acts on other class instances

• XAML Addon

• Drag & Drop Functionality through Blend

Which of the following describes a behavior?

Expression Blend 3 - Behaviors

• Expression Blend 3 – Behaviors are now a First Class Citizen

• Native support in Blend to detect behaviors in a open project, allow you to drag and drop a behavior onto an element on the design surface. Behaviors can be found in the asset panel and properties of the behavior can be set in the Blend properties pane.

• Microsoft provided API for building Behaviors in both Silverlight & WPF.

• Expression Gallery website to share and rate behaviors:

http://gallery.expression.microsoft.com/en-us/site/search?f[0].Type=RootCategory&f[0].Value=behaviors&f[0].Text=Behaviors

http://gallery.expression.microsoft.com/en-us/site/search?f%5B0%5D.Type=RootCategory&f%5B0%5D.Value=behaviors&f%5B0%5D.Text=Behaviors




• Expression Blend 3 – Blend 3 SDK – For WPF & Silverlight

• You don’t have need Blend to open projects that use behaviors built with Blend or to create behaviors using the Blend behavior API, you just need the Blend 3 SDK, freely available for download:

http://www.microsoft.com/downloads/details.aspx?FamilyID=F1AE9A30-4928-411D-970B-E682AB179E17&displaylang=en

\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\...\ System.Windows.Interactivity.dll





• Blend 3 SDK

• Adds new item templates in both Visual Studio & Blend to create Actions, Triggers & Behaviors

• Sketch Flow Player

• More powerful VSM engine, allowing for fluid transitions


• Blend 3 SDK

• Abstract Classes Provided to aid in creating behaviors

Behavior (<T>)• Use when no or multiple event listeners needed• Overrides• OnAttached• Good place to write init code, and event

subscriptions• OnDeataching• Clean up resources, unsubscribe to events here

• Methods• Attach & Detach• Can be used by code behind to attach/detach the

behavior to a XAML element.


• Blend 3 SDK

• Abstract Classes Provided to aid in creating behaviors

Behavior (<T>)• Properties• AssociatedObject• The object you’re attached to (Grid, Button, etc..)

Demo Blend SDK Built Behaviors


• Blend 3 SDK

• Triggers & Actions

• TriggerBase (<T>)• The When, EventTrigger, KeyTrigger, etc..)

• TriggerAction (<T>)• The What, Move, Shake, Change Opacity, Issue

Command, etc..

• TargetedTriggerAction (<T>)• Same as TriggerAction, but allows you to specify the

x:Name of the target (by string value) of the element you wish to perform the action on.


• Blend 3 SDK

• TriggerBase (<T>)• Overrides• OnAttached• Good place to write init code, and event



behavior to a XAML element.• InvokeActions• Invoke all actions associated with this trigger.


• Blend 3 SDK

• TriggerBase (<T>)• Properties• Actions• Gets the actions associated with this trigger

• AssociatedObject• The object you’re attached to (Grid, Button, etc..)

• AssociatedObjectTypeConstraint• Gets the type constraint of the associated object.

Double Click Trigger


• Blend 3 SDK

• TriggerAction (<T>)• Overrides• OnAttached• Good place to write init code, and event


• Abstract Overrides• Invoke (object)• Called by trigger to Invoke this action’s behavior


behavior to a XAML element.


• Blend 3 SDK

• TriggerAction (<T>)• Properties• IsEnabled (default is true)• Gets or sets value indicating if whether this action

will run when invoked• AssociatedObject• The object you’re attached to (Grid, Button, etc..)

• AssociatedObjectTypeConstraint• Gets the type constraint of the associated object.


• Blend 3 SDK

• TargetedTriggerAction (<T>) Same as TriggerAction, in addition it has:• Properties• Target• Gets the target object. If TargetName is unset or

cannot be resolved, default to AssociatedObject.• TargetName• Gets or sets the string name of the target. If

TargetName is unset or cannot be resolved, default to AssociatedObject.

• TargetTypeConstraint• Gets the target type constraint.


• Decorate your dependency properties & classes for better organization in Blend

[Category(“Fun Stuff")][Description(“Wackiness Behavior")]

[Category(“Fun Stuff")][Description(“Wackiness Behavior")]

Demo TargetedTriggerAction ToggleVisibilityAction

Explore Blend Sample Behaviors

http://expressionblend.codeplex.com/

\Program Files\Microsoft Expression\Blend 3 Samples\...\Expression.Samples.Interactivity.dll\Program Files\Microsoft Expression\Blend 3 Samples\...\Microsoft.Expression.Interactions.dll\Program Files\Microsoft Expression\Blend 3 Samples\...\Expression.Samples.Shaders.dll

Library of useful sample behaviors and effects

Media Behaviors

PlayMediaAction to play a media element.

PauseMediaAction to pause a media element.

TogglePlayPauseMediaToggles a media element between play and pause mode.

RewindMediaAction to rewind a media element.

StopMediaAction to stop a media element.


Explore Blend Sample BehaviorsLibrary of useful sample behaviors and effects

Triggers

MouseGestureTriggerTriggers an event when the user makes a mouse gesture on the element. The gesture can be defined in Blend's property inspector.

MouseEventTriggerAllows triggering from complex mouse events such as double click or mouse clicks with modifier keys.

StateChangedTriggerFires when a state is changing (or has changed). Can trigger when a specific state has

changed or when any state has changed.


Data Behaviors

CallDataMethodAn action which calls a method on the data context. Good for tying an event in your View

to do something in the ViewModel for MVVM styled applications.

InvokeDataCommandExample of invoking the CheckOut command when a button is clicked:

#An example of calling the Remove method when a button is clicked:<i:EventTrigger EventName="Click"> <si:CallDataMethod Target="{Binding ShoppingCart.CurrentItem}" Method="Remove"/> </i:EventTrigger>

#An example of calling the Remove method when a button is clicked:<i:EventTrigger EventName="Click"> <si:CallDataMethod Target="{Binding ShoppingCart.CurrentItem}" Method="Remove"/> </i:EventTrigger>

#An example of calling the Remove method when a button is clicked:<i:EventTrigger EventName="Click"> <si:InvokeDataCommand Command="{Binding ShoppingCart.CheckOutCommand}"/></i:EventTrigger>

#An example of calling the Remove method when a button is clicked:<i:EventTrigger EventName="Click"> <si:InvokeDataCommand Command="{Binding ShoppingCart.CheckOutCommand}"/></i:EventTrigger>


Data Behaviors

DataEventTriggerTriggers an action when an event on the data context is raised (as opposed to

EventTrigger’s routed event on a UI element).

SetDataPropertyAction which sets a property when executed. It can either set the value directly, or

increment the value by the specified amount.

#XAML syntax to play a sound every time the MessageSent event is raised from the User object:<si:DataEventTrigger Source="{Binding User}" EventName="MessageSent"> <im:PlaySoundAction Source="Bell.wma"/></si:DataEventTrigger>

#XAML syntax to play a sound every time the MessageSent event is raised from the User object:<si:DataEventTrigger Source="{Binding User}" EventName="MessageSent"> <im:PlaySoundAction Source="Bell.wma"/></si:DataEventTrigger>

#XAML syntax to increment a value when a button is clicked:<i:EventTrigger EventName="Click"> <si:SetDataProperty Binding='{Binding ItemCount, Mode=TwoWay}‘ Increment='True' Value='1'/></i:EventTrigger>

#XAML syntax to increment a value when a button is clicked:<i:EventTrigger EventName="Click"> <si:SetDataProperty Binding='{Binding ItemCount, Mode=TwoWay}‘ Increment='True' Value='1'/></i:EventTrigger>


Data Behaviors

DataStateBehaviorSwitches between two VSM states depending on the value of a binding. This is a

convenient shorthand for two DataTriggers with GoToState actions. With Blend 3’s support for VSM in DataTemplates this makes it easy to have states for data.

#XAML syntax for a DataTemplate with VSM and a DataStateBehavior to switch between the two states depending on whether the user is logged in or not:<DataTemplate x:Key='User'> <Grid> <VisualStateManager.VisualStateGroups>

</VisualStateManager.VisualStateGroups>

<i:Interaction.Behaviors> <si:DataStateBehavior Binding='{Binding IsLoggedIn}' Value='True‘ TrueState='LoggedInState' FalseState='LoggedOutState'/> </i:Interaction.Behaviors> </Grid></DataTemplate>

#XAML syntax for a DataTemplate with VSM and a DataStateBehavior to switch between the two states depending on whether the user is logged in or not:<DataTemplate x:Key='User'> <Grid> <VisualStateManager.VisualStateGroups>

</VisualStateManager.VisualStateGroups>

<i:Interaction.Behaviors> <si:DataStateBehavior Binding='{Binding IsLoggedIn}' Value='True‘ TrueState='LoggedInState' FalseState='LoggedOutState'/> </i:Interaction.Behaviors> </Grid></DataTemplate>


Data Behaviors

DataStateSwitchBehaviorSimilar to the DataStateBehavior, allows switching between more than two states- useful

for encapsulating more conditional state logic.

FluidBindPropertyBehavior which acts as a proxy for databound properties in order to animate the changing

of the value.

#XAML syntax of binding the height of a rectangle to a property and having it grow with an elastic ease:<si:FluidBindProperty Binding='{Binding Population}' PropertyName='Height' Duration='0:0:0.1'> <si:FluidBindProperty.Ease> <ElasticEase EasingMode="EaseOut"/> </si:FluidBindProperty.Ease></si:FluidBindProperty>

#XAML syntax of binding the height of a rectangle to a property and having it grow with an elastic ease:<si:FluidBindProperty Binding='{Binding Population}' PropertyName='Height' Duration='0:0:0.1'> <si:FluidBindProperty.Ease> <ElasticEase EasingMode="EaseOut"/> </si:FluidBindProperty.Ease></si:FluidBindProperty>


Data Behaviors

PropertyChangedTriggerFires whenever a property changes, regardless of the new value.

<si:PropertyChangedTrigger Binding="{Binding IsActive}"><si:PlayMedia/>

</si:PropertyChangedTrigger>

<si:PropertyChangedTrigger Binding="{Binding IsActive}"><si:PlayMedia/>

</si:PropertyChangedTrigger>


Additional Behaviors

CallMethod

ClippingBehaviorProvides a rounded rectangular clipping that scales with the element. Useful since

Silverlight and WPF clipping geometries don't scale with objects.

GoToNextStateGo to the next state in a VisualStateManager. Useful for quickly navigating between

various states.

GoToPreviousStateGo to the previous state in a VisualStateManager. Useful for quickly navigating between

various states.

SetPropertySimilar to ChangePropertyAction but allows incrementing as well as setting.

ShowMessageBoxDisplays a standard message box to the user


Prototyping Behaviors

ListBoxAddOneAction which duplicates a random item in the ItemsSource collection of a ListBox. Useful

for SketchFlow prototypes where you want to show adding a new item.

ListBoxRemoveOneAction which removes a random item in the ItemsSource collection of a ListBox. Useful for

SketchFlow prototypes to simulate removing an item.

ListBoxRemoveThisItemAction for use inside of a ListBoxItem which will remove the item from the data collection

of the owning ListBox.

Effects

This contains many of the effects from the WPF FX (http://www.codeplex.com/fx) project packaged up with full design-time support inside of Blend.

http://www.codeplex.com/fx

http://www.codeplex.com/fx

Behaviors in Silverlight vs WPF

• API• Identical API. Behaviors, Triggers, TriggerActions &

TargetedTriggerActions abstract classes are available in both WPF in Silverlight System.Windows.Interactivity assembly.

• Binding Support• Silverlight (as of version 3) only supports binding to a

property of an object that does derives from FrameworkElement.

• Behaviors, EventTriggers & TriggerActions abstract classes derive from DependencyObject.

• Therefore in Silverlight you can not directly bind to behavior properties.


• Binding to Non Framework Element via Behaviors & Binding Helpers

• Colin Eberhardt's Binding Helper Behavior:• http://www.scottlogic.co.uk/blog/wpf/2009/02/relativesource-binding-in-si

lverlight/

• Adds Binding support to Silverlight 2:• ElementName, • RelativeSource Self

• Adds RelativeSource by AncestorType and Level support to both Silverlight 2 & 3.

http://www.scottlogic.co.uk/blog/wpf/2009/02/relativesource-binding-in-silverlight/

http://www.scottlogic.co.uk/blog/wpf/2009/02/relativesource-binding-in-silverlight/



• Morten's Surrogate Binders Behavior:• http://www.sharpgis.net/post/2009/05/03/Using-surrogate-binders-in-Silv

erlight.aspx

• Adds Binding support to Non FrameworkElement object properties such as the Angle property of a Rotate RenderTransform.

<TextBox RenderTransformOrigin="0.5,0.5“ Text="Hello Universe!"binders:SurrogateBind.Value="{Binding Path=MoreValues.Heading}" binders:SurrogateBind.Target="RenderTransform.Children.Item[1].Angle" >

<TextBox.RenderTransform><TransformGroup><ScaleTransform /><RotateTransform /></TransformGroup></TextBox.RenderTransform></TextBox>

<TextBox RenderTransformOrigin="0.5,0.5“ Text="Hello Universe!"binders:SurrogateBind.Value="{Binding Path=MoreValues.Heading}" binders:SurrogateBind.Target="RenderTransform.Children.Item[1].Angle" >

<TextBox.RenderTransform><TransformGroup><ScaleTransform /><RotateTransform /></TransformGroup></TextBox.RenderTransform></TextBox>

http://www.sharpgis.net/post/2009/05/03/Using-surrogate-binders-in-Silverlight.aspx

http://www.sharpgis.net/post/2009/05/03/Using-surrogate-binders-in-Silverlight.aspx


• Binding to Non Framework Element via Behaviors & Binding Helpers• Delay’s SetterValueBindingHelper:

• http://blogs.msdn.com/delay/archive/2009/05/07/one-more-platform-difference-more-or-less-tamed-settervaluebindinghelper-makes-silverlight-setters-better.aspx

• Adds Binding support to Style setters• Support binding to attached properties via a style setter

too.<Style TargetType="Button">  <Setter Property="local:SetterValueBindingHelper.PropertyBinding"> <Setter.Value> <local:SetterValueBindingHelper Property="Content" Binding="{Binding}"/> </Setter.Value> </Setter></Style>

<Style TargetType="Button">  <Setter Property="local:SetterValueBindingHelper.PropertyBinding"> <Setter.Value> <local:SetterValueBindingHelper Property="Content" Binding="{Binding}"/> </Setter.Value> </Setter></Style>

http://blogs.msdn.com/delay/archive/2009/05/07/one-more-platform-difference-more-or-less-tamed-settervaluebindinghelper-makes-silverlight-setters-better.aspx





• Creating Behaviors & Actions that Support Binding• http://compiledexperience.com/blog/posts/Blendable-MVVM-Commands-and-Behav

iors

• Use BindingListener helper class available in Expression.Samples.Interactivity.dll

• BindingListener uses the AssociatedObject as a relay for bindings.

• You get the binding by creating a dependency property of type binding, then have the listener relay it to your associated object.

http://compiledexperience.com/blog/posts/Blendable-MVVM-Commands-and-Behaviors

http://compiledexperience.com/blog/posts/Blendable-MVVM-Commands-and-Behaviors

Demo BindableExecuteCommand

Action



• Adding Binding Support for existing Trigger Actions Properties

• Use TriggerActionBindingHelperBehavior helper class created by Joe Gershgorin (me), will release soon.

• A Behavior that adds binding support to any TriggerAction property. A behavior for a behavior.

• Uses BindingListener helper class from Expression.Samples.Interactivity.dll

Why use behaviors?Because they’re awesome

• Powerful and extendable Trigger support

• API parity in WPF and Silverlight

• Facilitate MVVM design pattern

• Reusable Encapsulated Functionality

• Designer (Blend) friendly

• XAML solutions for XAML problems

• Facilitates unit testing by eliminating code behind

Behaviors – What Now?

• Download Blend 3 SDK• http://www.microsoft.com/downloads/details.aspx?FamilyID=

F1AE9A30-4928-411D-970B-E682AB179E17&displaylang=en

• Download Expression Blend Samples Codeplex Release:• http://expressionblend.codeplex.com/

• Useful sample behaviors and effects• nRoute Toolkit:

http://www.orktane.com/Blog/post/2009/09/29/Introducing-nRouteToolkit-for-Silverlight-%28Part-I%29.aspx• Library with an implementation for Silverlight Bindable

Behaviors, Actions & Triggers





http://www.orktane.com/Blog/post/2009/09/29/Introducing-nRouteToolkit-for-Silverlight-(Part-I).aspx

http://www.orktane.com/Blog/post/2009/09/29/Introducing-nRouteToolkit-for-Silverlight-(Part-I).aspx

Behavior Resources

• Read/Learn more about Behaviors:• Kirupa’s blog: http://blog.kirupa.com/?cat=18• Shawn Wildermuth Writing Behavior Tutorials:• http://wildermuth.com/2009/05/16/Writing_Behaviors_for_Sil

verlight_3_-_Part_1• http://wildermuth.com/2009/05/16/Writing_Behaviors_for_Sil

verlight_3_-_Part_2

• Video Tutorials:• http://www.bestechvideos.com/2009/07/25/dnrtv-show-144-

shawn-wildermuth-on-behaviors-in-silverlight-3

http://blog.kirupa.com/?cat=18

http://wildermuth.com/2009/05/16/Writing_Behaviors_for_Silverlight_3_-_Part_1




http://www.bestechvideos.com/2009/07/25/dnrtv-show-144-shawn-wildermuth-on-behaviors-in-silverlight-3

http://www.bestechvideos.com/2009/07/25/dnrtv-show-144-shawn-wildermuth-on-behaviors-in-silverlight-3

Silverlight Resources

• Learning Silverlight 3 Resources:• Foothill Silverlight & WPF Classes• http://videos.visitmix.com/MIX09/• http://silverlight.net/learn/videocat.aspx?cat=12#sl3• http://silverlight.net/forums/51.aspx

• Great General Silverlight Resources:• http://timheuer.com/blog/• http://silverlightcream.com/

http://videos.visitmix.com/MIX09/

http://silverlight.net/learn/videocat.aspx?cat=12#sl3

http://silverlight.net/forums/51.aspx

http://timheuer.com/blog/



FIN.

Education

Behaviors In WPF & Silverlight Silicon Valley Code Camp 2009