Mr Andersson

Posts Tagged ‘wpf

How To Make the Firefox/YouTube Wait Symbol In WPF

with 2 comments

Recently I thought about doing one of those trendy animated “hour glasses”, the “wait” symbol which appears when that computer of yours is waiting or working on stuff in the background.

So what do I mean by “doing one”.. In HTML? with jQuery UI perhaps? No and no.

About 3-4 months ago we started to get WPF into production in our product at work and now we’re doing all our new features based on WPF and XAML.
So this animated “hour glass” (or “spinner” which is the word I will use from here) must of course be created in WPF.

I believe that you guys and girls out there who have worked with XAML, since the spec came out in 2006, probably just say “Say hi to XAML, my friend”. For me however, I’m quite proud of how easy it was for me to create this animated little thing.

When I brought this up during lunch a couple of days ago I discussed what the least CPU consumtive design would be.
My first design thought I came up with was based on 8 circles with ColorAnimations which would make the circles look like the were rotating.
After a quick discussion with my fellow collegues Morten and Wilhelm I got interested about the idea of using a rotating (using RenderTransform) Canvas instead. This idea worked out very well and here is the result (you must have .Net installed to view it in your browser).

So the XAML required to achieve this is quite simple, here is a summary:

  1. A Canvas is used to distribute the 8 circles on
  2. Each circle has its fixed position and its own transparency (which makes the “tail” effect)
  3. We add a trigger to the FrameworkElement.Loaded event for the Canvas, in which we…
  4. …add a DoubleAnimation targeting the Angle property of the RotateTransform we also added to the Canvas
  5. We use a ViewBox as the parent of the Canvas which lets us scale the animation to fit in i.e. a TabPage header control (like the tabs in Firefox)

And here is the XAML:


<Viewbox>
<Canvas Width="80" Height="80" Name="canvas">
<Canvas.RenderTransform>
<RotateTransform Angle="0" CenterX="40" CenterY="40" />
</Canvas.RenderTransform>
<Canvas.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="canvas"
Storyboard.TargetProperty="(Canvas.RenderTransform).(RotateTransform.Angle)"
To="360"
Duration="0:0:0.7"
RepeatBehavior="Forever"/>
</Storyboard>

</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Ellipse Canvas.Top="0" Canvas.Left="30" Width="20" Height="20" Fill="#08000000"/>
<Ellipse Canvas.Top="10" Canvas.Left="50" Width="20" Height="20" Fill="#15000000"/>

<Ellipse Canvas.Top="30" Canvas.Left="60" Width="20" Height="20" Fill="#38000000"/>
<Ellipse Canvas.Top="50" Canvas.Left="50" Width="20" Height="20" Fill="#55000000"/>
<Ellipse Canvas.Top="60" Canvas.Left="30" Width="20" Height="20" Fill="#88000000"/>
<Ellipse Canvas.Top="50" Canvas.Left="10" Width="20" Height="20" Fill="#aa000000"/>
<Ellipse Canvas.Top="30" Canvas.Left="0" Width="20" Height="20" Fill="#cc000000"/>
<Ellipse Canvas.Top="10" Canvas.Left="10" Width="20" Height="20" Fill="#ff000000"/>

</Canvas>
</Viewbox>

Pretty easy, or what do you think?

Advertisements

Written by anderssonjohan

March 12, 2009 at 21:00

Posted in programming

Tagged with ,