How can I Have a WPF EventTrigger on a View trigger when the underlying Viewmodel dictates it should?

Question

Here's the scenario:

I have the following user control, the idea is that it's view model should be able to signal to the view that it needs to "Activate the Glow", thereby playing the Storyboard.

<UserControl x:Class="View.UnitView"  ... >
   ...
    <Storyboard x:Key="ActivateGlow">
       ...
    </Storyboard>
    ...
    <!-- INVALID BINDING! Not Dependancy Object-->
    <EventTrigger RoutedEvent="{Binding OnActivateGlow}"> 
       <BeginStoryboard Storyboard="{StaticResource ActivateGlow}"/>
    </EventTrigger>
</UserControl>

in the codebehind for UnitView, I have:

public event EventHandler ActivateGlow;

and as is pretty normal in MVVM, I have the following DataTemplate for UnitViewModel:

<DataTemplate DataType="{x:Type vm:UnitViewModel}">
    <vw:UnitView d:DesignWidth="150" d:DesignHeight="100" />
</DataTemplate>

The ulitmate question is, how can I set up something so that the viewmodel can fire the OnActivateGlow event?

Answer 1

I believe you would have to bind to a RoutedEvent instance, not a CLR event.

I haven't tried it, but something like this should work:

public class UnitView
{
    public static readonly RoutedEvent ActivateGlowEvent
        = EventManager.RegisterRoutedEvent(
              "ActivateGlow", RoutingStrategy.Bubble,
              typeof(RoutedEventHandler), typeof(UnitView)
          );

    public void RaiseActivateGlowEvent()
    {
        RaiseEvent(new RoutedEventArgs(ActivateGlowEvent));
    }
}

Answer 2

Update: Firoso, as mentioned in the comments you should be able to (I think - i.e. untested) be able to use the blend behavior components to cover your requirement.

In addition to downloading and installing the SDK. Get a copy of the expression blend samples library (you'll need to click on Downloads from the following link): Expression Blend samples

This library contains a prebuilt trigger called 'DataEventTrigger' which you can use to trigger actions in response to an event declared on your viewmodel.

The blend SDK already has (from what I can tell) the other piece of the puzzle - it already includes an action which allows you to control storyboards. The name of this action is 'ControlStoryboardAction'.

You should end up with some xaml which looks like this:

    <i:Interaction.Triggers>
        <samples:DataEventTrigger EventName="YourEvent">
            <im:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}" 
                   ControlStoryboardOption="Play"/>
        </samples:DataEventTrigger>
    </i:Interaction.Triggers>

Replace 'YourEvent' with the name of the event you have defined on your viewmodel, and replace 'Storyboard1' with the name of your storyboard. Of course the names will have to match exactly.

Here are the xaml namespace definitions used:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
xmlns:samples="clr-namespace:Expression.Samples.Interactivity;assembly=Expression.Samples.Interactivity"

Original post, before edit:

Suggest you look into Expression Blend Behaviors:

information

Blend SDK

video on behaviors

Answer 3

One way I found to resolve this is to use a data trigger on a DataTemplate that contains the above control... probably not the best way to do this however. I'm still open to better ideas.

Answer 4

You can also put a boolean IsGlowing property on your viewmodel and use datatriggers in your style

<Rectangle.Style>  
    <Style TargetType="{x:Type Rectangle}">  
        <Style.Triggers>  
            <DataTrigger Binding="{Binding Path=IsGlowing}" Value="True">  
                <DataTrigger.EnterActions>  
                    <BeginStoryboard>  
                        <Storyboard>  
                            ...  
                        </Storyboard>  
                    </BeginStoryboard>  
                </DataTrigger.EnterActions>  
            </DataTrigger>  
        </Style.Triggers>  
    </Style>  
</Rectangle.Style>