データを生成したり外部から取得する際にどうしても発生してしまう待ち時間があります。場合によっては時間がかかりユーザーが退屈するだけでなく、処理が止まってしまっていると不安に感じることもありますね。

待ち時間中に画像のようなインジケーターを表示することで、待ち時間を退屈させず、処理も安定していることを示すことができるのが “XamBusyIndicator” です。

UI スレッドで処理されます。

XamBusyIndicator は UI スレッドで処理されますので、他の UI スレッドの処理などでブロックしてしまうとインジケーターの表示に影響がでます。(クルクルが回らないなど)ですので 、XamBusyIndicator を表示させながら実行するデータ生成などの処理は非同期で行うようにします。

async/await を使って実装してみました。

ヘルプドキュメントページでは BackgroundWorker を使ったサンプルコードが掲載されていますが、今回は async/await を用いたサンプルをご用意しました。ぜひご利用ください。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// ボタンがクリックされたら、xamBusyIndicator を表示させ、データ生成処理を非同期で実行する。
private async void button1_Click(object sender, RoutedEventArgs e)
{
// XamBusyIndicator の IsBusy を true にして表示する
this.xamBusyIndicator1.IsBusy = true;
// xamDataGridのデータ初期化を行う
this.xamDataGrid1.DataSource = new List<Item>();
// データ生成処理を非同期で実行する
var resultData = await Task.Run(() => this.CreateData()); ?
this.xamDataGrid1.DataSource = resultData;
// XamBusyIndicator の IsBusy を false にして非表示にする
this.xamBusyIndicator1.IsBusy = false;
}
// ボタンがクリックされたら、xamBusyIndicator を表示させ、データ生成処理を非同期で実行する。 private async void button1_Click(object sender, RoutedEventArgs e) { // XamBusyIndicator の IsBusy を true にして表示する this.xamBusyIndicator1.IsBusy = true; // xamDataGridのデータ初期化を行う this.xamDataGrid1.DataSource = new List<Item>(); // データ生成処理を非同期で実行する var resultData = await Task.Run(() => this.CreateData()); ? this.xamDataGrid1.DataSource = resultData; // XamBusyIndicator の IsBusy を false にして非表示にする this.xamBusyIndicator1.IsBusy = false; }
// ボタンがクリックされたら、xamBusyIndicator を表示させ、データ生成処理を非同期で実行する。
private async void button1_Click(object sender, RoutedEventArgs e)
{
    // XamBusyIndicator の IsBusy を true にして表示する
    this.xamBusyIndicator1.IsBusy = true;

    // xamDataGridのデータ初期化を行う
    this.xamDataGrid1.DataSource = new List<Item>();

    // データ生成処理を非同期で実行する
    var resultData = await Task.Run(() => this.CreateData()); ?

    this.xamDataGrid1.DataSource = resultData;

    // XamBusyIndicator の IsBusy を false にして非表示にする
    this.xamBusyIndicator1.IsBusy = false;
}

製品について

Ultimate UI for WPF