The radial loader

A very powerful style-less class in the library is the RadialLoader. Basically this is just a class that will allow you to add a datatemplate of an item that will be placed in a circle around the center and which you can then animate.

This is an example of how it can look:
AnimatedLoader.gif

This actual loader design is reproduced by the original made by Luke Richardville: http://codepen.io/lukerichardville/pen/fwjor

And this would be styled using the following XAML (no code needed, except maybe for the color converter):
<wpfLoaders:RadialLoader Width="125" Height="125" Radius="40" NumberOfElements="30" HorizontalAlignment="Center" VerticalAlignment="Center">
    <wpfLoaders:RadialLoader.Animation>
        <Storyboard Duration="0:0:2" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetProperty="Width" From="1" To="20" Duration="0:0:1"/>
        </Storyboard>
    </wpfLoaders:RadialLoader.Animation>
    <wpfLoaders:RadialLoader.ElementTemplate>
        <DataTemplate>
            <Rectangle Width="20" Height="4" Fill="{Binding Converter={x:Static wpfLoaders:ColorScaleConverter.Instance}}" Opacity="0.5"/>
        </DataTemplate>
    </wpfLoaders:RadialLoader.ElementTemplate>
</wpfLoaders:RadialLoader>
<wpfLoaders:RadialLoader Width="150" Height="150" Radius="40" NumberOfElements="30" AnimationOffsetScale="5" HorizontalAlignment="Center" VerticalAlignment="Center">
    <wpfLoaders:RadialLoader.Animation>
        <Storyboard Duration="0:0:2" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetProperty="Width" From="1" To="20" Duration="0:0:1" AutoReverse="True"/>
        </Storyboard>
    </wpfLoaders:RadialLoader.Animation>
    <wpfLoaders:RadialLoader.ElementTemplate>
        <DataTemplate>
            <Rectangle Width="20" Height="4" Fill="{Binding Converter={x:Static wpfLoaders:ColorScaleConverter.Instance}}">
                <Rectangle.RenderTransform>
                    <ScaleTransform ScaleX="-1"/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </DataTemplate>
    </wpfLoaders:RadialLoader.ElementTemplate>
</wpfLoaders:RadialLoader>

Last edited Jul 23, 2014 at 11:42 PM by Almund, version 4