Conditional execution of EventTriggers in Silverlight 3

Question

I'm currently working on the UI of a Silverlight application and need to be able to change the visual state of a control to one of two possible states based on it's current state when handling the same event trigger.

For example: I have a control that sits partially in a clipping path, when I click the visible part of the control I want to change the state to "visible" and if I click it again when it is in its "visible" state I want to change to the "hidden" state.

Example XAML:

            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonUp">
                    <ic:GoToStateAction StateName="Visible"/>
                    <ic:GoToStateAction StateName="Hidden"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>

Where "i" is "System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "ic" is "Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions". I'm currently working in Expression Blend 3 and would prefer to have a XAML only solution but am not opposed to coding this if it is completely necessary. I have tried recording a change in the target state name in Blend but this did not work.

Any thoughts on this?

Answer 1

If you have only 2 states the easiest would be to simply call GoToNextState to rotate between states. E.g.:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftButtonUp">
        <si:GoToNextState/>
    </i:EventTrigger>
</i:Interaction.Triggers>

If you have other states as well, then:

• add a property on the underlying viewmodel IsVisible
• have a trigger that would call a method (using CallMethod action) that would toggle that property om MouseLeftButtonUp
• have a DataStateBehavior bound to IsVisible property

E.g. something like this:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftButtonUp">
        <si:CallDataMethod Method='ToggleIsVisible'/>
    </i:EventTrigger>
</i:Interaction.Triggers>
<i:Interaction.Behaviors>
    <si:DataStateBehavior Binding='{Binding IsVisible}' Value='True' TrueState='Visible' FalseState='Hidden'/>
</i:Interaction.Behaviors>

Answer 2

In the end I achieved this by creating a simple custom action called ToggleStateAction to encapsulate this behaviour for me.