読者です 読者をやめる 読者になる 読者になる

酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

Windows Phoneでシステムトレイ上にダウンロード中や激重処理中にユーザーに待ってもらう為のプログレスインジゲータバーを表示する

Windows Phone

Windows Phone Advent Calendar "ひとり" 2011」第23日目です。 (遅延実行中です)

プログレスインジゲータをPopUpを使って表示する方法は「PopUpを使ってプログレスインジゲータバーを表示する」をご覧ください。

ウェブ上からデータを取得中や何らかの時間のかかる処理中にインジゲータを表示して、ユーザーに可能な限りストレスを与えないように工夫されているかと思います。

インジゲータを表示する方法はいくつかありますが、一番シンプルかつユーザー操作を阻害しない方法はシステムトレイにインジゲータを表示する方法でしょう。

Windows Phone OS 7.1からシステムトレイにプログレスバーを表示する事が出来るようになりました。今回はシステムトレイ上にプログレスバーを表示する方法をご紹介したいと思います。

あらかじめXAML上にSystemTray.ProgressIndicatorを定義しておきます。ProgressIndicatorのIsIndeterminateプロパティをTrueにします。これでValueによってグイーンと伸びるプログレスバーではなく、インジゲータバーとして動作するようになります。

また、インジゲータバーが平常時に表示されていたらおかしいので、IsVisibleプロパティはFalseを設定しておきます。Textプロパティには「Loading...」や「Waiting...」などを表示すると良いでしょう。

    <shell:SystemTray.ProgressIndicator>
        <shell:ProgressIndicator x:Name="progress" IsIndeterminate="True" IsVisible="False" Text="Loading..." />
    </shell:SystemTray.ProgressIndicator>

プログラム側では、時間の掛かる処理の代替処理としてReactive Extensionsで2秒間のタイマーを実行します。ボタンが押下された時点でシステムトレイ上にインジゲータバーを表示し、2秒のタイマーが満了するとインジゲータバーを非表示にしています。

using System;
using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Reactive;

namespace ProgressIndicatorTest {
    public partial class MainPage : PhoneApplicationPage {
        // コンストラクター
        public MainPage() {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e) {
            
            // プログレスバーを表示する
            progress.IsVisible = true;

            // 何らかの時間の掛かる処理が2秒間実行されるとする(仮定)
            Observable.Timer(TimeSpan.FromSeconds(2))
                .ObserveOnDispatcher()
                .Subscribe(_ => {

                    // 処理が完了した!プログレスバーを非表示にする
                    progress.IsVisible = false;
                });
        }
    }
}

XAMLだけでシステムトレイ上にインジゲータバーを表示する

    <shell:SystemTray.ProgressIndicator>
        <shell:ProgressIndicator
            Text="Loading..."
            IsIndeterminate="True"
            IsVisible="True">
        </shell:ProgressIndicator>
    </shell:SystemTray.ProgressIndicator>

コードだけでシステムトレイ上にインジゲータバーを表示する

    var prog = new ProgressIndicator();
    prog.IsVisible = true;
    prog.IsIndeterminate = true;
    prog.Text = "Loading...";

    SystemTray.SetProgressIndicator(this, prog);