Using ColorAnimationUsingKeyFrames multiple times for Stroke.Color Property

Question

I like to use this ColorAnimationUsingKeyFrames

<Color x:Key="HighlightedColor">Yellow</Color>

<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
              Duration="00:00:00.1000000"
              Storyboard.TargetName="HighlightAnimatedColorBrush"
              Storyboard.TargetProperty="Color"
              FillBehavior="HoldEnd">
    <ColorAnimationUsingKeyFrames.KeyFrames>
        <LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
    </ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>

multiple times.

At the moment I had this workaround

<shapes:MirrorTile InnerXRadius="5.0" 
                   InnerYRadius="5.0" 
                   OuterXRadius="57.0" 
                   OuterYRadius="57.0" 
                   MirrorTileAngle="45.0"
                   Fill="Green" 
                   StrokeThickness="2" 
                   CentrePoint="181.0, 181.0">
    <shapes:MirrorTile.Stroke>
        <SolidColorBrush x:Name="HighlightAnimatedColorBrush" Color="{StaticResource DefaultColor}"/>
    </shapes:MirrorTile.Stroke>

    <shapes:MirrorTile.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
                                  Duration="00:00:00.1000000"
                                  Storyboard.TargetName="HighlightAnimatedColorBrush"
                                  Storyboard.TargetProperty="Color"
                                  FillBehavior="HoldEnd">
                        <ColorAnimationUsingKeyFrames.KeyFrames>
                            <LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
                        </ColorAnimationUsingKeyFrames.KeyFrames>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </shapes:MirrorTile.Triggers>
</shapes:MirrorTile>

<shapes:MirrorTile InnerXRadius="5.0" 
                   InnerYRadius="5.0" 
                   OuterXRadius="57.0" 
                   OuterYRadius="57.0" 
                   MirrorTileAngle="45.0"
                   StrokeThickness="2" 
                   Fill="Green" 
                   CentrePoint="181.0, 181.0"
                   OffsetAngle="45.0">
    <shapes:MirrorTile.Stroke>
        <SolidColorBrush x:Name="HighlightAnimatedColorBrush2" Color="{StaticResource DefaultColor}"/>
    </shapes:MirrorTile.Stroke>

    <shapes:MirrorTile.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
                                  Duration="00:00:00.1000000"
                                  Storyboard.TargetName="HighlightAnimatedColorBrush2"
                                  Storyboard.TargetProperty="Color"
                                  FillBehavior="HoldEnd">
                        <ColorAnimationUsingKeyFrames.KeyFrames>
                            <LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
                        </ColorAnimationUsingKeyFrames.KeyFrames>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </shapes:MirrorTile.Triggers>
</shapes:MirrorTile>

I like to move the animation into the resources and just want to bind it to any object (at the end there will be 40 MirrorTile's).

Answer 1

I'm not sure which ResourceDictionary you mean, but you should be able to write something like this. Note that there is no Storyboard.TargetName any more.

<!-- somewhere in Resources -->
<Storyboard x:Key="HighlightedColorStoryboard">
    <ColorAnimationUsingKeyFrames Duration="0:0:0.1"
                                 Storyboard.TargetProperty="Stroke.Color">
        <ColorAnimationUsingKeyFrames.KeyFrames>
            <LinearColorKeyFrame Value="{StaticResource HighlightedColor}"
                                 KeyTime="0:0:0.5"/>
        </ColorAnimationUsingKeyFrames.KeyFrames>
    </ColorAnimationUsingKeyFrames>
</Storyboard>

and then use it like this (without binding):

<shapes:MirrorTile.Stroke>
    <SolidColorBrush Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>

<shapes:MirrorTile.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard
            Storyboard="{StaticResource HighlightedColorStoryboard}"/>
    </EventTrigger>
    ...
</shapes:MirrorTile.Triggers>