syncfusion-wpf-busy-indicator

Syncfusion WPF Busy Indicator の実装

Syncfusion® WPF Busy Indicator コントロールの実装に関する包括的なガイドです。SfBusyIndicator は、37 種類以上の組み込みアニメーション、カスタマイズ可能なヘッダー、完全な MVVM サポートにより、時間のかかる処理中に視覚的なフィードバックを提供します。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• データの取得や処理中にローディングインジケーターを表示する
• 非同期処理の完了を待つ間に進行状況のアニメーションを表示する
• 時間のかかるバックグラウンドタスク中に視覚的なフィードバックを提供する
• ファイル操作、API 呼び出し、データベースクエリ向けの待機画面を実装する
• アニメーション付きインジケーターで WPF アプリケーションのビジー状態を示す
• ヘッダー、テンプレート、アニメーションスタイルを使用してローディング UI をカスタマイズする
• コマンド実行時のフィードバックに MVVM パターンを統合する
• 37 種類以上の組み込みアニメーションからアニメーションの種類を設定する

SfBusyIndicator は、ユーザーが待機する必要のある処理中に明確な視覚的フィードバックを提供し、ユーザーエクスペリエンスを向上させるために不可欠です。

コンポーネントの概要

SfBusyIndicator コントロールは、WPF アプリケーションでローディングインジケーターを表示するための柔軟でカスタマイズ可能な方法を提供します。

主な機能

• 37 種類以上の組み込みアニメーション - Flight、Spin、Ball、Box など、複数のアニメーションスタイルを用意
• アニメーション速度の制御 - Fluent を除くすべてのアニメーションの速度を調整可能
• カスタムヘッダー - アニメーションの下に説明テキストを表示
• ヘッダーテンプレート - ヘッダーコンテンツを完全にカスタマイズ可能
• 柔軟なサイズ設定 - ViewboxHeight と ViewboxWidth でアニメーションのサイズを制御
• IsBusy プロパティ - インジケーターの表示／非表示を切り替えるシンプルなブール値プロパティ
• テーマのサポート - Syncfusion のテーマシステムとの組み込み統合
• MVVM 対応 - プロパティとコマンドの完全なデータバインディングサポート
• 拡張可能なメソッド - カスタムのコントロール動作を実現するメソッドのオーバーライド

アセンブリと名前空間

• アセンブリ： Syncfusion.SfBusyIndicator.WPF
• 名前空間： Syncfusion.Windows.Controls.Notification
• NuGet パッケージ： Syncfusion.SfBusyIndicator.WPF

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet Package Manager によるインストール
• アセンブリ参照と名前空間のインポート
• ライセンスの設定と登録
• XAML とコードビハインドでの基本的な実装
• テーマのセットアップと設定
• 最小限の実行可能な例
• GitHub サンプルリポジトリへのリンク

アニメーションの設定

📄 参照： references/animation-types.md

• AnimationType プロパティの概要
• 37 種類以上の組み込みアニメーションの全一覧
• AnimationSpeed プロパティの設定
• 速度調整の例（標準、高速、低速）
• プラットフォーム固有の注意事項（Fluent アニメーションの動作）
• アニメーションギャラリーの参照
• XAML、C#、VB のコード例

表示の制御

📄 参照： references/isbusy-property.md

• IsBusy プロパティの目的と使い方
• アニメーションの実行をオン／オフに切り替える方法
• 非同期処理へのデータバインディング
• コマンドを使用した MVVM パターンの統合
• RelayCommand と ICommand の例
• ビューモデルからビジー状態を切り替える方法
• 一般的な表示制御のシナリオ

ヘッダーのカスタマイズ

📄 参照： references/header-customization.md

• シンプルなテキストに使用する Header プロパティ
• 高度なカスタマイズに使用する HeaderTemplate
• スタイルを使用した DataTemplate の例
• 動的コンテンツのバインディング
• 複数行のヘッダーと書式設定
• 前景色とフォントのカスタマイズ
• レイアウトと配置のオプション

サイズとレイアウト

📄 参照： references/sizing.md

• ViewboxHeight プロパティの設定
• ViewboxWidth プロパティの設定
• レスポンシブなサイズ設定の方法
• コンテナーとレイアウトに関する考慮事項
• アスペクト比の維持
• さまざまな画面サイズ向けの例
• サイズ設定のベストプラクティス

高度な使用方法 - メソッド

📄 参照： references/methods.md

• リソースのクリーンアップに使用する Dispose() メソッド
• Dispose(Boolean) の保護されたオーバーロード
• テンプレートの初期化に使用する OnApplyTemplate()
• アニメーションの変更に使用する OnAnimationTypeChanged()
• プロパティの監視に使用する OnPropertyChanged()
• カスタムコントロールの拡張シナリオ
• テンプレートパーツへのアクセスパターン
• 高度なカスタマイズの例

クイックスタートの例

基本的なビジーインジケーター

<Window xmlns:syncfusion="clr-namespace:Syncfusion.Windows.Controls.Notification;assembly=Syncfusion.SfBusyIndicator.WPF"
        x:Class="BusyIndicatorApp.MainWindow">
    <Grid Background="CornflowerBlue">
        <syncfusion:SfBusyIndicator IsBusy="True"
                                     AnimationType="Flight"
                                     Header="Loading..."
                                     Foreground="White"/>
    </Grid>
</Window>

データバインディングを使用する場合（MVVM）

<Grid>
    <syncfusion:SfBusyIndicator IsBusy="{Binding IsLoading}"
                                 AnimationType="DoubleCircle"
                                 Header="{Binding LoadingMessage}"/>
</Grid>

public class MainViewModel : INotifyPropertyChanged
{
    private bool _isLoading;
    public bool IsLoading
    {
        get => _isLoading;
        set { _isLoading = value; OnPropertyChanged(); }
    }
    
    private string _loadingMessage = "Please wait...";
    public string LoadingMessage
    {
        get => _loadingMessage;
        set { _loadingMessage = value; OnPropertyChanged(); }
    }
    
    public async Task LoadDataAsync()
    {
        IsLoading = true;
        LoadingMessage = "Loading data...";
        
        await Task.Delay(3000); // Simulate operation
        
        IsLoading = false;
    }
}

一般的なパターン

パターン 1：ビジーインジケーターを使用した非同期操作

public class DataViewModel : ViewModelBase
{
    private bool _isBusy;
    public bool IsBusy
    {
        get => _isBusy;
        set => SetProperty(ref _isBusy, value);
    }
    
    public ICommand LoadCommand { get; }
    
    public DataViewModel()
    {
        LoadCommand = new RelayCommand(async () => await LoadDataAsync());
    }
    
    private async Task LoadDataAsync()
    {
        IsBusy = true;
        try
        {
            var data = await _dataService.GetDataAsync();
            // Process data
        }
        finally
        {
            IsBusy = false;
        }
    }
}

パターン 2：カスタムアニメーションの選択

<StackPanel>
    <ComboBox x:Name="AnimationSelector" SelectedIndex="0">
        <ComboBoxItem Content="Flight"/>
        <ComboBoxItem Content="DoubleCircle"/>
        <ComboBoxItem Content="Spin"/>
    </ComboBox>
    
    <syncfusion:SfBusyIndicator IsBusy="True"
                                 AnimationType="{Binding ElementName=AnimationSelector, 
                                                Path=SelectedItem.Content}"/>
</StackPanel>

パターン 3：オーバーレイビジーインジケーター

<Grid>
    
    <ContentControl Content="{Binding MainContent}"/>
    
    
    <Grid Background="#80000000" 
          Visibility="{Binding IsBusy, Converter={StaticResource BoolToVisibilityConverter}}">
        <syncfusion:SfBusyIndicator IsBusy="{Binding IsBusy}"
                                     AnimationType="Ball"
                                     Header="Processing..."
                                     Foreground="White"
                                     ViewboxHeight="150"
                                     ViewboxWidth="150"/>
    </Grid>
</Grid>

パターン 4：条件付きヘッダー

<syncfusion:SfBusyIndicator IsBusy="{Binding IsProcessing}">
    <syncfusion:SfBusyIndicator.HeaderTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding CurrentOperation}" 
                          FontSize="14" FontWeight="Bold"/>
                <TextBlock Text="{Binding ProgressPercentage, StringFormat='Progress: {0}%'}"
                          FontSize="11" Margin="0,5,0,0"/>
            </StackPanel>
        </DataTemplate>
    </syncfusion:SfBusyIndicator.HeaderTemplate>
</syncfusion:SfBusyIndicator>

主なプロパティ

プロパティ	型	説明
IsBusy	bool	アニメーションを表示するかどうかを制御します
AnimationType	AnimationTypes	アニメーションスタイル（Flight、Spin など）を設定します
AnimationSpeed	double	アニメーション速度を制御します（Fluent 型では使用されません）
Header	object	アニメーションの下に表示するテキストまたはコンテンツです
HeaderTemplate	DataTemplate	ヘッダーコンテンツ用のカスタムテンプレートです
ViewboxHeight	double	アニメーションのビューボックスの高さです
ViewboxWidth	double	アニメーションのビューボックスの幅です

主なメソッド

メソッド	説明
Dispose()	マネージドリソースとアンマネージドリソースを解放します
Dispose(Boolean)	リソースのクリーンアップ用の保護されたオーバーロードです
OnApplyTemplate()	テンプレートパーツにアクセスするためにオーバーライドします
OnAnimationTypeChanged()	アニメーションタイプの変更を処理するためにオーバーライドします
OnPropertyChanged()	プロパティの変更を監視するためにオーバーライドします

一般的なユースケース

データ読み込み操作

API、データベース、またはファイルシステムからデータを取得している間、ビジーインジケーターを表示します。IsBusy をビューモデルの読み込み状態にバインドします。

ファイル操作

ファイルのアップロード、ダウンロード、または処理中に、現在の操作を示す分かりやすいヘッダーとともに読み込み状況を表示します。

バックグラウンド処理

適切なアニメーションタイプとメッセージを使用して、バックグラウンドタスク（計算、画像処理、バッチ操作）が実行中であることを示します。

アプリケーションの初期化

アプリケーションの起動中に、構成、ユーザー設定、または初期データを読み込んでいる間、ビジーインジケーターを表示します。

検索およびフィルター操作

大規模なデータセットに対して複雑な検索またはフィルター操作を実行している間、視覚的なフィードバックを提供します。

ナビゲーションとページの読み込み

ビュー間を移動するときや、ナビゲーションベースのアプリケーションでページコンテンツを読み込むときに、ビジーインジケーターを表示します。

ベストプラクティス

1. 非同期操作では必ず使用する - 操作の開始前に IsBusy を設定し、完了後に解除してください
2. 分かりやすいヘッダーを表示する - 何が行われているかをユーザーに伝える説明的なテキストを使用してください
3. 適切なアニメーションを選択する - アプリケーションのテーマと目的に合ったアニメーションを選択してください
4. オーバーレイ方式を検討する - ビジー状態の間にユーザーが操作できないよう、半透明のオーバーレイを使用してください
5. 例外を適切に処理する - インジケーターが表示されたままにならないよう、必ず finally ブロックで IsBusy をリセットしてください
6. MVVM パターンを使用する - テスト容易性と保守性を高めるため、IsBusy をビューモデルのプロパティにバインドしてください
7. サイズを適切に調整する - インジケーターの重要度と利用可能な画面スペースに応じてサイズを設定してください
8. テーマを統一する - アプリケーション全体で外観を統一するため、Syncfusion のテーマを使用してください

パフォーマンスのヒント

• レンダリング性能に影響する可能性のある複雑な HeaderTemplate は避けてください
• ユースケースに適したアニメーションタイプを使用してください（頻繁に実行する操作にはシンプルなアニメーションを使用します）
• 複数のビジーインジケーターを不必要に入れ子にしないでください
• 多数のインジケーターを使用する場合は、アニメーションリソースのキャッシュを検討してください

関連コンポーネント

• ProgressBar - パーセンテージ付きの確定的な進捗表示に使用します
• Toast - 短い通知メッセージに使用します
• Message - アクション付きのユーザー通知に使用します
• Skeleton - コンテンツのプレースホルダーアニメーションに使用します

次のステップ： 実装のニーズに応じて、上記のリファレンスファイルに進んでください。初期設定は getting-started.md から始めるか、高度なシナリオについては機能別のリファレンスに直接進んでください。