Here’s a simplified version of the WPF "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):
<ControlTemplate x:Key="loadingAnimation"> <ControlTemplate.Triggers> <Trigger Property="Visibility" Value="Visible"> <Trigger.EnterActions> <BeginStoryboard Name="animation"> <Storyboard> <DoubleAnimation From="0" To="359" Duration="0:0:5" RepeatBehavior="Forever" Storyboard.TargetName="angle" Storyboard.TargetProperty="Angle"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <StopStoryboard BeginStoryboardName="animation"/> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> <Image Name="content" Opacity="1"> <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="Green" 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="Green"> <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> </ControlTemplate>
Note it has a Trigger defined on Visibility to ensure the animation stops when the control is collapsed (otherwise it’ll consume resources even when hidden). You could use it like this:
<Control Name="loading" Grid.Column="4" Template="{StaticResource loadingAnimation}" Width="20" Visibility="Collapsed" />
Then set loading.Visibility to show or hide the animation (or fade in/out with another Storyboard).
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.