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>
4 responses so far ↓
Alan Le // July 25, 2008 at 12:59 pm |
I threw this xaml in XAMLPad to check it out. Nice work Chris. The animation timing is slightly slow but that’s quick to tweak.
Dew Drop - July 26, 2008 | Alvin Ashcraft's Morning Dew // July 26, 2008 at 8:52 am |
[...] Improved XAML “Loading” Animation (Chris Cavanagh) [...]
Recent Links Tagged With "xaml" - JabberTags // October 26, 2008 at 4:34 am |
[...] public links >> xaml Improved XAML "Loading" animation Saved by KikiKay on Sat 25-10-2008 What is XAML , WPF ,XBAP Saved by maddiej93 on Mon 20-10-2008 [...]
anon // March 23, 2009 at 4:01 pm |
Hey, thanks! Very useful.