Hi all! How about we make a download busy indicator that is the same as the YouTube busy indicator?
[silverlight:http://blog.arvixe.com/wp-content/uploads/2012/05/BlogArvixeCom.UserNT.BusyIndicatorYouTube.xap, 350, 250]
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!
Looking for quality Silverlight Hosting? Look no further than Arvixe Web Hosting!