XAML Loading Animation

UPDATE: You can find an improved (and simplified) version of the animation here.

Here’s a very simple XAML ‘loading’ animation you might find useful:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="1"
        Height="1"
        >

    <Canvas.RenderTransform>
        <TransformGroup>

            <RotateTransform x:Name="angle" Angle="0" CenterX="0.5" CenterY="0.5"/>

            <!-- Ideally remove the translation and scale from here
                 and let the container apply them instead -->

            <TranslateTransform X="-0.5" Y="-0.5"/>
            <ScaleTransform ScaleX="100" ScaleY="100"/>

        </TransformGroup>
    </Canvas.RenderTransform>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard x:Name="rotation">
                    <DoubleAnimation To="1" Duration="0:0:1"
                                                    Storyboard.TargetName="content"
                                                    Storyboard.TargetProperty="Opacity"/>
                    <DoubleAnimation From="0" To="359" Duration="0:0:3" RepeatBehavior="Forever"
                                                    Storyboard.TargetName="angle"
                                                    Storyboard.TargetProperty="Angle"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>

    <Canvas Name="content" Opacity="0">

        <Path Width="1" Height="1" Stretch="Fill" Stroke="Green" StrokeThickness="0.1" StrokeStartLineCap="Round">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="1,0">
                        <ArcSegment Point="0,-1" RotationAngle="90" SweepDirection="Clockwise" IsLargeArc="True" Size="1,1"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

        <Path Canvas.Left="0.49" Canvas.Top="-0.05" Width="0.2" Height="0.2" Stretch="Fill" Fill="Green">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,-1.1">
                        <LineSegment Point="0.1,-1" />
                        <LineSegment Point="0,-0.9" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

    </Canvas>

</Canvas>

You can see it in action here.