So, here is the catch; it is really easy to create animations with WPF, all you have to do is to create your objects and let storyboard handle the rest.

 

Lets give it a try;

 

First of all create a WPF applications in Visual Studio, then in the XAML window of Window1.xaml paste the following code

 

 

<Window x:Class="RichContent.Window1"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="RichContent" Height="557" Width="730">

    <Canvas>

        <Path Name="MyPath" Width="800" Height="800"

      StrokeThickness="20" StrokeDashArray="0.5,2"

      StrokeDashCap="Round" >

            <Path.Data>

                <CombinedGeometry GeometryCombineMode="Union">

                    <CombinedGeometry.Geometry1>

                        <EllipseGeometry x:Name="MyEllipseGeometry"  Center="200,200" RadiusX="150" RadiusY="150" />

                    </CombinedGeometry.Geometry1>

                    <CombinedGeometry.Geometry2>

                        <EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" />

                    </CombinedGeometry.Geometry2>

                </CombinedGeometry>

            </Path.Data>

 

            <Path.Fill>

 

                <VisualBrush>

                    <VisualBrush.Visual>

                        <TextBlock Text="Hello World" FontWeight="Bold" Padding="10">

                        <TextBlock.Background>

                          <LinearGradientBrush>

                              <GradientStop Offset="0" Color="Yellow" />

                              <GradientStop Offset="1" Color="Red" />

                          </LinearGradientBrush>

                        </TextBlock.Background>

                      </TextBlock>

                    </VisualBrush.Visual>

                </VisualBrush>

 

            </Path.Fill>

 

 

            <Path.Stroke>

                <LinearGradientBrush>

                    <GradientStop Offset="0" Color="Black" />

                    <GradientStop Offset="1" Color="White" />

                </LinearGradientBrush>

            </Path.Stroke>

 

 

        </Path>

 

    </Canvas>

 

</Window>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The Geometry will create 2 circles intersected which will have dashed side strokes,

clip_image002

Now lets add some animation to it; Insert the following triggers into your XAML Code; this will be a double animation and the contours of the geometry should be animated;

  

 

 

            <Path.Triggers>

                <EventTrigger RoutedEvent="Path.Loaded">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimation

                  Storyboard.TargetName="MyPath"

                  Storyboard.TargetProperty="StrokeDashOffset"

                  To="20" Duration="0:0:10"

          RepeatBehavior="Forever" />

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Path.Triggers>

 

 

 

 

 

 

 

And Finally lets add some more animation to the whole Picture as another storyboard

 

                        <BeginStoryboard>

                            <Storyboard>

                                <PointAnimation

                                    Storyboard.TargetName="MyEllipseGeometry"      

                                    Storyboard.TargetProperty="Center"

                                    From="150,100" To="650,200" Duration="0:0:3"

                                    RepeatBehavior="Forever" AutoReverse="True"/>

                            </Storyboard>

                        </BeginStoryboard>

 

 

 

 

 

You now have a combined shape with 2 simultaneous animations.