ダイアログメッセージを表示する【C#/XAML】

2022-09-082024-07-02

WinUI3を使ってアプリにダイアログメッセージを表示させる方法をお示しします。

開発環境

.NET 6.0
WinUI 3.0 (Windows App SDK 1.1.4)
WinRT Build 22621

ContentDialogコントロールの基本的な使い方

WinUI3アプリでメッセージをダイアログとして表示させるためにはContentDialogコントロールを用います。基本的な使い方はContentDialogをインスタンス化して、基本的なプロパティを設定して、ShowAsyncメソッドを実行して表示させるだけです。ただし、ダイアログメッセージがどのUIコンポーネント(ウィンドウ等)に属しているかをXamlRootプロパティで指定する必要があります。また、ダイアログを閉じるためのボタンの名前をCloseButtonTextプロパティなどで指定しないとダイアログを閉じることができなくなってしまうので注意してください。

ダイアログメッセージを表示する

ダイアログメッセージはCloseButtonTextプロパティ、PrimaryButtonTextプロパティ、SecondaryButtonTextプロパティのうち必要なボタン名を指定することでボタンが１つのダイアログから３つのダイアログまでを作成することができます。

なお、以下の例ではContentDialogのContentに文字列を指定していますが、ContentはObject型なので、Pageなどの任意のコントロールを配置可能です。

ボタン1つのダイアログメッセージ

ボタンが１つのダイアログメッセージを表示させるときはCloseButtonTextプロパティのみにボタン名を指定します。何か情報を表示させる確認させる目的のダイアログで使用します。

WinUI3アプリのテンプレートのボタンをクリックしたときのイベントを以下のように書き換えてみましょう。

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    private async void myButton_Click(object sender, RoutedEventArgs e)
    {
        ContentDialog contentDialog = new ContentDialog
        {
            Title = "情報",
            Content = "テストダイアログ",
            CloseButtonText = "閉じる",
            XamlRoot = this.Content.XamlRoot
        };

        await contentDialog.ShowAsync();
    }
}

ここではダイアログメッセージは自身のウィンドウに所属していますので、15行目でthis.Content.XamlRootとしてそのXamlRootを取得したうえで指定しています（他のウィンドウを指定することで、そのウィンドウに所属したダイアログを作成することもできます）。WinUI3アプリにおけるWindowクラスは通常のGUIコントロールとは異なりObjectクラスを直接継承しただけのものなので、そのContentプロパティでウィンドウのGUIコントロールの部分を取得する必要があることに注意が必要です。

ボタン2つのダイアログメッセージ

Yes/Noの２択で質問するボタンが２つのタイプのダイアログメッセージです。以下のようにCloseButtonTextプロパティとPrimaryButtonTextプロパティに指定します。

    private async void myButton_Click(object sender, RoutedEventArgs e)
    {
        ContentDialog contentDialog = new ContentDialog
        {
            Title = "注意",
            Content = "処理を実行しますか？",
            CloseButtonText = "閉じる",
            PrimaryButtonText = "OK",
            XamlRoot = this.Content.XamlRoot
        };

        await contentDialog.ShowAsync();
    }

なお、PrimaryButtonの処理は以下で説明するように別に指定する必要があります。

ボタン3つのダイアログメッセージ

はい／いいえ／キャンセルのように３択で質問するタイプのダイアログメッセージです。以下のようにCloseButtonTextプロパティとPrimaryButtonTextプロパティ、SecondaryButtonTextプロパティに指定します。

    private async void myButton_Click(object sender, RoutedEventArgs e)
    {
        ContentDialog contentDialog = new ContentDialog
        {
            Title = "注意",
            Content = "ファイルの変更内容を保存しますか？",
            CloseButtonText = "キャンセル",
            PrimaryButtonText = "保存する",
            SecondaryButtonText="保存しない",
            XamlRoot = this.Content.XamlRoot
        };

        await contentDialog.ShowAsync();
    }

なお、PrimaryButton, SecondaryButtonの処理は以下で説明するように別に指定する必要があります。

ダイアログメッセージで押されたボタンの処理を記述する

イベントハンドラーに処理を記述する

ContentDialogのCloseButtonClickイベント、PrimaryButtonClickイベント、SecondaryButtonClickイベントにイベントハンドラーを登録することでそれぞれCloseButton、PrimaryButton、SecondaryButtonの処理を登録することができます。

例えばPrimaryButtonのイベントを登録するためには、以下のようにイベントハンドラーとしてPrimaryButton_Clickメソッドを作成し(17-20行目)、PrimaryButtonClickイベントに登録します(12行目)。

    private async void myButton_Click(object sender, RoutedEventArgs e)
    {
        ContentDialog contentDialog = new ContentDialog
        {
            Title = "注意",
            Content = "処理を実行しますか？",
            CloseButtonText = "閉じる",
            PrimaryButtonText = "OK",
            XamlRoot = this.Content.XamlRoot
        };

        contentDialog.PrimaryButtonClick += PrimaryButton_Click;
        await contentDialog.ShowAsync();
    }


    private void PrimaryButton_Click(object sender, ContentDialogButtonClickEventArgs e)
    {
        // ここに処理を記述
    }

MVVMパターンで処理を登録する

MVVMパターンでコーディングしている場合はCloseButtonCommandプロパティやPrimaryButtonCommandプロパティ、SecondaryButtonCommandプロパティにICommandを登録すること処理を実装することも可能です。

ダイアログの呼び出し元に処理をコーディングする

ダイアログメッセージ自体に処理をコードするのではなく、ダイアログの呼び出し元に処理を記述することもできます。ShowAsyncメソッドの戻り値はContentDialogResultで得られて、PrimaryButtonかSecondaryButtonかそれ以外がクリックされたのかを取得することができます。つまり、ShowAsyncメソッドの戻り値に従って場合分けすることで、ダイアログの呼び出し元に処理を書くことができます。