How to Create a Silverlight BusyIndicator That is Similar to the YouTube BusyIndicator

Written by Andrew Ivanov Saturday, 9 June 2012

Hi all! How about we make a download busy indicator that is the same as the YouTube busy indicator?

Well, what have we here? Polygons, which can be in three states, with varying degrees of transparency.

Define a style:

<Style x:Key=”PolygonStyle” TargetType=”Polygon”>

<Setter Property=”Width” Value=”8″ />

<Setter Property=”Height” Value=”8″ />

<Setter Property=”Fill” Value=”White” />

<Setter Property=”RenderTransformOrigin” Value=”0.5, 0.5″ />

<Setter Property=”Opacity” Value=”0.5″ />

</Style>

To place a polygon in a circle, we apply the transformation to them:

<Polygon x:Name=”item0″ Style=”{StaticResource PolygonStyle}” Points=”0,0, 8,0, 6,7, 2,7″>

<Polygon.RenderTransform>

<TransformGroup>

<TranslateTransform X=”0″ Y=”-15″ />

<RotateTransform Angle=”0″ />

</TransformGroup>

</Polygon.RenderTransform>

</Polygon>

<Polygon x:Name=”item1″ Style=”{StaticResource PolygonStyle}” Points=”0,0, 8,0, 6,7, 2,7″>

<Polygon.RenderTransform>

<TransformGroup>

<TranslateTransform X=”0″ Y=”-15″ />

<RotateTransform Angle=”45″ />

</TransformGroup>

</Polygon.RenderTransform>

</Polygon>

To change the state of the polygons, we apply DoubleAnimationUsingKeyFrames to Opacity property.

<Storyboard Duration=”0:0:0.800″ RepeatBehavior=”Forever”>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”item0″ Storyboard.TargetProperty=”Opacity”>

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.0″ Value=”1″ />

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.100″ Value=”0.75″ />

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.200″ Value=”0.5″ />

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.700″ Value=”0.75″ />

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.800″ Value=”1″ />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

And that’s it! You now have a YouTube-like busy indicator!

Source Code

Looking for quality Silverlight Hosting? Look no further than Arvixe Web Hosting!