Behaviors and Effects

This project contains a collection of useful sample behaviors and effects for use in Expression Blend.

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.
MouseGestureTrigger.png

MouseEventTrigger
Allows triggering from complex mouse events such as double click or mouse clicks with modifier keys.
MouseDownEventTrigger.png

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 Viewto do something in the ViewModel for MVVM styled applications.

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>

InvokeDataCommand
An action which invokes a command on the data context. Another behavior for MVVM integration.

Example of invoking the CheckOut command when a button is clicked:
<i:EventTrigger EventName="Click">
      <si:InvokeDataCommand Command="{Binding ShoppingCart.CheckOutCommand}"/>
</i:EventTrigger>

DataEventTrigger
Triggers an action when an event on the data context is raised (as opposed to EventTrigger’s routed event on a UI element).

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>

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

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>

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>
            <ElasticEase EasingMode="EaseOut"/>
      </si:FluidBindProperty.Ease>
</si:FluidBindProperty>

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.

Last edited May 6, 2010 at 6:35 PM by joamason, version 1

Comments

No comments yet.