Switch animation based on property value

Question

I have a ViewModel with a State property and a Datatemplate wich contains a simple rectangle with a background brush. Whenever the State of the ViewModel changes I want to trigger an animation that starts with the color the brush currently has and animates it to the new color representing the new state. I have done this with datatriggers. And it almost works. The only problem I have is that it does not start with the color the brush currently has but with the unanimated base color. This is probably because I remove the animation in the exit action. But if I don't do that I can only animate once. What am I missing?

Another question I have is: I need this stateanimation in a lot of different datatemplates it always binds to the same property ("State") and they always animate a SolidColorbrush. Is there a way I can share these datatrigger animations across datatemplates using resources and/or styles?

<DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Path=State}" Value="Active">
        <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="activeStoryboard" HandoffBehavior="SnapshotAndReplace">
                <Storyboard>
                    <ColorAnimation To="Green" FillBehavior="HoldEnd" Duration="00:00:0.25" Storyboard.TargetName="stateBrush" Storyboard.TargetProperty="Color" />
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
        <DataTrigger.ExitActions>
            <RemoveStoryboard BeginStoryboardName="activeStoryboard" />
        </DataTrigger.ExitActions>
    </DataTrigger>
    <DataTrigger Binding="{Binding Path=State}" Value="Error">
        <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="errorStoryboard" HandoffBehavior="SnapshotAndReplace">
                <Storyboard>
                    <ColorAnimation To="Red" FillBehavior="HoldEnd" Duration="00:00:0.25" Storyboard.TargetName="stateBrush" Storyboard.TargetProperty="Color" />
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
        <DataTrigger.ExitActions>
            <RemoveStoryboard BeginStoryboardName="errorStoryboard" />
        </DataTrigger.ExitActions>
    </DataTrigger>
    <DataTrigger Binding="{Binding Path=State}" Value="Wait">
        <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="waitStoryboard" HandoffBehavior="SnapshotAndReplace">
                <Storyboard>
                    <ColorAnimation To="Yellow" FillBehavior="HoldEnd" Duration="00:00:0.25" Storyboard.TargetName="stateBrush" Storyboard.TargetProperty="Color" />
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
        <DataTrigger.ExitActions>
            <RemoveStoryboard BeginStoryboardName="waitStoryboard" />
        </DataTrigger.ExitActions>
    </DataTrigger>
    <DataTrigger Binding="{Binding Path=State}" Value="Inactive">
        <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="inactiveStoryboard" HandoffBehavior="SnapshotAndReplace">
                <Storyboard>
                    <ColorAnimation To="Gray" FillBehavior="HoldEnd" Duration="00:00:0.25" Storyboard.TargetName="stateBrush" Storyboard.TargetProperty="Color" />
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
        <DataTrigger.ExitActions>
            <RemoveStoryboard BeginStoryboardName="inactiveStoryboard" />
        </DataTrigger.ExitActions>
    </DataTrigger>
</DataTemplate.Triggers>

Answer 1

I can't completely answer your question but I can at least point out that you can share the Storyboards but I'm not sure about the DataTriggers themselves. An interesting idea though. I've wondering the same sort of thing about Bindings because I often have many repeated uses of a single binding and was trying to find a way to declare it once and reuse at least within a single Control or XAML ResourceDictionary.