What is the replacement for DataTrigger in Silverlight

Question

This is my scenario.

I have 2 Properties. Type and State.

Type is an Enum with 3 values eg, ball, car, arrow. State is an int which would accept 3 state values eg., -1, 0, 1. Also, I have 9 images for each state values.

Like, if I select type as ball and value as -1, I want to display a Red color ball. If I select type as arrow and value as 1, I want to display a up arrow. etc.,

I'm able to do this in WPF. I created 3 DataTemplates with an empty Image. Then, I use DataTrigger to check and update the particular image for the selected StateValue.

But, in silverlight how can I do this. I know, I have to do it in VSM. But, I would like to know some more details regarding this (or) any alternatives available.

Answer 1

I'd use GoToState behaviors with DataTriggers in Silverlight. Pretty simple in Blend:

Put all of your logic for what drives you to a different state in your view model. Expose the state as an enum. Open the States tab. Create a new state group (if you don't already have one). Create your states. From the Assets tab, select Behaviors. Drag the GoToState behavior from the Assets tab and drop it on your root visual element. In the Properties panel, click the "New" button next to the TriggerType and select DataTrigger. Remember that enum on your view model? Set the Trigger Binding to the state enum on the view model. Set the Trigger Value to the value of the enum. Set the StateName to the target state.

Blend should now have generated all of the VSM XAML for you. Once you get the hang of things you'll see how in some scenarios you don't even need the enum on the view model -- you'll be able to drive the state entirely off of the view.

Answer 2

To expand on Mike Post's post here's the XAML in case you don't have Blend.

You need to add references to Microsoft.Expression.Interactions and System.Windows.Interactivity.

xmlns:ia="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
xmlns:iv="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 

Then in your control, at the same level as the VisualStateManager put this:

<iv:Interaction.Triggers>
    <ia:DataTrigger Binding="{Binding PropertyName}" Value="PropertyValue"  >
        <ia:GoToStateAction StateName="StateName" />
    </ia:DataTrigger>
</iv:Interaction.Triggers>

Answer 3

I'd just use a converter that takes your object with 2 properties and returns an image. Code like that in pure XAML is painful and really belongs in C#.

Answer 4

The blog post "Expression SDK in Silverlight–DataTrigger Example" covers it pretty well. Here is a sample of what he does:

<i:Interaction.Triggers>
    <ia:DataTrigger Binding="{Binding IsEnabled}" Comparison="Equal" Value="false">
        <ia:ControlStoryboardAction Storyboard="{StaticResource DisableStoryboard}"></ia:ControlStoryboardAction>
    </ia:DataTrigger>

    <ia:DataTrigger Binding="{Binding IsEnabled}" Comparison="Equal" Value="true">
        <ia:ControlStoryboardAction Storyboard="{StaticResource EnableStoryboard}"></ia:ControlStoryboardAction>
    </ia:DataTrigger>
</i:Interaction.Triggers>

(With the two XML namespace prefixes i and ia being defined as follows:)

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ia="http://schemas.microsoft.com/expression/2010/interactions"