Version

Animations (xamBusyIndicator)

Topic Overview

Purpose

This topic summarizes the available pre-built animations in the xamBusyIndicator™ control.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic explains the features supported by the control from developer perspective.

This topic provides an overview of the visual elements of the control.

In this topic

This topic contains the following sections:

Specifying Pre-built Animation

Overview

Use the XamBusyIndicator Animation property to set a specific pre-built animation to the xamBusyIndicator control.

By default, the Animation property initial value is “SpinnerBars”.

Property settings

The following table maps the desired configuration to the property settings that manage it.

In order to: Use this property: And set it to:

Specify the xamBusyIndicator animation

Example

You can specify the xamBusyIndicator animation in one of the following ways:

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="Gears" />

In XAML:

<ig:XamBusyIndicator IsBusy="True" >
    <ig:XamBusyIndicator.Animation>
        <ig:GearsBusyAnimation />
    </ig:XamBusyIndicator.Animation>
</ig:XamBusyIndicator>

In C#:

BusyIndicator.Animation = new GearsBusyAnimation();

Pre-built Animations

Pre-built animations summary chart

The following table summarizes the pre-build animations in the xamBusyIndicator control and supported modes – determinate and indeterminate. Additional details are available after the summary table.

Animation Has determinate state
No.png
No.png
Yes.png
Yes.png
No.png
No.png
No.png
No.png

Azure

The screenshot below demonstrates how the “Azure” animation looks by default:

Animations 99.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="Azure"  />

Gears

The screenshot below demonstrates how the “Gears” animation looks by default:

Animations 8.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="Gears"  />

ProgressBar

The screenshot below demonstrates how the “ProgressBar” indeterminate animation looks by default:

Animations 9.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="ProgressBar" IsIndeterminate="True"  />

The screenshot below demonstrates how the “ProgressBar” determinate animation looks by default:

Animations 10.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="ProgressBar" IsIndeterminate=" ProgressValue="0.5" />

ProgressRing

The screenshot below demonstrates how the “ProgressRing” indeterminate animation looks by default:

Animations 11.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="ProgressRing" IsIndeterminate="True"/>

The screenshot below demonstrates how the “ProgressRing” determinate animation looks by default:

Animations 12.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="ProgressRing" IsIndeterminate=" ProgressValue=".5"/>

SpinnerBalls

The screenshot below demonstrates how the “SpinnerBalls” animation looks by default:

Animations 13.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="SpinnerBalls" />

SpinnerBars

The screenshot below demonstrates how the “SpinnerBars” animation looks by default:

Animations 14.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="SpinnerBars" />

SpinnerBarsWave

The screenshot below demonstrates how the “SpinnerBarsWave” animation looks by default:

Animations 15.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="SpinnerBarsWave" />

SpinnerSegmented

The screenshot below demonstrates how the “SpinnerSegmented” animation looks by default:

Animations 16.png

Following is the code that implements this example.

In XAML:

<ig:XamBusyIndicator IsBusy="True" Animation="SpinnerSegmented" />

Related Topics

The following topic provides additional information related to this topic.

Topic Purpose

This topic explains how to customize the xamBusyIndicator control default animations brushes.

This topic explains how to apply a custom animation to the xamBusyIndicator control.

This topic provides reference information about the key classes related to the control.