Creating Metro (Windows 8) Loading Animation Using XAML

Introduction 

This article provides a complete XAML code with explanation required to create a Metro-style loading animation as seen in Microsoft Windows 8. A developer will be able to customize this code (e.g. change a particle color, a rotating speed, etc.) to suit his needs.

During my development, I use Kaxaml as a tool to create the animation.

Background 

There are plenty of articles out there providing tutorials about how to create an AJAX-style loading animation (busy indicator) in Silverlight/WPF using XAML. However, as my job required me to mimic a Metro-style loading animation, I decided to create one and shared it here

...

...

<Grid

    xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:system = "clr-namespace:System;assembly=mscorlib"

    xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid.Resources>

        <SolidColorBrush x:Key = "ParticleColor" Color = "#006699"/>

        <SolidColorBrush x:Key = "ParticleBackgroundColor" Color = "Transparent"/>

        <system:Double x:Key = "ParticleOpacity">1</system:Double>

        <system:Double x:Key = "StartingPointX">0</system:Double>

        <system:Double x:Key = "StartingPointY">-20</system:Double>

        <Style x:Key = "EllipseStyle" TargetType = "Ellipse">

            <Setter Property = "Width" Value = "5"/>

            <Setter Property = "Height" Value = "5"/>

            <Setter Property = "Fill" Value = "{StaticResource ParticleColor}"/>

            <Setter Property = "RenderTransformOrigin" Value = "0.5, 0.5"/>

            <Setter Property = "Opacity" Value = "1"/>

        </Style>

    </Grid.Resources>

    <Canvas Width = "50" Height = "50">

        <Canvas.Triggers>

            <EventTrigger RoutedEvent = "Canvas.Loaded">

                <EventTrigger.Actions>

                    <BeginStoryboard>

                        <Storyboard

                            x:Key = "MetroLoadingAnimation"

                            BeginTime = "00:00:00.000"

                            Duration = "00:00:2.000"

                            RepeatBehavior = "Forever">

                            <DoubleAnimation

                                Storyboard.TargetName = "p0"

                                Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"

                                From = "0"

                                To = "360"

                                BeginTime = "00:00:00.000"

                                Duration = "00:00:01.000"/>

                            <DoubleAnimation

                                Storyboard.TargetName = "p1"

                                Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"

                                From = "0"

                                To = "360"

                                BeginTime = "00:00:00.100"

                                Duration = "00:00:01.100"/>

Read more: Codeproject

QR: 

Posted via email from Jasper-net