Chris Cavanagh’s Blog

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

<Canvas xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
        xmlns  =”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.