Behaviors In WPF & Silverlight Silicon Valley Code Camp 2009

Behaviors in Silverlight & WPF
XAML Solutionsfor
XAML Problems
Joe Gershgorin
http://twitter.com/ThatJoeG
joe@bitspy.com

Demo Attached Behavior

Dependency Properties
Properties on steroids
Developer usually creates these when creating custom controls, behaviors, and user controls.

Silverlight & WPF:
Default values
Property Inheritance
Data Binding
Animation
Property Change Notification
Styling
In WPF Only:
Property Invalidation
Dependent value coercion

public static readonlyDependencyPropertyHighlightBorderBrushProperty =
DependencyProperty.Register(
“HighlightBorderBrush",
typeof(Brush),
typeof(class),
new PropertyMetadata(
null,
OnHighlightBorderBrushPropertyChanged ) );

# Property wrapper
public Brush HighlightBorderBrush
{
get { return (Brush)GetValue(HighlightBorderBrushProperty); }
set { SetValue(HighlightBorderBrushProperty, value); }
}

private static void OnHighlightBorderBrushPropertyChanged (DependencyObject d, DependencyPropertyChangedEventArgs e)
{
varmyClass = (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

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

KirupaChinnathambi’s Dependency Property Generator
http://www.kirupa.com/blend_silverlight/dependency_property_generator.htm

Attached Properties
Class 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 Properties
Class instance to acts on another class instance
public static readonlyDependencyPropertyRowProperty = 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?
Which of the following describes 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

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

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

Program FilesMicrosoft SDKsExpressionBlend 3InteractivityLibraries... System.Windows.Interactivity.dll

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

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 ()
The When, EventTrigger, KeyTrigger, etc..)
TriggerAction ()
The What, Move, Shake, Change Opacity, Issue Command, etc..
TargetedTriggerAction ()
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 ()
Overrides
OnAttached
OnDeataching
Methods
Attach & Detach
InvokeActions
Invoke all actions associated with this trigger.

Blend 3 SDK
TriggerBase ()
Properties
Actions
Gets the actions associated with this trigger
AssociatedObject
AssociatedObjectTypeConstraint
Gets the type constraint of the associated object.

Double Click Trigger

Blend 3 SDK
TriggerAction ()
Overrides
OnAttached
OnDeataching
Abstract Overrides
Invoke (object)
Called by trigger to Invoke this action’s behavior
Methods
Attach & Detach

Blend 3 SDK
TriggerAction ()
Properties
IsEnabled(default is true)
Gets or sets value indicating if whether this action will run when invoked
AssociatedObject
AssociatedObjectTypeConstraint
Gets the type constraint of the associated object.

Blend 3 SDK
TargetedTriggerAction ()

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")]

Demo TargetedTriggerActionToggleVisibilityAction

Explore Blend Sample Behaviors
Library of useful sample behaviors and effects
http://expressionblend.codeplex.com/
Program FilesMicrosoft ExpressionBlend 3 Samples...Expression.Samples.Interactivity.dll
Program FilesMicrosoft ExpressionBlend 3 Samples...Microsoft.Expression.Interactions.dll
Program FilesMicrosoft ExpressionBlend 3 Samples...Expression.Samples.Shaders.dll
Media Behaviors
PlayMedia
Action to play a media element.
PauseMedia
Action to pause a media element.
TogglePlayPauseMedia
Toggles a media element between play and pause mode.
RewindMedia
Action to rewind a media element.
StopMedia
Action to stop a media element.

Triggers
MouseGestureTrigger
Triggers an event when the user makes a mouse gesture on the
element. The gesture can be defined in Blend's property inspector.
MouseEventTrigger
Allows triggering from complex mouse events such as double
click or mouse clicks with modifier keys.
StateChangedTrigger
Fires when a state is changing (or has changed). Can trigger when a specific state has changed or when any state has changed.

Data Behaviors
CallDataMethod
An 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.
InvokeDataCommand
Example 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:
<si:InvokeDataCommand Command="{Binding ShoppingCart.CheckOutCommand}"/>
</i:EventTrigger>

Data Behaviors
DataEventTrigger
Triggers an action when an event on the data context is raised (as opposed to EventTrigger’s routed event on a UI element).
SetDataProperty
Action 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 increment a value when a button is clicked:
<si:SetDataProperty Binding='{Binding ItemCount, Mode=TwoWay}‘ Increment='True'
Value='1'/>
</i:EventTrigger>

Data Behaviors
DataStateBehavior
Switches 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>

Data Behaviors
DataStateSwitchBehavior
Similar to the DataStateBehavior, allows switching between more than two states- useful for encapsulating more conditional state logic.
FluidBindProperty
Behavior 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>
<ElasticEaseEasingMode="EaseOut"/>
</si:FluidBindProperty.Ease>
</si:FluidBindProperty>

Data Behaviors
PropertyChangedTrigger
Fires whenever a property changes, regardless of the new value.
<si:PropertyChangedTrigger Binding="{Binding IsActive}">
<si:PlayMedia/>
</si:PropertyChangedTrigger>

Additional Behaviors
CallMethod
ClippingBehavior
Provides a rounded rectangular clipping that scales with the element. Useful since Silverlight and WPF clipping geometries don't scale with objects.
GoToNextState
Go to the next state in a VisualStateManager. Useful for quickly navigating between various states.
GoToPreviousState
Go to the previous state in a VisualStateManager. Useful for quickly navigating between various states.
SetProperty
Similar to ChangePropertyAction but allows incrementing as well as setting.
ShowMessageBox
Displays a standard message box to the user

Prototyping Behaviors
ListBoxAddOne
Action 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.
ListBoxRemoveOne
Action which removes a random item in the ItemsSource collection of a ListBox. Useful for SketchFlow prototypes to simulate removing an item.
ListBoxRemoveThisItem
Action 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.

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-silverlight/
Adds Binding support to Silverlight 2:
ElementName,
RelativeSource Self
Adds RelativeSource by AncestorType and Level support to both Silverlight 2 & 3.

Morten's Surrogate Binders Behavior:
http://www.sharpgis.net/post/2009/05/03/Using-surrogate-binders-in-Silverlight.aspx
Adds Binding support to Non FrameworkElement object properties such as the Angle property of a Rotate RenderTransform.

<TextBoxRenderTransformOrigin="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>

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.

Creating Behaviors & Actions that Support Binding
http://compiledexperience.com/blog/posts/Blendable-MVVM-Commands-and-Behaviors
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.

Demo BindableExecuteCommandAction

Adding Binding Support for existing Trigger Actions Properties
Use TriggerActionBindingHelperBehaviorhelper 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

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_Silverlight_3_-_Part_1
http://wildermuth.com/2009/05/16/Writing_Behaviors_for_Silverlight_3_-_Part_2
Video Tutorials:
http://www.bestechvideos.com/2009/07/25/dnrtv-show-144-shawn-wildermuth-on-behaviors-in-silverlight-3

Silverlight Resources