Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 717
Firoso Avatar asked Sep 14 '09 22:09

Firoso


2 Answers

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

like image 130
Phil Avatar answered Oct 22 '22 23:10

Phil


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>  
like image 38
kenwarner Avatar answered Oct 23 '22 00:10

kenwarner