👩🏿‍🌾 👨🏻‍🎨 👈🏻 Windows Phone用の日曜大工MVVMフレームワーク。パート1 🍓 🎅🏾 📒

WPF、Silverlight、Windowsストア、およびWindows Phoneプラットフォームのアプリケーション開発には、ほとんどの場合、 MVVMパターンの使用が含まれます。これらのプラットフォームの基本的な哲学は、プレゼンテーション（ユーザーインターフェイスという用語も使用します）と残りのプログラムロジックを分離することであるため、これは自然なことです。このアプローチには、次の利点があります。

ユーザーインターフェイスとプレゼンテーションロジックの分離：デザイナーがユーザーインターフェイスで作業できるようにし、プレゼンテーションモデルの抽象インターフェイスを使用してビジネスアプリケーションロジックでプログラマが操作できるようにします。
自動テストの高度な機能：ユーザーインターフェイスを残りのロジックから分離することで、ユーザーインターフェイスを介したテスト自動化による制限なしにプレゼンテーションロジックを完全にテストできます。
1つのビューモデルに対する複数のビュー：1つのビューモデルは、ユーザーインターフェイスの多くの実装で使用できます。たとえば、データ表示の短縮された完全なバージョン、ユーザー権限に依存するインターフェイス。異なるプラットフォームでプレゼンテーションモデルの単一の実装を使用する機能
コンポーネントを再利用するための拡張された機会：プレゼンテーションモデルはプレゼンテーションの実装とは別であるため、それらの使用のオプションが可能です。基本モデルからの継承、いくつかのモデルの構成など。

Windows Phoneプラットフォーム用のアプリケーションを開発するときに、ほとんどの記事がMVVMパターンの基本的な実装を説明しているという事実に遭遇しました。これは通常、クラスのINotifyPropertyChangedインターフェイスモデルの実装、単純なICommand実装の作成、およびこのデータをビューにリンクするための単純なスクリプトに要約されています。残念ながら、便利なインターフェイスを備えた一般化クラスの実装、非同期実行中のスレッド同期、プレゼンテーションモデルのレベルでのナビゲーションなど、重要な問題は議論の範囲外です。

MVVM LightやPrismなどのフレームワークに敬意を表して、私は自分のプロジェクトでこのパターンの独自の実装を使用することを好みます。最も単純なフレームワークでさえ、その汎用性のために不必要に面倒だからです。

この記事は、Windows Phoneプラットフォーム向けのアプリケーション開発の基本に精通している初心者を対象としています.Windows Phoneプラットフォーム向けのMVVMパターンの実装をさらに深く掘り下げ、それを使用して構築されたアプリケーションを実装するための、より柔軟でシンプルなソリューションを見つけて適用する方法を学びたいと考えています。おそらく経験豊富な開発者は、この記事を自分自身にとって興味深いものにし、説明した問題に対する他の便利な解決策を提供するでしょう。

例として、単純なアプリケーション「クレジット計算機」を作成します。そのすべての機能は分離コードスタイルで実装されます。

アプリケーションには2つのページのみが含まれます。アプリケーションのメインページはローンのパラメーターを入力するために使用され、計算されたローンに関する詳細情報ページは計算に関する詳細情報を表示するためのものです。このプロジェクトのソースコードは、 github codebehindブランチで入手できます。

メインページMainPage.xamlのレイアウトファイルのフラグメント

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ScrollViewer> <StackPanel> <StackPanel.Resources> <Style TargetType="TextBlock" BasedOn="{StaticResource PhoneTextNormalStyle}"/> </StackPanel.Resources> <TextBlock Text=" " /> <TextBox x:Name="viewAmount" InputScope="Number" /> <TextBlock Text=" "/> <TextBox x:Name="viewPercent" InputScope="Number" /> <TextBlock Text=" " /> <TextBox x:Name="viewTerm" InputScope="Number"/> <Button x:Name="viewCalculate" Content="" Click="CalculateClick" /> <Border x:Name="viewCalculationPanel" BorderBrush="{StaticResource PhoneBorderBrush}" BorderThickness="{StaticResource PhoneBorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text=":" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="viewPayment" Style="{StaticResource PhoneTextNormalStyle}"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text=":" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="viewTotalPayment" Style="{StaticResource PhoneTextNormalStyle}" /> </StackPanel> <Button Content="" Click="DetailsClick" /> </StackPanel> </Border> </StackPanel> </ScrollViewer> </Grid> <Grid x:Name="viewProgressPanel" Grid.Row="0" Grid.RowSpan="2" Background="{StaticResource OpacityBackgroundBrush}" Visibility="Collapsed"> <ProgressBar Opacity="1" IsIndeterminate="True" /> </Grid>

このマークアップには、データバインディングが完全にありません。すべてのデータは、分離コードファイルからコントロールのプロパティにアクセスして設定されます。

分離コードMainPage.xaml.csメインページファイル

 using System; using System.Threading.Tasks; using System.Windows; using Microsoft.Phone.Controls; namespace MVVM_Article { public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); } private void CalculateClick(object sender, RoutedEventArgs e) { decimal amount; decimal percent; int term; if(!decimal.TryParse(viewAmount.Text, out amount)) { viewProgressPanel.Visibility = Visibility.Collapsed; MessageBox.Show("   "); return; } if(!decimal.TryParse(viewPercent.Text, out percent)) { viewProgressPanel.Visibility = Visibility.Collapsed; MessageBox.Show("   "); return; } if(!int.TryParse(viewTerm.Text, out term)) { viewProgressPanel.Visibility = Visibility.Collapsed; MessageBox.Show("    "); return; } Focus(); viewProgressPanel.Visibility = Visibility.Visible; Task.Run(() => { try { var payment = Calculator.CalculatePayment(amount, percent, term); Dispatcher.BeginInvoke(() => { viewCalculationPanel.Visibility = Visibility.Visible; viewPayment.Text = payment.ToString("N2"); viewTotalPayment.Text = (payment * term).ToString("N2"); }); } finally { Dispatcher.BeginInvoke(() => { viewProgressPanel.Visibility = Visibility.Collapsed; }); } }); } private void DetailsClick(object sender, RoutedEventArgs e) { var pageUri = string.Format("/DetailsPage.xaml?amount={0}&percent={1}&term={2}", viewAmount.Text, viewPercent.Text, viewTerm.Text); NavigationService.Navigate(new Uri(pageUri, UriKind.Relative)); } } }

計算の一部はバックグラウンドストリームに転送されることに注意してください。この場合、これを行う必要はありません。これは、スレッドの同期をカバーするためのものです。コントロールのすべてのプロパティは、アプリケーションのメインスレッドから設定する必要があります。別のスレッドからコントロールのプロパティを設定する場合は、コントロールをアプリケーションのメインスレッドに転送する必要があります。これらの目的のために、ページDispatcherオブジェクトが使用されます。これは、常にアプリケーションのメインスレッドに関連付けられます。

詳細なクレジットの説明ページへのパラメーターの転送は、ページURIパラメーターを介して実行されます。

ローンの詳細ページも同様の方法で構成されています。支払いスケジュール表の記入に注意してください。このブロックは、ItemsControlを使用して簡単に実装できました。ただし、このような実装ではデータバインディングを使用する必要があり、記事の目的には適していません。

DetailsPage.xaml.csファイルの支払いスケジュール表に記入する

 var style = (Style)Resources["PhoneTextNormalStyle"]; foreach(var record in schedule) { var grid = new Grid(); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); var loanElement = new TextBlock { Text = record.Loan.ToString("N2"), Style = style }; Grid.SetColumn(loanElement, 0); var interestElement = new TextBlock { Text = record.Interest.ToString("N2"), Style = style }; Grid.SetColumn(interestElement, 1); var balanceElement = new TextBlock { Text = record.Balance.ToString("N2"), Style = style }; Grid.SetColumn(balanceElement, 2); grid.Children.Add(loanElement); grid.Children.Add(interestElement); grid.Children.Add(balanceElement); viewRecords.Children.Add(grid); }

クレジットを計算するためのロジックは、別の静的クラスの計算機に実装されます。支払い計算方法の開始時の遅延に注意してください。そのタスクは集中的な計算をシミュレートすることであり、完了までに時間がかかります。アプリケーションのメインスレッドでこのメソッドを呼び出そうとすると、ユーザーインターフェイスがハングします。これを防ぐには、リソースを大量に消費するすべてのタスクをバックグラウンドスレッドで実行する必要があります。

ファイルCalculator.csのフラグメント

 internal static class Calculator { public static decimal CalculatePayment(decimal amount, decimal percent, int term) { Task.Delay(1000).Wait(); percent /= 1200; var common = (decimal) Math.Pow((double) (1 + percent), term); var multiplier = percent*common/(common - 1); var payment = amount*multiplier; return payment; } public static List<PaymentsScheduleRecord> GetPaymentsSchedule(decimal amount, decimal percent, int term) { var balance = amount; var interestRate = percent / 1200; var payment = CalculatePayment(amount, percent, term); var schedule = new List<PaymentsScheduleRecord>(); for (var period = 0; period < term; period++) { var interest = Math.Round(balance * interestRate, 2); var loan = payment - interest; balance -= loan; var record = new PaymentsScheduleRecord { Interest = interest, Loan = loan, Balance = balance }; schedule.Add(record); } return schedule; } }

MVVMの最も単純な実装

次に、MVVMの最も単純なバージョンを実装します。このため、各ページのプレゼンテーションモデルを作成し、オブジェクトのプロパティの変更についてビューに通知するために使用されるINotifyPropertyChangedインターフェイスを実装します。ソースコードは、 githubのnaivemvvmブランチで入手できます。

クラスによるインターフェイスの実装には、オブジェクトのプロパティの値が変更されるたびにPropertyChangedイベントが生成されることが含まれます。この動作により、データバインディングはオブジェクトの状態を追跡し、関連付けられたプロパティの値が変更されたときにユーザーインターフェイスデータを更新できます。

MainPageViewModel.csファイルのフラグメント

 public class MainPageViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null) { var handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } }

CallerMemberName属性の使用に注意してください。この属性は、メソッドが呼び出されたクラスメンバーの名前をこのパラメーターに渡す必要があることをコンパイラーに伝えます。これにより、メソッドがプロパティ自体から呼び出された場合、プロパティ名をメソッドに明示的に渡すことができなくなります。

表現モデルプロパティの実装例

 private string _amount; public string Amount { get { return _amount; } set { _amount = value; OnPropertyChanged(); } }

フィールド値を設定した後、OnPropertyChangedメソッドが呼び出され、呼び出されたプロパティの値の変更に関するイベントを生成します。

プレゼンテーションモデルは、プレゼンテーションモデルに固有のアクションを実行できるコマンドをコンシューマに提供できます。コマンドはICommandインターフェイスを実装するオブジェクトです;コンシューマーがコマンドで指定されたアクションを実行する必要がある場合、ユーザーはコマンドのExecuteメソッドを呼び出す必要があります。チームは、消費者にそれが完了できるかどうかに関する情報を提供します。コマンドの可用性に関する情報を取得するには、CanExecuteメソッドを呼び出し、CanExecuteChangedイベントにサブスクライブする必要があります。CanExecuteChangedイベントは、コマンドの状態の変化についてコンシューマーに通知します。

プレゼンテーションモデルの個々のアクションに対するコマンドの実装は非常に時間のかかるプロセスです。これを容易にするために、クラスインスタンスの作成時に指定されたデリゲートにコマンドメソッドの実行を委任するクラスDelegateCommandを作成します

DelegateCommand.csファイル

 public sealed class DelegateCommand : ICommand { private readonly Action<object> _execute; private readonly Func<object, bool> _canExecute; public DelegateCommand(Action<object> execute, Func<object, bool> canExecute = null) { if(execute == null) { throw new ArgumentNullException(); } _execute = execute; _canExecute = canExecute; } public bool CanExecute(object parameter) { return _canExecute == null || _canExecute(parameter); } public void Execute(object parameter) { if(!CanExecute(parameter)) { return; } _execute(parameter); } public event EventHandler CanExecuteChanged; public void RiseCanExecuteChanged() { var handler = CanExecuteChanged; if(handler != null) { handler(this, EventArgs.Empty); } } }

DelegateCommandクラスを使用したビューモデルコマンドの宣言

 private DelegateCommand _calculateCommand; public DelegateCommand CalculateCommand { get { if(_calculateCommand == null) { _calculateCommand = new DelegateCommand(o => Calculate()); } return _calculateCommand; } }

ビューモデルを作成したら、ユーザーインターフェイスの説明を変更します。これを行うには、MainPage.xaml.csファイルからすべてのコードを削除し、ページコンストラクターでページのDataContextプロパティの値を設定します。その後、データバインディングを使用できます。

変更後のMainPage.xaml.csファイル

 using Microsoft.Phone.Controls; using MVVM_Article.ViewModels; namespace MVVM_Article { public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); DataContext = new MainPageViewModel(); } } }

ページのコードビハインドは1行に削減されていることに注意してください。以降の章では、この行も削除されます。

次に、ユーザーインターフェイスの説明でデータバインディングを設定する必要があります。 {Binding Path = <Property Name>}コンストラクトは、データバインディングを指定するために使用されます;ほとんどの場合、Pathは省略でき、{Binding <Property Name>}に縮小できます。

MainPage.xamlファイルのフラグメントであるデータバインディングの例

 <TextBlock Text=" " /> <TextBox Text="{Binding Term, Mode=TwoWay}" InputScope="Number"/> <Button Content="" Command="{Binding CalculateCommand}" /> <Border BorderBrush="{StaticResource PhoneBorderBrush}" BorderThickness="{StaticResource PhoneBorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="{Binding IsCalculated, Converter={StaticResource BoolToVisibilityConverter}}">

テキストフィールドのバインディングを設定するときは、Mode = TwoWayパラメーターに注意してください。このパラメーターは、コントロールのプロパティの値を変更するときにビューモデルフィールドに渡す必要があるデータバインディングを示します。このようにして、ビューモデルはユーザー入力データを受け取ります。コントロールのVisibilityプロパティとIsLoadedビューモデルは、タイプが異なるため、直接接続できません。このような問題を解決するために、値コンバーターが意図されています。

ブール型のプロパティをVisibility型のプロパティにバインドするには、コンバーターBoolToVisibilityConverterを作成します

 public class BoolToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (value as bool?) == true ? Visibility.Visible : Visibility.Collapsed; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }

このコンバーターを使用すると、ブール型と可視性のフィールドを相互にバインドできます。

 Visibility="{Binding IsCalculated, Converter={StaticResource BoolToVisibilityConverter}}"

残念ながら、DeptailsPageページのMVVMパターンを実装する場合、メインページから渡されたパラメーターでプレゼンテーションモデルを初期化するために使用されるため、分離コードを完全に取り除くことはできませんでした。

おわりに

現在のアプリケーションは、正式にはMVVMパターンに準拠していますが、実際には、コードビハインドをページクラスから別のクラスに移動しただけです。実装には多くの欠点があり、記事の冒頭で説明したMVVMの利点を使用できません。

次の記事では、MVVMでのDIの使用、ナビゲーションの実装、ユーザー操作、MVVM基本クラスの一般化などのトピックを扱います。

Windows Phone用の日曜大工MVVMフレームワーク。 パート1