Confessions of a .NET Developer!

Creating a Circular Buffering Control

In this post I shall explain to create a Circular Buffering control like the one seen in websites when your video loads.
As I was learning about Animation and wrote my first post about it here :

Here is how it will look like :

Buffer

Window

No code-behind is used for this, its done in pure XAML!

Here is a Style that I am using for all the Ellipses involved :

        <Grid.Resources>            
            <Style TargetType="{x:Type Ellipse}">
                <Setter Property="Height" Value="12"/>
                <Setter Property="Width" Value="12"/>
                <Setter Property="Fill" Value="Turquoise"/>
                <Setter Property="Opacity" Value="0"/>
            </Style>
        </Grid.Resources>

<!-- And the Grid containing all the Ellipses and Animations-->

    <Grid>
        <Ellipse Margin="103,0,0,72" Name="e1" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
        <Ellipse Name="e2" Stroke="Black" VerticalAlignment="Bottom" Margin="110,0,0,86" HorizontalAlignment="Left" />
        <Ellipse Margin="126,0,0,91" Name="e3" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
        <Ellipse Margin="142,0,0,87" Name="e4" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
        <Ellipse HorizontalAlignment="Left" Margin="150,0,0,72" Name="e5" Stroke="Black" VerticalAlignment="Bottom"/>
        <Ellipse HorizontalAlignment="Left" Margin="110,0,0,57" Name="e8" Stroke="Black" VerticalAlignment="Bottom"/>
        <Ellipse Opacity="0" Margin="126,0,0,47" Name="e7" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
        <Ellipse HorizontalAlignment="Left" Margin="144,0,0,57" Name="e6" Stroke="Black" VerticalAlignment="Bottom"/>

        <Button Height="23" Margin="87,72,116,0" Name="button4" VerticalAlignment="Top" Content="Animate!">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation Storyboard.TargetName="e1"
                                             Storyboard.TargetProperty="Opacity"
                                             From="0"
                                             To="1"
                                             AutoReverse="True"
                                             Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetName="e2"
                                             Storyboard.TargetProperty="Opacity"
                                             From="0"
                                             To="1"
                                             BeginTime="0:0:0.2"
                                             AutoReverse="True"
                                             Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetName="e3"
                                             Storyboard.TargetProperty="Opacity"
                                             From="0"
                                             To="1"
                                             BeginTime="0:0:0.4"
                                             AutoReverse="True"                                            
                                             Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetName="e4"
                                             Storyboard.TargetProperty="Opacity"
                                             From="0"
                                             To="1"
                                             AutoReverse="True"                                           
                                             BeginTime="0:0:0.6"
                                             Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetName="e5"
                                             Storyboard.TargetProperty="Opacity"
                                             From="0"
                                             To="1"
                                             AutoReverse="True"                                           
                                             BeginTime="0:0:0.8"
                                             Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetName="e6"
                                             Storyboard.TargetProperty="Opacity"
                                             From="0"
                                             To="1"
                                             AutoReverse="True"                                           
                                             BeginTime="0:0:1"
                                             Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetName="e7"
                                             Storyboard.TargetProperty="Opacity"
                                             From="0"
                                             To="1"
                                             AutoReverse="True"                                           
                                             BeginTime="0:0:1.2"
                                             Duration="0:0:0.5"/>
                            <DoubleAnimation Storyboard.TargetName="e8"
                                             Storyboard.TargetProperty="Opacity"
                                             From="0"
                                             To="1"
                                             AutoReverse="True"                                           
                                             BeginTime="0:0:1.4"
                                             Duration="0:0:0.5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>

So what happens here is that when the Button is Clicked a Click event is fired which will animate the 8 ellipses there.
As you can see, the BeginTime is set to every DoubleAnimation with a difference 0.2 seconds. So after first 0.2 seconds are over, the second ellipse starts, when 0.4 seconds are over, the third starts etc. AutoReverse is also given to give a fading-in fading-out effect to each ellipse.
Now you must be wondering that how come it is getting repeated over and over again. Answer is, I have set the RepeatBehaviour propety of the StoryBoard to Forever.

That’s it! It wasn’t that tough, please feel free to leave your comments, feedbacks and your valuable suggestions if you have a better idea on this.
Thanks for reading! 🙂

Advertisements

March 18, 2011 - Posted by | WPF

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: