バージョン

ビジー コンテンツの構成 (xamBusyIndicator)

トピックの概要

目的

このトピックでは、 xamBusyIndicator ビジー コンテンツを構成する方法を説明します。

前提条件

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

トピック 目的

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

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

このトピックの内容

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

ビジー コンテンツの構成

概要

xamBusyIndicator ビジー コンテンツは、アニメーション領域の下に置かれるコンテンツです。

XamBusyIndicator の BusyContent プロパティを使用して、テキストまたは FrameworkElement を配置します。

2 つの例では、テキストと FrameworkElement を xamBusyIndicator ビジー コンテンツに設定する方法を示しています。

デフォルトで、BusyContent プロパティの初期値は null です。

プロパティ設定

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

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

表示されたビジー コンテンツの構成

object

テキストをビジー コンテンツとして設定する - 例

以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の外観がどのようになるかを示しています。

プロパティ 値

しばらくお待ちください。
Configuring Busy Content 1.png

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

XAML の場合:

<ig:XamBusyIndicator IsBusy="True" BusyContent="Please, wait ..." />

FrameworkElement をビジー コンテンツとして設定する - 例

以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の外観がどのようになるかを示しています。

プロパティ 値

<StackPanel Orientation="水平" HorizontalAlignment="中央">

_    <Button Content="開始" Width="50" Margin="5"/>_

_    <Button Content="キャンセル" Width="50" Margin="5" />_

</StackPanel>
Configuring Busy Content 2.png

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

XAML の場合:

<ig:XamBusyIndicator IsBusy="True">
    <ig:XamBusyIndicator.BusyContent>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="Start" Width="50" Margin="5"/>
            <Button Content="Cancel" Width="50" Margin="5" />
        </StackPanel>
    </ig:XamBusyIndicator.BusyContent>
</ig:XamBusyIndicator>

ビジー コンテンツ テンプレートの適用

概要

XamBusyIndicator の BusyContentTemplate プロパティを使用して、 xamBusyIndicator ビジー コンテンツにカスタム テンプレートを適用します。

プロパティ設定

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

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

ビジー コンテンツにカスタム テンプレートを適用

DataTemplate

例

以下のスクリーンショットは、以下の設定の結果、 xamBusyIndicator の外観がどのようになるかを示しています。

プロパティ 値

<DataTemplate>

<StackPanel Orientation="垂直">

<TextBlock Text="{Binding ProgressValue, StringFormat={}{0:P0}}" />

<Slider Maximum="1" Minimum="0" Width="80" Value="{Binding ProgressValue}" />

</StackPanel>

</DataTemplate>
Configuring Busy Content 3.png

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

XAML の場合:

<ig:XamBusyIndicator IsBusy="True" Animation="ProgressBar"
                     BusyContent="{Binding RelativeSource={RelativeSource Self}}"
                     ProgressValue=".5">
    <ig:XamBusyIndicator.BusyContentTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding ProgressValue, StringFormat={}{0:P0}}" />
                <Slider Maximum="1" Minimum="0" Width="80" Value="{Binding ProgressValue}" />
            </StackPanel>
        </DataTemplate>
    </ig:XamBusyIndicator.BusyContentTemplate>
</ig:XamBusyIndicator>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピックでは、 xamBusyIndicator コントロールを表示する方法を説明します。

このトピックでは、 xamBusyIndicator コントロールを表示する前の遅延時間を構成する方法を説明します。

このトピックでは、 xamBusyIndicator が非アクティブな場合に、UIElement がフォーカスを受け取るように明示的に構成する方法を説明します。

このトピックでは、 xamBusyIndicator コントロールを構成して、既定の進行状況を表示する方法を説明します。

このトピックでは、 xamBusyIndicator のオーバーレイ スタイルをカスタマイズする方法を説明します。

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