WPFのMVVMで電卓づくり（７）

四則演算子ボタンを押すと計算が行われる仕組みを実装します

今回は操作状況を分かりやすくするため出力画面の隣に四則演算子を表示させる枠を作ります

構想

MainModelにて計算に用いる四則演算子が決定した時点で表示用のOperationTextを更新します

実装

構想に沿って各MVVMクラスに追記していきます

MainModel

MainModelにて、四則演算子表示用のプロパティOperationTextを用意します

       // 計算に用いる四則演算子表示テキスト
        public string OperationText { get; private set; } = string.Empty;

MainModelにて、四則演算子表示用のプロパティを更新するメソッドを用意します

       public void SetOperationText(OperationKind ope)
        {
            switch (ope) 
            {
                case OperationKind.Equal:
                    this.OperationText = "＝";
                    break;
                case OperationKind.Plus:
                    this.OperationText = "＋";
                    break;
                case OperationKind.Minus:
                    this.OperationText = "－";
                    break;
                case OperationKind.Multiply:
                    this.OperationText = "×";
                    break;
                case OperationKind.Divide:
                    this.OperationText = "÷";
                    break;
                default:
                    break;
            }
        }

MainModelにて、上記メソッドをSetOperation()にて呼び出します

       public void SetOperation(string str) 
        {
            double displayValue;
            if (!double.TryParse(this.DisplayText, out displayValue)) { return; }

            if (Enum.TryParse(str, out OperationKind ope))
            {
                switch (ope)
                {
                    case OperationKind.Equal:
                        if (this.IsAdditional)
                        {
                            Calculate(this.Operation);
                            this.IsAdditional = false;
                        }
                        SetOperationText(ope);
                        this.Operation = OperationKind.None;
                        break;
                    case OperationKind.Plus:
                    case OperationKind.Minus:
                    case OperationKind.Multiply:
                    case OperationKind.Divide:
                        if (this.IsAdditional)
                        {
                            Calculate(this.Operation);
                        }
                        else
                        {
                            this.IsAdditional = true;
                        }
                        SetOperationText(ope);
                        this.Operation = ope;
                        break;
                    default:
                        break;
                }
            }
        }

MainViewModel

MainViewModelにて、四則演算子表示用プロパティを用意します

       public string OperationText { get; set; }

MainViewModelにて、this.OperationTextにMainModel.OperationTextを代入し
RaisePropertyChanged()でMainViewを更新します

           this.PushCommand = new DelegateCommand(
                param => 
                {
                    if (param == null) { return; }
                    var str = param.ToString();
                    if (model != null)
                    {
                        if (int.TryParse(str, out int num))
                        {
                            model.SetText(str);
                        }
                        else
                        {
                            model.SetOperation(str);
                        }
                        this.DisplayText = model.DisplayText;
                        RaisePropertyChanged(nameof(this.DisplayText));
                        this.OperationText = model.OperationText;
                        RaisePropertyChanged(nameof(this.OperationText));
                    }
                },

MainView

出力画面の枠を１マス割いて、四則演算表示用の枠を作り、OperationTextを紐づけします

     <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <!--エラー表示-->
            <TextBlock Text="{Binding Path=ErrorText}"/>
            <!--四則演算子表示-->
            <TextBlock Grid.Row="1" Text="{Binding Path=OperationText}"/>
        </Grid>
        <!--出力画面-->
        <TextBlock Grid.Column="1" Grid.ColumnSpan="5"
                   Text="{Binding Path=DisplayText}" FontSize="80"/>

動作確認

起動後「１」「＋」とクリックした際の画面表示

続いて「２」「×」とクリックした際の画面表示

続いて「３」「＝」とクリックした際の画面表示