Click here to Skip to main content
15,883,894 members
Articles / Desktop Programming / WPF

Custom Loader Animations in Silverlight

Rate me:
Please Sign up or sign in to vote.
4.67/5 (8 votes)
22 Feb 2011CPOL5 min read 31.8K   856   22  
A guide to making custom loading animations for your applications in Silverlight.
<UserControl xmlns:my="clr-namespace:RCCustomLoaders.Loaders"  x:Class="RCCustomLoaders.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <my:SwirlyCircles Grid.Column="0" Grid.Row="0" />
        
        <my:SwirlyCircles Grid.Column="1" Grid.Row="0">
            <my:SwirlyCircles.EasingFunction>
                <BackEase />
            </my:SwirlyCircles.EasingFunction>
        </my:SwirlyCircles>
        
        <my:SwirlyCircles Grid.Column="2" Grid.Row="0">
            <my:SwirlyCircles.EasingFunction>
                <ElasticEase />
            </my:SwirlyCircles.EasingFunction>
        </my:SwirlyCircles>

        <my:SwirlyCircles AutoReverse="True" Grid.Column="3" Grid.Row="0">
            <my:SwirlyCircles.EasingFunction>
                <BounceEase />
            </my:SwirlyCircles.EasingFunction>
        </my:SwirlyCircles>

        <my:SwirlyCircles Grid.Column="4" Grid.Row="0" AutoReverse="True" Duration="00:00:00.5">
            <my:SwirlyCircles.EasingFunction>
                <SineEase />
            </my:SwirlyCircles.EasingFunction>
        </my:SwirlyCircles>

        <my:LittleBoxes Grid.Column="0" Grid.Row="1">
            <my:LittleBoxes.EasingFunction>
                <BounceEase Bounces="1" Bounciness="1" />
            </my:LittleBoxes.EasingFunction>
        </my:LittleBoxes>
        
        <my:LittleBoxes Grid.Column="1" Grid.Row="1">
            <my:LittleBoxes.EasingFunction>
                <BounceEase Bounces="0" />
            </my:LittleBoxes.EasingFunction>
        </my:LittleBoxes>
        
        <my:LittleBoxes Grid.Column="2" Grid.Row="1">
            <my:LittleBoxes.EasingFunction>
                <BounceEase Bounces="0" />
            </my:LittleBoxes.EasingFunction>
        </my:LittleBoxes>
        <my:LittleBoxes AddToBeginTime="00:00:00.5" Grid.Column="2" Grid.Row="1">
            <my:LittleBoxes.EasingFunction>
                <BounceEase Bounces="0" />
            </my:LittleBoxes.EasingFunction>
        </my:LittleBoxes>

        <my:LittleBoxes Duration="00:00:02" Grid.Column="3" Grid.Row="1">
            <my:LittleBoxes.EasingFunction>
                <ElasticEase />
            </my:LittleBoxes.EasingFunction>
        </my:LittleBoxes>

        <my:LittleBoxes Duration="00:00:00.5" Grid.Column="4" Grid.Row="1">
            <my:LittleBoxes.EasingFunction>
                <CubicEase />
            </my:LittleBoxes.EasingFunction>
        </my:LittleBoxes>

        <my:WP7 Grid.Row="2" Grid.Column="0" AutoReverse="True" />
        <my:WP7 Grid.Row="2" Grid.Column="2" />

        <my:_3D Grid.Column="0" Grid.Row="3" />
                
        <my:_3D Grid.Column="1" Grid.Row="3">
            <my:_3D.EasingFunction>
                <QuinticEase />
            </my:_3D.EasingFunction>
        </my:_3D>
                
        <my:_3D Grid.Column="2" Grid.Row="3" AutoReverse="True"  />
                
        <my:_3D Grid.Column="3" Grid.Row="3">
            <my:_3D.EasingFunction>
                <BounceEase Bounces="0" />
            </my:_3D.EasingFunction>
        </my:_3D>

        <my:_3D Grid.Column="4" Grid.Row="3">
            <my:_3D.EasingFunction>
                <CircleEase />
            </my:_3D.EasingFunction>
        </my:_3D>
    </Grid>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer self employed
South Africa South Africa
I develop awesome Windows Phone/Windows 8 stuff, am a Nokia Developer Champion, I do Netduino electronics stuff, and blog a lot. I also occasionally do talks about development at Universities and conferences like TechEd. I run a small indie Windows Phone studio, currently working on an AppCampus-funded game.

Checkout my just-for-fun apps here: http://www.windowsphone.com/en-US/store/publishers?publisherId=RogueCode&appId=23d742d2-5b14-48a7-8e5f-b3b779537338
I also do Windows Phone (and Windows) development for clients, for example: http://www.windowsphone.com/en-za/store/app/dstv/a87feeed-a8dd-4bcb-8d47-15908340fdab

I am currently on hiatus from writing development articles for WPCentral.com.

My first book has just been published on home automation with a Netduino: http://www.amazon.co.uk/Netduino-Home-Automation-Projects-Cavanagh/dp/1849697825

Comments and Discussions