WindowsストアアプリでMessageDialogクラスを使ってメッセージダイアログを表示するその1

おそらくMetroスタイルアプリ開発をする上で100人居れば100人使っているだろうと思われるMessageDialogについてです。今まで.NETアプリケーション開発の経験のある方でいうとMessageBoxの変わりと言えます。

Windows.UI.Popups名前空間のMessageDialogクラスは、テキストまたはタイトルとテキストを表示させるモーダルダイアログで、処理にエラーが発生した場合のユーザーへの通知であったり、処理の実行前にユーザーに許可を取る場合に使用するケースが多いと思われます。

あらかじめ以下の名前空間をusingディレクティブへ追加しておいてください。

|cs| using Windows.UI.Popups; ||<

**もっともシンプルなメッセージダイアログの表示させ方

MessageDialogクラスにはShowAsyncメソッドが提供されており、このメソッドを使用してメッセージダイアログを表示します。ShowAsyncメソッドはオーバーロードで2つの使い方が出来るようになっています。

***ShowAsync(String text)メソッドの場合

まず最初にメッセージダイアログのメッセージ部分だけをパラメータにするタイプ。

|cs| private async void button_Click(object sender, RoutedEventArgs e) { var dialog = new MessageDialog("メッセージ"); await dialog.ShowAsync(); } ||<

指定したタイトル、[閉じる]ボタンが表示されています。

***ShowAsync(String text, String title)メソッドの場合

次にキャプション(タイトル)部分も含めてパラメータにするタイプ。

|cs| private async void button_Click(object sender, RoutedEventArgs e) { var dialog = new MessageDialog("メッセージ", "タイトル"); await dialog.ShowAsync(); } ||<

指定したタイトルとメッセージ、[閉じる]ボタンが表示されています。

**複数の選択肢を表示させる

Windows Phoneでは「Windows Phoneで任意のテキストラベルのボタンを表示するクラスを作る - 酢ろぐ！」で紹介した通り、[ok][キャンセル]以外の複数の選択肢を表示させる場合にはSilverlightで用意されているシンプルなMessageBox APIではなく、XNA Frameworkを使用して比較的複雑な実装が要求されていました。

Metroスタイルアプリでは、MessageDialog.CommandsプロパティにUICommandインスタンスを追加するだけで複数のボタンを表示させることが可能です。

|cs| private async void button_Click(object sender, RoutedEventArgs e) { // メッセージダイアログのインスタンス生成 var dialog = new MessageDialog("○○処理を実行しますか？", "確認");

// コマンドを追加
dialog.Commands.Add(new UICommand("実行"));
dialog.Commands.Add(new UICommand("キャンセル"));

// ダイアログの表示処理を開始
await dialog.ShowAsync();

} ||<

上記のサンプルコードを実行してみました。下図のようにボタンが2つ表示されていることが確認できます。

**ユーザーに選択してもらいたいボタンを強調する

ボタンを複数表示させる場合、ユーザーに選択してもらいたいボタンを強調して表現することができます。

例えば、データベースのレコード削除など一度実行してしまえばアンドゥすることのできない処理の場合、事前にユーザーに確認を取るケースが多くあります。その場合、Enterキーを誤って押してしまい取り返しのつかない事を防ぐため、[キャンセル]ボタンを強調し、さらにフォーカスを当てておくことで事故を防ぎます。

DefaultCommandIndexプロパティに強調させたいボタンのインデックス値を設定してください。

|cs| private async void button_Click(object sender, RoutedEventArgs e) { // メッセージダイアログのインスタンス生成 var dialog = new MessageDialog("○○処理を実行しますか？", "確認");

// コマンドを追加
dialog.Commands.Add(new UICommand("実行"));
dialog.Commands.Add(new UICommand("キャンセル"));

// ユーザーに選択してもらいたい強調するボタンを指定
dialog.DefaultCommandIndex = 1;

// ダイアログの表示処理を開始
await dialog.ShowAsync();

} ||<

先ほどのスクリーンショットと異なり、[キャンセル]ボタンが強調されています。