Animate DrawingImage GeometryDrawing Wpf Xaml

Question

I have a UserControl and want to animate one of the GeometryDrawing object. In my case there is a 'circle1' which I want to rotate endless. Can someone help me (Storyboard? where should I place xaml code?) ? Thx.

<UserControl.Resources>
        <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://sch.microsoft.com/winfx/2006/xaml">
        <DrawingImage x:Key="PumpOn">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Geometry="F1 M 214.557,193.691L 109.3,11.3306L 4,193.666L 214.557,193.691 Z ">
                            <GeometryDrawing.Pen>
                                <Pen LineJoin="Round" Brush="#FF00C800"/>
                            </GeometryDrawing.Pen>
                            <GeometryDrawing.Brush>
                                <LinearGradientBrush StartPoint="-0.00237454,0.5" EndPoint="1.00237,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#FF46FF00" Offset="0"/>
                                        <GradientStop Color="#FFD6FFC5" Offset="0.5"/>
                                        <GradientStop Color="#FF46FF00" Offset="0.991379"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </GeometryDrawing.Brush>
                        </GeometryDrawing>
                        <GeometryDrawing x:Name="circle1" Geometry="F1 M 109.604,10.0258C 177.463,10.0258 232.474,65.0365 232.474,132.896C 232.474,200.755 177.463,255.765 109.604,255.765C 41.7451,255.765 -13.2656,200.755 -13.2656,132.896C -13.2656,65.0365 41.745,10.0258 109.604,10.0258 Z ">
                            <GeometryDrawing.Pen>
                                <Pen Thickness="2" LineJoin="Round">
                                    <Pen.Brush>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF5DFF00" Offset="0"/>
                                            <GradientStop Color="#FF8D8D8D" Offset="0.448"/>
                                        </LinearGradientBrush>                                            
                                    </Pen.Brush>                                        
                                </Pen>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingImage.Drawing>                
        </DrawingImage>
    </ResourceDictionary>

</UserControl.Resources>

Answer 1

You can use ColorAnimation to do that like below:

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="myImage"  Storyboard.TargetProperty="Source.Drawing.Children[1].Pen.Brush.GradientStops[0].Color" To="#FF8D8D8D" Duration="0:0:0.5" AutoReverse="True"
                            RepeatBehavior="Forever"></ColorAnimation>
                <ColorAnimation Storyboard.TargetName="myImage"  Storyboard.TargetProperty="Source.Drawing.Children[1].Pen.Brush.GradientStops[1].Color" To="#FF5DFF00" Duration="0:0:0.5" AutoReverse="True"
                            RepeatBehavior="Forever"></ColorAnimation>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Window.Triggers>
<Grid>
    <Image x:Name="myImage">
        <Image.Source>
        <DrawingImage>
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Geometry="F1 M 214.557,193.691L 109.3,11.3306L 4,193.666L 214.557,193.691 Z ">
                            <GeometryDrawing.Pen>
                                <Pen LineJoin="Round" Brush="#FF00C800"/>
                            </GeometryDrawing.Pen>
                            <GeometryDrawing.Brush>
                                <LinearGradientBrush StartPoint="-0.00237454,0.5" EndPoint="1.00237,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#FF46FF00" Offset="0"/>
                                        <GradientStop Color="#FFD6FFC5" Offset="0.5"/>
                                        <GradientStop Color="#FF46FF00" Offset="0.991379"/>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </GeometryDrawing.Brush>
                        </GeometryDrawing>
                        <GeometryDrawing x:Name="circle1" Geometry="F1 M 109.604,10.0258C 177.463,10.0258 232.474,65.0365 232.474,132.896C 232.474,200.755 177.463,255.765 109.604,255.765C 41.7451,255.765 -13.2656,200.755 -13.2656,132.896C -13.2656,65.0365 41.745,10.0258 109.604,10.0258 Z ">
                            <GeometryDrawing.Pen>
                                <Pen Thickness="2" LineJoin="Round">
                                    <Pen.Brush>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF5DFF00" Offset="0"/>
                                            <GradientStop Color="#FF8D8D8D" Offset="0.448"/>
                                        </LinearGradientBrush>
                                    </Pen.Brush>
                                </Pen>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
      </Image.Source>
    </Image>
</Grid>