29
Sep

Loading Animation

1 Comment » Popularity: 11%

A very simple loading animation in XAML format.

Loading Animation

View Demo: New Window
Create a simple loading in XAML:
<UserControl x:Class="ShineDraw.Controls.LoadingAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="400" >
    <UserControl.Resources>
        <Storyboard x:Name="Rotation" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="45"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="45"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="90"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="90"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="135"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="135"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="180"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.0000000" Value="180"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.0000000" Value="225"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="225"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="270"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="270"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="315"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="315"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Ellipse Width="100" Height="100" Fill="#FF000000" >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform X="-150"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse Width="100" Height="100" Fill="#FFAAAAAA" >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="45" CenterX="200" CenterY="50"/>
                    <TranslateTransform X="-150"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse Width="100" Height="100" Fill="#FFAAAAAA"  >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90" CenterX="200" CenterY="50"/>
                    <TranslateTransform X="-150"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse Width="100" Height="100" Fill="#FFAAAAAA"  >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="135" CenterX="200" CenterY="50"/>
                    <TranslateTransform X="-150"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse Width="100" Height="100" Fill="#FF999999"  >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="180" CenterX="200" CenterY="50"/>
                    <TranslateTransform X="-150"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse Width="100" Height="100" Fill="#FF777777" >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="225" CenterX="200" CenterY="50"/>
                    <TranslateTransform X="-150"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse Width="100" Height="100" Fill="#FF555555"  >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="270" CenterX="200" CenterY="50"/>
                    <TranslateTransform X="-150"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse Width="100" Height="100" Fill="#FF333333"  >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="315" CenterX="200" CenterY="50"/>
                    <TranslateTransform X="-150"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Grid>
</UserControl>
  • DZone
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit

Related Posts

One Response to “Loading Animation”

Leave a Reply