Silverlight 4 Property Triggers

I spent a little time this week messing around with the newly added Triggers and TriggerActions available through the new Expression Blend 4 SDK.

Triggers and Behaviors are really just ways to attach functionality to an existing element, and the base classes that are included in the newer version of Silverlight 4 really make the job easier.  I’m going to walk through adding a trigger that fires when one of the properties on my ViewModel changes to true.  Now allegedly there is an existing trigger (DataStoreChangedTrigger) that will fire actions based on when a bound property changes, but I want to only fire my actions when my bound property becomes a specific value.

Our Goal

<ItemsControl
   Margin="0 130 0 0"
   HorizontalAlignment="Left"
   VerticalAlignment="Top"
   Opacity="0.0"
   ItemsSource="{Binding Items}">
   <i:Interaction.Triggers>
       <local:BooleanPropertyTrigger
           Binding="{Binding FinishedLoading}"
           TriggerValue="True">
           <local:StoryboardAction>
               <Storyboard>
                   <DoubleAnimation
                       To="1.0"
                       Duration="00:00:0.7"
                       Storyboard.TargetProperty="Opacity" />
               </Storyboard>
           </local:StoryboardAction>
       </local:BooleanPropertyTrigger>
   </i:Interaction.Triggers>
</ItemsControl>
The Codez

[Download the PropertyTrigger Example Source Project and play along at home]

To start out with, I create a base PropertyChangedTrigger class that will do most of the heavy lifting for us.  Essentially, we want to inherit from the TriggerBase<…> generic base class and specify that we want our Trigger to attach to a FrameworkElement (I suppose you could use another type of control class, but FrameworkElement will encompass just about any element with a DataContext, which I find useful).  Our PropertyChangedTrigger will expose a Binding property that will allow us to attach an event handler when our bound property changes so we can invoke our TriggerActions.

/// <summary>
/// A base property changed trigger that
/// fires whenever the bound property changes.
/// </summary>
public class PropertyChangedTrigger : TriggerBase<FrameworkElement>
{
   /// <summary>
   /// The <see cref="Binding" /> dependency property's name.
   /// </summary>
   public const string BindingPropertyName = "Binding";

   /// <summary>
   /// Gets or sets the value of the <see cref="Binding" />
   /// property. This is a dependency property.
   /// </summary>
   public object Binding
   {
       get
       {
           return (object)GetValue(BindingProperty);
       }
       set
       {
           SetValue(BindingProperty, value);
       }
   }

Read more: ClarityConsulting blog

Posted via email from Jasper-net