Expression Blend Samples
This project contains a collection of useful sample behaviors and effects for use in Expression Blend.
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.
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 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>
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>
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>
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>
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>
Similar 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>
Fires whenever a property changes, regardless of the new value.
<si:PropertyChangedTrigger Binding="{Binding IsActive}">
<si:PlayMedia/>
</si:PropertyChangedTrigger>
Additional Behaviors
CallMethodClippingBehaviorProvides 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.