MVVM：新しい外観

注意！

MVVMパターンに関する最新の進歩的な資料は、 Aero Frameworkを介したContext Model Patternの記事で紹介されており、 次の一連の記事で詳しく説明されています。



まえがき



しばらく前、私は美しいインターフェイスとWPFプラットフォームの幅広い便利な機能を備えたフリーテキストエディターの開発を開始しました。 多くの技術的な問題を解決する機会があったので、他の人と共有したい経験を積むことができました。



ビジネスへ



WPF、Silverlight、WinPhoneアプリケーションの開発者は、MVVM（モデル-ビュー-ViewModel）設計パターンをよく知っています。 しかし、さらに想像力を追加すると、もっと面白いことが判明する可能性があり、少しでも革命的なことを保証します。



必要に応じて非表示にできるメニュー、ツールバー、ステータスバーを備えたテキストエディタのクラシックウィンドウ（ビュー）があるとします。 アプリケーションの終了時の要素の視覚的状態と同様に、ウィンドウの位置とサイズを保存し、それらを復元するタスクに直面しています。



すぐに頭を悩ませる通常の解決策は、バインド用のビューモデルに多くの追加プロパティ（Top、Left、Width、Heigth、ShowToolBarTray、ShowStatusBarなど）を追加し、その値をファイルなどに保存することです。 急いではいけません...必要な機能をデフォルトで実装するようなビューモデルを作成できるので、問題を解決するために余分なコード行を必要としないとしたらどうでしょうか。



この記事のために特別に作成したサンプルアプリケーション（ 1つまたは2つのリンク）をすぐにダウンロードすることをお勧めします。主要なアイデアを理解し、アプローチの美しさを感じるのに役立ちます。 ここでは、特別な注意を払う必要があるコードの特定の部分を示します。



WPFでは、プロパティバインドがよく使用されますが、まれにしか使用されない配列要素へのバインドの可能性もあります。 しかし、ここで私たちに新しい視野が開かれます。 ビューモデルをディクショナリとして考えてみましょう。インデックスキーは、値を取得できるプロパティの名前になります。



しかし、これらの値を維持するにはどうすればよいでしょうか？ ビューモデルをシリアル化してみましょう！ しかし、..これはDTOオブジェクトではなく、他のパラメーターをコンストラクターにインジェクトする必要がある場合が多いので、どのようにデシリアライズしますか。 コンストラクターへの注入は、たとえばパラメーターを追加または削除するときにユニットテストが機能しなくなり、テストするオブジェクトのインターフェイスは本質的に同じであるにもかかわらず、修正する必要があるなど、不便であるとは思われませんでしたか？



したがって、幸運なことに、コンストラクターへの注入を拒否し、そのような目的のための他の方法があり、[DataContract]属性でビューモデルをマークし、[DataMember]属性でシリアル化する必要のあるプロパティをマークします（これらの属性はシリアル化を大幅に簡素化します）。



次に、小さなストアクラスを作成します。

public static class Store { private static readonly Dictionary<Type, object> StoredItemsDictionary = new Dictionary<Type, object>(); public static TItem OfType<TItem>(params object[] args) where TItem : class { var itemType = typeof (TItem); if (StoredItemsDictionary.ContainsKey(itemType)) return (TItem) StoredItemsDictionary[itemType]; var hasDataContract = Attribute.IsDefined(itemType, typeof (DataContractAttribute)); var item = hasDataContract ? Serializer.DeserializeDataContract<TItem>() ?? (TItem) Activator.CreateInstance(itemType, args) : (TItem) Activator.CreateInstance(itemType, args); StoredItemsDictionary.Add(itemType, item); return (TItem) StoredItemsDictionary[itemType]; } public static void Snapshot() { StoredItemsDictionary .Where(p => Attribute.IsDefined(p.Key, typeof (DataContractAttribute))) .Select(p => p.Value).ToList() .ForEach(i => i.SerializeDataContract()); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここではすべてが簡単です。たった2つの方法です。 OfTypeは必要なタイプのオブジェクトの静的インスタンスを返し、場合によっては逆シリアル化し、Snapshotはコンテナー内のオブジェクトの「スナップショット」を取り、それらをシリアル化します。 一般に、スナップショットは、たとえばApplicationクラスのExitハンドラーなど、アプリケーションが閉じられたときに1回だけ呼び出すことができます。



そして、Jsonシリアライザーを作成します。

  public static class Serializer { public const string JsonExtension = ".json"; public static readonly List<Type> KnownTypes = new List<Type> { typeof (Type), typeof (Dictionary<string, string>), typeof (SolidColorBrush), typeof (MatrixTransform), }; public static void SerializeDataContract(this object item, string file = null, Type type = null) { try { type = type ?? item.GetType(); if (string.IsNullOrEmpty(file)) file = type.Name + JsonExtension; var serializer = new DataContractJsonSerializer(type, KnownTypes); using (var stream = File.Create(file)) { var currentCulture = Thread.CurrentThread.CurrentCulture; Thread.CurrentThread.CurrentCulture = CultureInfo.InvariantCulture; serializer.WriteObject(stream, item); Thread.CurrentThread.CurrentCulture = currentCulture; } } catch (Exception exception) { Trace.WriteLine("Can not serialize json data contract"); Trace.WriteLine(exception.StackTrace); } } public static TItem DeserializeDataContract<TItem>(string file = null) { try { if (string.IsNullOrEmpty(file)) file = typeof (TItem).Name + JsonExtension; var serializer = new DataContractJsonSerializer(typeof (TItem), KnownTypes); using (var stream = File.OpenRead(file)) { var currentCulture = Thread.CurrentThread.CurrentCulture; Thread.CurrentThread.CurrentCulture = CultureInfo.InvariantCulture; var item = (TItem) serializer.ReadObject(stream); Thread.CurrentThread.CurrentCulture = currentCulture; return item; } } catch { return default(TItem); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビューモデルの基本クラスも複雑ではありません。

  [DataContract] public class ViewModelBase : PropertyNameProvider, INotifyPropertyChanging, INotifyPropertyChanged { protected Dictionary<string, object> Values = new Dictionary<string, object>(); private const string IndexerName = System.Windows.Data.Binding.IndexerName; /* "Item[]" */ public event PropertyChangingEventHandler PropertyChanging = (sender, args) => { }; public event PropertyChangedEventHandler PropertyChanged = (sender, args) => { }; public object this[string key] { get { return Values.ContainsKey(key) ? Values[key] : null; } set { RaisePropertyChanging(IndexerName); if (Values.ContainsKey(key)) Values[key] = value; else Values.Add(key, value); RaisePropertyChanged(IndexerName); } } public object this[string key, object defaultValue] { get { if (Values.ContainsKey(key)) return Values[key]; Values.Add(key, defaultValue); return defaultValue; } set { this[key] = value; } } public void RaisePropertyChanging(string propertyName) { PropertyChanging(this, new PropertyChangingEventArgs(propertyName)); } public void RaisePropertyChanged(string propertyName) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } [OnDeserializing] private void Initialize(StreamingContext context = default(StreamingContext)) { if (PropertyChanging == null) PropertyChanging = (sender, args) => { }; if (PropertyChanged == null) PropertyChanged = (sender, args) => { }; if (Values == null) Values = new Dictionary<string, object>(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、小さなクラスPropertyNameProviderから継承します。これは、今後ラムダ式を操作するのに役立ちます。

  [DataContract] public class PropertyNameProvider { public static string GetPropertyName<T>(Expression<Func<T>> expression) { var memberExpression = expression.Body as MemberExpression; var unaryExpression = expression.Body as UnaryExpression; if (unaryExpression != null) memberExpression = unaryExpression.Operand as MemberExpression; if (memberExpression == null || memberExpression.Member.MemberType != MemberTypes.Property) throw new Exception("Invalid lambda expression format."); return memberExpression.Member.Name; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、この段階で、インデックスプロパティにバインドする機能を実装しました。 xamlでは、次の形式の式を記述できます



Height = "{Binding '[Height、600]'、Mode = TwoWay}"



ここで、最初のパラメーターはプロパティの名前であり、2番目（オプション）はデフォルト値です。



このアプローチは、標準のIDataErrorInfoインターフェイスの実装に似ています。 なぜ実装しないのですか？ 良い考えですが、急いではいけませんが、それを考慮に入れてください...インデクサーの再定義で遊んでみましょう。 誰もがICommandを覚えており、WPFにはまだRoutedCommandsとCommandBindingsが機能するためのクールなメカニズムがあります。 この方法でビューモデルにコマンドの実装を記述するのは素晴らしいことです。

  this[ApplicationCommands.Save].CanExecute += (sender, args) => args.CanExecute = HasChanged; this[ApplicationCommands.New].CanExecute += (sender, args) => { args.CanExecute = !string.IsNullOrEmpty(FileName) || !string.IsNullOrEmpty(Text); }; this[ApplicationCommands.Help].Executed += (sender, args) => MessageBox.Show("Muse 2014"); this[ApplicationCommands.Open].Executed += (sender, args) => Open(); this[ApplicationCommands.Save].Executed += (sender, args) => Save(); this[ApplicationCommands.SaveAs].Executed += (sender, args) => SaveAs(); this[ApplicationCommands.Close].Executed += (sender, args) => Environment.Exit(0); this[ApplicationCommands.New].Executed += (sender, args) => { Text = string.Empty; FileName = null; HasChanged = false; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、プロパティとラムダ式の自動通知のないビューモデルとは何ですか？ とにかくあるはずです。

  public string Text { get { return Get(() => Text); } set { Set(() => Text, value); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、もし... CommandBindingのようなPropertyBindingを作成し、インデクサーを少しだけ再生しますか？

  this[() => Text].PropertyChanged += (sender, args) => HasChanged = true; this[() => FontSize].Validation += () => 4.0 < FontSize && FontSize < 128.0 ? null : "Invalid font size";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

よさそうですね。



そして、もちろん、私たちの奇跡ビューモデル。

  [DataContract] public class ViewModel : ViewModelBase, IDataErrorInfo { public ViewModel() { Initialize(); } string IDataErrorInfo.this[string propertyName] { get { return PropertyBindings.ContainsKey(propertyName) ? PropertyBindings[propertyName].InvokeValidation() : null; } } public PropertyBinding this[Expression<Func<object>> expression] { get { var propertyName = GetPropertyName(expression); if (!PropertyBindings.ContainsKey(propertyName)) PropertyBindings.Add(propertyName, new PropertyBinding(propertyName)); return PropertyBindings[propertyName]; } } public CommandBinding this[ICommand command] { get { if (!CommandBindings.ContainsKey(command)) CommandBindings.Add(command, new CommandBinding(command)); return CommandBindings[command]; } } public string Error { get; protected set; } public Dictionary<ICommand, CommandBinding> CommandBindings { get; private set; } public Dictionary<string, PropertyBinding> PropertyBindings { get; private set; } public CancelEventHandler OnClosing = (o, e) => { }; public TProperty Get<TProperty>(Expression<Func<TProperty>> expression, TProperty defaultValue = default(TProperty)) { var propertyName = GetPropertyName(expression); if (!Values.ContainsKey(propertyName)) Values.Add(propertyName, defaultValue); return (TProperty) Values[propertyName]; } public void Set<TProperty>(Expression<Func<TProperty>> expression, TProperty value) { var propertyName = GetPropertyName(expression); RaisePropertyChanging(propertyName); if (!Values.ContainsKey(propertyName)) Values.Add(propertyName, value); else Values[propertyName] = value; RaisePropertyChanged(propertyName); } public void RaisePropertyChanging<TProperty>(Expression<Func<TProperty>> expression) { var propertyName = GetPropertyName(expression); RaisePropertyChanging(propertyName); } public void RaisePropertyChanged<TProperty>(Expression<Func<TProperty>> expression) { var propertyName = GetPropertyName(expression); RaisePropertyChanged(propertyName); } [OnDeserializing] private void Initialize(StreamingContext context = default(StreamingContext)) { CommandBindings = new Dictionary<ICommand, CommandBinding>(); PropertyBindings = new Dictionary<string, PropertyBinding>(); PropertyChanging += OnPropertyChanging; PropertyChanged += OnPropertyChanged; } private void OnPropertyChanging(object sender, PropertyChangingEventArgs e) { var propertyName = e.PropertyName; if (!PropertyBindings.ContainsKey(propertyName)) return; var binding = PropertyBindings[propertyName]; if (binding != null) binding.InvokePropertyChanging(sender, e); } private void OnPropertyChanged(object sender, PropertyChangedEventArgs e) { var propertyName = e.PropertyName; if (!PropertyBindings.ContainsKey(propertyName)) return; var binding = PropertyBindings[propertyName]; if (binding != null) binding.InvokePropertyChanged(sender, e); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今、私たちは完全に武装していますが、完璧に制限はありません。 原則として、ビューモデルはC＃コードでの表現（ビュー）に関連付けられていますが、このバインディングをxamlに直接実装することはどれほど美しいことでしょう。 コンストラクターへの注入の拒否について覚えていますか？ 彼は私たちにそのような機会を与えてくれました。 マークアップ*の小さな拡張機能を作成しましょう。

  public class StoreExtension : MarkupExtension { public StoreExtension(Type itemType) { ItemType = itemType; } [ConstructorArgument("ItemType")] public Type ItemType { get; set; } public override object ProvideValue(IServiceProvider serviceProvider) { var service = (IProvideValueTarget) serviceProvider.GetService(typeof (IProvideValueTarget)); var frameworkElement = service.TargetObject as FrameworkElement; var dependancyProperty = service.TargetProperty as DependencyProperty; var methodInfo = typeof(Store).GetMethod("OfType").MakeGenericMethod(ItemType); var item = methodInfo.Invoke(null, new object[] { new object[0] }); if (frameworkElement != null && dependancyProperty == FrameworkElement.DataContextProperty && item is ViewModel) { var viewModel = (ViewModel) item; frameworkElement.CommandBindings.AddRange(viewModel.CommandBindings.Values); var window = frameworkElement as Window; if (window != null) viewModel.OnClosing += (o, e) => { if (!e.Cancel) window.Close(); }; frameworkElement.Initialized += (sender, args) => frameworkElement.DataContext = viewModel; return null; } return item; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出来上がり！



DataContext = "{store viewModels：MainViewModel}"



バインディング中に、コントロールがDataContextだけでなく、CommandBindingsコレクションにもビューモデルからの値が入力されるという事実に注目します。



（*マークアップのプレフィックスが "{foundation：Store viewModels：MainViewModel}"のようなプレフィックスを書き込まないように、それらは別のプロジェクトに実装する必要があり、AssemblyInfo.csのようなものを記述する必要がある同じプロジェクトに実装する必要があります

 [assembly: XmlnsDefinition("http://schemas.microsoft.com/winfx/2006/xaml/presentation", "Foundation")] [assembly: XmlnsDefinition("http://schemas.microsoft.com/winfx/2006/xaml/presentation", "Foundation.Converters")] [assembly: XmlnsDefinition("http://schemas.microsoft.com/winfx/2006/xaml/presentation", "Foundation.MarkupExtensions")]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

）



同様に、上記のインデックスへのバインドを装飾します。

  public class ViewModelExtension : MarkupExtension { private static readonly BooleanConverter BooleanToVisibilityConverter = new BooleanConverter { OnTrue = Visibility.Visible, OnFalse = Visibility.Collapsed, }; private FrameworkElement _targetObject; private DependencyProperty _targetProperty; public ViewModelExtension() { } public ViewModelExtension(string key) { Key = key; } public ViewModelExtension(string key, object defaultValue) { Key = key; DefaultValue = defaultValue; } public string Key { get; set; } public string StringFormat { get; set; } public string ElementName { get; set; } public object DefaultValue { get; set; } public object FallbackValue { get; set; } public object TargetNullValue { get; set; } public IValueConverter Converter { get; set; } public RelativeSource RelativeSource { get; set; } public override object ProvideValue(IServiceProvider serviceProvider) { var service = (IProvideValueTarget) serviceProvider.GetService(typeof (IProvideValueTarget)); _targetProperty = service.TargetProperty as DependencyProperty; _targetObject = service.TargetObject as FrameworkElement; if (_targetObject == null || _targetProperty == null) return this; var key = Key; if (_targetProperty == UIElement.VisibilityProperty && string.IsNullOrWhiteSpace(key)) key = string.Format("Show{0}", string.IsNullOrWhiteSpace(_targetObject.Name) ? _targetObject.Tag : _targetObject.Name); key = string.IsNullOrWhiteSpace(key) ? _targetProperty.Name : key; if (!string.IsNullOrWhiteSpace(StringFormat)) Key = string.Format(StringFormat, _targetObject.Tag); var index = DefaultValue == null ? key : key + "," + DefaultValue; var path = string.IsNullOrWhiteSpace(ElementName) && RelativeSource == null ? "[" + index + "]" : "DataContext[" + index + "]"; if (_targetProperty == UIElement.VisibilityProperty && Converter == null) Converter = BooleanToVisibilityConverter; var binding = new Binding(path) {Mode = BindingMode.TwoWay, Converter = Converter}; if (ElementName != null) binding.ElementName = ElementName; if (FallbackValue != null) binding.FallbackValue = FallbackValue; if (TargetNullValue != null) binding.TargetNullValue = TargetNullValue; if (RelativeSource != null) binding.RelativeSource = RelativeSource; _targetObject.SetBinding(_targetProperty, binding); return binding.ProvideValue(serviceProvider); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

xamlでは、次のように記述できます。



幅= "{ViewModel DefaultValue = 800}"



まとめ



おそらく、私は多くの情報を簡潔な形で提示したので、完全を期すために、サンプルプロジェクトに慣れることをお勧めします。



上記のすべてを要約すると、このアプローチの次の利点を区別できます。

-クリーンで簡潔かつ構造化されたコード。 ビューロジックの具体的な実装には、ビジネスルールに密接に関連するロジックが含まれますが、ビジネスロジックと弱く接続されたインターフェイスロジックは、ビューモデルの基本クラス内にカプセル化されます。

-ソリューションのシンプルさと汎用性。 さらに、シリアル化により、構成ファイルを使用してアプリケーションインターフェイスを非常に柔軟にカスタマイズできます。

-IDataErrorInfoインターフェイスを介した検証の便利な実装。



短所：

-コンストラクターへの注入の拒否（これは必須要件ではありませんが）。

-彼に慣れていない人のためのいくつかの暗黙の決定。



このアプローチを習得し、ごく少数の基本クラスのみを使用することで、リッチでインタラクティブなインターフェースを備えたアプリケーションを快適かつ迅速かつ効率的に記述しながら、ビューモデルをクリーンでコンパクトなままにすることができます。



この記事があなたのお役に立てば幸いです！ ご清聴ありがとうございました！



PS Silverlightの正確な方法はわかりませんが、WinPhoneプラットフォームにはいくつかの制限があります（マークアップ拡張機能、RoutedCommands、CommandBindingsはありません）が、本当に必要な場合はバイパスできます。 これについては、 WinPhoneの記事「 エクセレンスへの道 」で詳しく説明されています 。



PPS上で述べたように、説明されているすべての方法は、本格的なテキストエディタを作成するときに私によって適用されます。 最終的に作成のために判明したことに興味がある人は、 このリンクまたはバックアップでそれを見つけることができます。 プログラミングと詩には多くの共通点があるように思われます：言葉の達人が普通の人が複数の段落を取ることをいくつかのフレーズで表現できるように、経験豊富なプログラマーは数行のコードで難しい問題を解決します。



あなたへのインスピレーション！



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

コメント：



-任意のコントロールをビューとして使用できるため、ビューを別のエンティティ（新しいクラス）として選択したり、プロパティを別のビューモデルに追加したりする必要がない場合があります。 例で説明します。

 <Window DataContext={Store viewModels:MainViewModel}> … <!--<TextBlock DataContext={Store viewModels:DetailsViewModel} Text={Binding Name}/>--!> <TextBlock Text={Binding Name, Source={Store viewModels:DetailsViewModel}}/> … </Window>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり、インターフェイスのどこかにNameプロパティを表示するためだけに、DetailsViewModelをMainViewModelに挿入する必要はありません。たとえば、DetailsS​​hortViewを作成する必要もありません。 プロジェクト内のクラスは少なく、構造は明確です。



-記事では、基本的な原則を示しました。これを使用すると、機能的なアプリケーションを迅速かつ効率的に作成できます。 すべてをそのまま使用する必要は絶対にありません。改善、修正、空想する権利があります。 これが開発、成功です！