Использование ColorAnimationUsingKeyFrames несколько раз для свойства Stroke.Color

Мне нравится использовать этот 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>

многократно.

На данный момент у меня был этот обходной путь

<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>

Мне нравится перемещать анимацию в ресурсы и просто привязывать ее к любому объекту (в конце будет 40 MirrorTile's).

1 ответ

Решение

Я не уверен, какой ResourceDictionary вы имеете в виду, но вы должны быть в состоянии написать что-то вроде этого. Обратите внимание, что нет Storyboard.TargetName больше

<!-- 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>

и затем используйте это так (без привязки):

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

<shapes:MirrorTile.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard
            Storyboard="{StaticResource HighlightedColorStoryboard}"/>
    </EventTrigger>
    ...
</shapes:MirrorTile.Triggers>
Другие вопросы по тегам