バージョン

アニメーション (xamBusyIndicator)

トピックの概要

目的

このトピックでは、 xamBusyIndicator コントロールで使用可能なビルド済みのアニメーションについて簡単に説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、このコントロールでサポートする機能を開発者の観点から説明します。

このトピックでは、コントロールの視覚要素についての概要を紹介します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

ビルド済みアニメーションの指定

概要

XamBusyIndicator の Animation プロパティを使用して、特定のビルド済みアニメーションを xamBusyIndicator コントロールに設定します。

デフォルトで、Animation プロパティの初期値は “SpinnerBars” です。

プロパティ設定

以下の表は、任意の構成とそれを管理するプロパティ設定のマッピングを示します。

目的: 使用するプロパティ: 設定の選択肢:

xamBusyIndicator アニメーションの指定

例

xamBusyIndicator アニメーションは、以下のいずれかの方法で指定できます。

XAML の場合:

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

XAML の場合:

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

C# の場合:

BusyIndicator.Animation = new GearsBusyAnimation();

ビルド済みのアニメーション

ビルド済みアニメーションの概要表

以下の表で、 xamBusyIndicator コントロールのビルド済みアニメーションとサポートされている確定モードと非確定モードを簡単に説明します。詳細は、概要表の後に記載されています。

アニメーション 確定状態を使用可能
No.png
No.png
Yes.png
Yes.png
No.png
No.png
No.png
No.png

Azure

以下のスクリーンショットは、“Azure” アニメーションのデフォルトの外観を示しています。

Animations 99.png

以下のコードはこの例を実装します。

XAML の場合:

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

Gears

以下のスクリーンショットは、“Gears” アニメーションのデフォルトの外観を示しています。

Animations 8.png

以下のコードはこの例を実装します。

XAML の場合:

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

ProgressBar

以下のスクリーンショットは、非確定モードの “ProgressBar” アニメーションのデフォルトの外観を示しています。

Animations 9.png

以下のコードはこの例を実装します。

XAML の場合:

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

以下のスクリーンショットは、確定モードの “ProgressBar” アニメーションのデフォルトの外観を示しています。

Animations 10.png

以下のコードはこの例を実装します。

XAML の場合:

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

ProgressRing

以下のスクリーンショットは、非確定モードの “ProgressRing” アニメーションのデフォルトの外観を示しています。

Animations 11.png

以下のコードはこの例を実装します。

XAML の場合:

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

以下のスクリーンショットは、確定モードの “ProgressRing” アニメーションのデフォルトの外観を示しています。

Animations 12.png

以下のコードはこの例を実装します。

XAML の場合:

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

SpinnerBalls

以下のスクリーンショットは、“SpinnerBalls” アニメーションのデフォルトの外観を示しています。

Animations 13.png

以下のコードはこの例を実装します。

XAML の場合:

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

SpinnerBars

以下のスクリーンショットは、“SpinnerBars” アニメーションのデフォルトの外観を示しています。

Animations 14.png

以下のコードはこの例を実装します。

XAML の場合:

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

SpinnerBarsWave

以下のスクリーンショットは、“SpinnerBarsWave” アニメーションのデフォルトの外観を示しています。

Animations 15.png

以下のコードはこの例を実装します。

XAML の場合:

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

SpinnerSegmented

以下のスクリーンショットは、“SpinnerSegmented” アニメーションのデフォルトの外観を示しています。

Animations 16.png

以下のコードはこの例を実装します。

XAML の場合:

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

関連コンテンツ

トピック

以下のトピックでは、このトピックに関連する追加情報を提供しています。

トピック 目的

このトピックでは、 xamBusyIndicator コントロールのデフォルトのアニメーション ブラシをカスタマイズする方法を説明します。

このトピックでは、 xamBusyIndicator コントロールにカスタム アニメーションを適用する方法について説明します。

このトピックでは、コントロールに関連したキー クラスに関する参考情報を提供します。