WinUI3を学びたく、練習として簡単な電卓を作ってみることにしました。
今回は入力データの妥当性チェック処理のうち、ダイアログにメッセージを表示する実装を行います。

C#とxamlに関しても初心者ですのでお手柔らかにお願いします。

前回の記録

やりたいこと

入力したデータが計算式として成り立つかどうかをチェックします。
その結果、成り立たない場合はエラーメッセージをダイアログで出力します。

今回はデータのチェックまではせず、メッセージをダイアログに出力するコードまでを実装します。

エラーとする内容の洗い出し

チェック処理自体は次回にしますが、メッセージをダイアログに出力するためのエラー一覧は先に決めておきます。

エラーとなるパターンは以下のようになりそうです。
（考慮不足がでてきた場合は随時追加していくと思います）

式の先頭に「× ÷ . )」が出現した
「× ÷ .」が連続して出現した
「.」の後に数字以外が出現した
「+ - × ÷ . (」が式の末尾に出現した
式の先頭に「+ - (」が出現した場合、次の文字が数字、「(」だった
式の途中に出現した連続する「+ -」が３個以上だった
　(1+-1などは問題ないが、1+--1」などは成り立たない)
カッコが対になっていない
数字、「. )」の次の文字が「(」だった
「(」の後に「× ÷ . )」が出現した
記号のみで構成されている
先頭が「(」の場合、次に文字が「+ - (」でなかった

これによりエラーコードとエラー内容を以下のようにします。

エラーコード一覧
エラーコード	エラーメッセージ
S1	正常な式、メッセージなし
E1	式の先頭に「× ÷ . )」が出現しました。
E2	「×、÷、.」が連続して出現しました。
E3	「.」の後に数字以外が出現しました。
E4	末尾に数字、「)」以外が出現しました。
E5	先頭が「+ - (」の場合、次に出現できるのは数字、「(」のみです。
E6	式の途中に連続する「+ -」が３個以上出現しました。
E7	カッコが対になっていません。
E8	数字、「. )」の次に「(」が出現しました。
E9	「(」の後に「× ÷ . )」が出現しました。
E10	記号のみで構成されています。
E11	先頭が「(」の場合、次に出現できるのは数字、「+ - (」のみです。

ViewModelの作成

最初にメッセージを管理するErrorViewModelをViewModelフォルダに作成します。
基本内容はInputViewModelやResultViewModelと同様です。

ErrorViewModelの初期コード

ErrorViewModel.cs

using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Calculator.ViewModel;

public partial class ErrorViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged = delegate { };

    public void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

ここにまずエラーコードを表現する列挙型を定義します。

ErrorViewModel.cs

namespace Calculator.ViewModel;

public partial class ErrorViewModel : INotifyPropertyChanged
{
+    public enum ERROR_CODE
+    {
+        S1, E1, E2, E3, E4, E5, E6, E7, E8, E9, E10, E11,
+    };

     public event PropertyChangedEventHandler? PropertyChanged = delegate { };

       // 省略
}

次にこのコードをキーにしたメッセージマップを定義します。

ErrorViewModel.cs

namespace Calculator.ViewModel;

public partial class ErrorViewModel : INotifyPropertyChanged
{
    public enum ERROR_CODE
    {
        S1, E1, E2, E3, E4, E5, E6, E7, E8, E9, E10, E11,
    };

+   private static Dictionary<ERROR_CODE, string> CodeMap = new()
+   {
+      { ERROR_CODE.S1, string.Empty },
+      { ERROR_CODE.E1, "式の先頭に「× ÷ . )」が出現しました。" },
+      { ERROR_CODE.E2, "「×、÷、.」が連続して出現しました。" },
+      { ERROR_CODE.E3, "「.」の後に数字以外が出現しました。" },
+      { ERROR_CODE.E4, "末尾に数字、「)」以外が出現しました。"},
+      { ERROR_CODE.E5, "先頭が「+、-、(」の場合、次に出現できるのは数字、「(」のみです。" },
+      { ERROR_CODE.E6, "式の途中に連続する「+、-」が３個以上出現しました。" },
+      { ERROR_CODE.E7, "カッコが対になっていません。" },
+      { ERROR_CODE.E8, "「(」の前に「.、)」、数字が出現しました。" },
+      { ERROR_CODE.E9, "「(」の後に「×、÷、.、)」が出現しました。" },
+      { ERROR_CODE.E10, "記号のみで構成されています。" },
+      { ERROR_CODE.E11, "先頭が「(」の場合、次に出現できるのは数字、「+ - (」のみです。" },
+   };

    public event PropertyChangedEventHandler? PropertyChanged = delegate { };

        // 省略
}

次にエラーコードを格納するプロパティを定義します。

ErrorViewModel.cs

namespace Calculator.ViewModel;

public partial class ErrorViewModel : INotifyPropertyChanged
{
        // 省略
   
    public event PropertyChangedEventHandler? PropertyChanged = delegate { };

+   private ERROR_CODE _code = ERROR_CODE.S1;
+   public ERROR_CODE Code
+   {
+       get { return _code; }
+       set
+       {
+           _code = value;
+           OnPropertyChanged();
+       }
+   }

      // 省略
}

次にエラーメッセージを取得するプロパティを定義します。
このプロパティは取得とあるようにセッターはありません。

ErrorViewModel.cs

namespace Calculator.ViewModel;

public partial class ErrorViewModel : INotifyPropertyChanged
{
        // 省略

    private ERROR_CODE _code = ERROR_CODE.S1;
    public ERROR_CODE Code
    {
        get { return _code; }
        set
        {
            _code = value;
            OnPropertyChanged();
        }
    }

+   public string ErrorMessage
+   {
+       get { return CodeMap[Code]; }
+   }

    public void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

チェック処理の定義

まだ処理は実装しませんが、MainWindow.xaml.csにValidFormula関数を定義します。

MainWindow.xaml.cs

namespace Calculator;

public sealed partial class MainWindow : Window
{
        // 省略

    /// <summary>
    /// ＝ボタン押下時の処理です。
    /// 入力領域にデータが存在する場合、データを元に計算処理をし、
    /// その結果を結果領域に出力します。
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Equal_Button_Click(object sender, RoutedEventArgs e)
    {
        // 現在の入力データを取得します。
        string formula = InputViewModel.Formula;

        // 入力データが空の場合は処理をしません。
        if (formula == string.Empty)
        {
            return;
        }
        // 入力データを元に計算処理を行います。
        ResultViewModel.Calculation(formula);
    }

+   /// <summary>
+   /// 入力データが式として成り立つかを検証します。
+   /// 式として成り立たない場合、対応するエラーコードを返します。
+   /// </summary>
+   /// <returns></returns>
+   private ErrorViewModel.ERROR_CODE ValidFormula()
+   {
+       return ErrorViewModel.ERROR_CODE.S1;
+   }

       // 省略
}

ダイアログの設定

今回、ダイアログはContentDialogを使用します。

最初に表示用のxamlを作成します。
プロジェクトに「View」フォルダを作成し、その中にErrorMessageDialogContent.xamlを作成します。
この際、テンプレートはWinUI3の空白のページを選択します。

最初にコードビハインド側を修正します。
ErrorViewModelを紐づけます。

ErrorMessageDialogContent.cs

namespace Calculator.View;

public partial class ErrorMessageDialogContent : Page
{
    public ErrorViewModel ErrorViewModel { get; set; }

    public ErrorMessageDialogContent()
    {
        this.InitializeComponent();

        // ViewModelを初期化します。
        ErrorViewModel = new ErrorViewModel();
    }
}

次にxamlを以下コードのように修正します。

ErrorMessageDialogContent.xaml

<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="Calculator.View.ErrorMessageDialogContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Calculator.View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <TextBlock Text="{x:Bind ErrorViewModel.ErrorMessage, Mode=OneWay}"
                   TextWrapping="Wrap" />
    </StackPanel>
</Page>

TextBlockにエラーメッセージをバインドする形で実装します。

メッセージの表示処理

MainWindow.xaml.csにメッセージをContentDialogで出力する関数、ShowErrorMessageを作成します。
ダイアログの出力は結構迷走したので、後々別途解決記事を書きたいと思います。

取り合えず、実装は以下のようにしました。

MainWindow.xaml.cs

namespace Calculator;

public sealed partial class MainWindow : Window
{
         // 省略
    
    private ErrorViewModel.ERROR_CODE ValidFormula()
    {
        return ErrorViewModel.ERROR_CODE.S1;
    }

+   /// <summary>
+   /// エラーコードより対応するメッセージをダイアログに出力します。
+   /// エラーコードが正常であった場合、ダイアログを出力しません。
+   /// </summary>
+   /// <param name="errorCode"></param>
+   private async void ShowErrorMessage(ErrorViewModel.ERROR_CODE errorCode)
+   {
+       // エラーコードが正常であった場合、処理を終了します。
+       if (errorCode == ErrorViewModel.ERROR_CODE.S1)
+       {
+           return;
+       }
+
+       // 設定したメッセージをコンテントダイアログに出力します。
+       ErrorMessageDialogContent content = new();
+       content.ErrorViewModel.Code = errorCode;
+       ContentDialog dialog = new()
+       {
+           XamlRoot = this.Content.XamlRoot,
+           Style = Application.Current.Resources["DefaultContentDialogStyle"] as Style,
+           Title = "式の解析に失敗しました",
+           CloseButtonText = "閉じる",
+           Content = content,
+       };
+
+       await dialog.ShowAsync();
+   }

    /// <summary>
    /// Cボタン押下時の処理です。
    /// 入力領域と結果領域のデータを空にします。
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Clear_Button_Click(object sender, RoutedEventArgs e)
    {
        InputViewModel.Formula = string.Empty;
        ResultViewModel.Result = string.Empty;
    }
}

MainWindow.xaml.csのEqual_Button_Clickの先頭にエラーであった場合はメッセージを出力する処理を追加します。

MainWindow.xaml.cs

namespace Calculator;

public sealed partial class MainWindow : Window
{
       // 省略

    /// <summary>
    /// ＝ボタン押下時の処理です。
    /// 入力領域にデータが存在する場合、データを元に計算処理をし、
    /// その結果を結果領域に出力します。
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Equal_Button_Click(object sender, RoutedEventArgs e)
    {
+       // 式が成り立っているかを検証し、エラーであればメッセージを出力します。
+       ErrorViewModel.ERROR_CODE validCode = ValidFormula();
+       if (validCode != ErrorViewModel.ERROR_CODE.S1)
+       {
+           ShowErrorMessage(validCode);
+       }

        // 現在の入力データを取得します。
        string formula = InputViewModel.Formula;

        // 入力データが空の場合は処理をしません。
        if (formula == string.Empty)
        {
            return;
        }
        // 入力データを元に計算処理を行います。
        ResultViewModel.Calculation(formula);
    }

       // 省略
}

完成

ここまででエラーメッセージをダイアログで表示することができるようになりました。
ShowErrorMessageに適当にエラーコードを渡す事でメッセージが表示されることを確認できました。

おわりに

今回はダイアログを表示するだけでしたが、思った以上に手間取りました。
一応できはしましたが、よくわからないコードも多々あるのでスキルアップしたら読み解いていきたいです。

次回は式のチェックを行います。
ここでいよいよ本格的にC#でロジックを書きますね。

これまた一筋縄ではいかなさそうです。

次の記事