Chris Cavanagh’s Blog

Improved XAML "Loading" animation

July 25, 2008 · 4 Comments

Here’s a simplified version of the XAML “Loading” animation I did some time ago.  This one uses an Image and a DrawingImage and scales better to its container (note it’s hard-coded to “blue” right now):

    <Image Name="content" Opacity="0">
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.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:5" RepeatBehavior="Forever"
                                        Storyboard.TargetName="angle"
                                        Storyboard.TargetProperty="Angle"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <DrawingGroup>
                        <GeometryDrawing Brush="Transparent">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0,1,1"/>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <DrawingGroup>
                            <DrawingGroup.Transform>
                                <RotateTransform x:Name="angle" Angle="0" CenterX="0.5" CenterY="0.5"/>
                            </DrawingGroup.Transform>
                            <GeometryDrawing>
                                <GeometryDrawing.Pen>
                                    <Pen Brush="Blue" Thickness="0.1"/>
                                </GeometryDrawing.Pen>
                                <GeometryDrawing.Geometry>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0.9,0.5">
                                            <ArcSegment Point="0.5,0.1" RotationAngle="90" SweepDirection="Clockwise" IsLargeArc="True" Size="0.4,0.4"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="Blue">
                                <GeometryDrawing.Geometry>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0.5,0">
                                            <LineSegment Point="0.7,0.1" />
                                            <LineSegment Point="0.5,0.2" />
                                        </PathFigure>
                                    </PathGeometry>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup>
                    </DrawingGroup>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>

Categories: .NET

4 responses so far ↓

Leave a Comment