【.NET MAUI】.NET MAUI でMVVM

先週に引き続き、.NET MAUI の記事です。

今回は ,NET MAUI 新規プロジェクト作成時のイベント処理を ViewModel を設け、MVVM のデータバインディングによる更新へ変更します。

新規プロジェクト作成時、ビューのカウンター処理は、ボタンクリックイベント内で SemanticScreenReader.Announce メソッドで更新されています。

ボタンクリックイベントの実装

SemanticScreenReader.Announce に関する詳細はこちら。

docs.microsoft.com

これを ViewModel とのバインドに変更します。

まずはプロジェクトに ViewModel を追加。ViewModel は  INotifyPropertyChanged を継承し、プロパティ変更を通知する、お決まりの通知メソッド OnPropertyChanged を実装します。さらにカウンタの文字列を変更する CounterText を追加します。

ビューモデルをプロジェクトに追加

これだけではカウンタは変更しません。次にコマンドを追加し、カウンタを更新するようにします。これもお決まりのパターンです。

ビューモデルにカウンタ更新用のコマンドを追加した

最後はビューとのバインドです。

ビューをビューモデルとバインドさせる

不要になった Main.xaml.cs のコードビハインドは削除します。

コードビハインドは削除しておく

最後にソリューションをビルドして起動。これでボタンクリックするたびデータバインディングでカウンターが更新されるようになりました。