WPFのクイックスタート。 パート1.バインディング、INotifyPropertyChangedおよびMVVM

みなさんこんにちは！

さまざまな理由で、私たちのほとんどはデスクトップアプリケーション、少なくともブラウザを使用しています:)そして、私たちの何人かは自分で書く必要があります。 この記事では、 Windows Presentation Foundation（WPF）テクノロジーを使用し、MVVMパターンを適用する単純なデスクトップアプリケーションの開発プロセスについて説明します 。 猫の下で、読み続けたい人。

WPFはMicrosoftの開発であると言う必要はないと思います:)このテクノロジーは、Windows XPからWindows用のデスクトップアプリケーションを開発するために設計されています。 なぜそうですか？ これは、WPFが.NETプラットフォーム上で実行されるためです。その最小要件はWindows XP以降です。 残念ながら、WPFは他のプラットフォームでは動作しませんが、近い将来に変更される可能性があります。WPFベースのAvaloniaフレームワークは開発中です。

WPFの特別な点は何ですか？

WPFと他のデスクトップ構築ツールの2つの主な違い：

• ウィンドウインターフェイス自体をマークアップするためのXAMLマークアップ言語。
• ハードウェアアクセラレーショングラフィックスであるDirectXによるレンダリング。

詳細は説明しません。なぜなら これは記事のトピックではありません。 興味がある場合は、Google XAML、WPFレンダリング、milcore.dll、DirectX :)

この記事は何についてですか？

この記事には、WPFテクノロジー上に構築されたサンプルアプリケーションが含まれています。

• MVVMおよびINotifyPropertyChangedインターフェイス。 テキストのコピー。

私は、説明のある「私のあとを繰り返す」スタイルで、記事の内容を実用的な方向に向けようとします。

記事を繰り返すには何が必要ですか？

C＃での開発経験はほとんどありません:)少なくとも、言語構文をよく理解する必要があります。 Visual StudioがインストールされたWindowsマシン（例ではWin 10）も必要になります（例では2017年になり、無料のコミュニティバージョンがあります）。 VSをインストールする場合、.NETプラットフォームのデスクトップ開発のサポートを有効にする必要があります。

また、このセクションでは、プロジェクトの作成について説明します。

VSを起動し、新しいプロジェクトを作成し、アプリケーションタイプWPF App（.NET Framework）を選択し（右上の検索バーに入力できます）、好きな名前で呼び出します。

新しいプロジェクトを作成すると、インターフェイスエディターウィンドウが開きます。

下部にはレイアウトエディターがあり、上部にはウィンドウインターフェイスのプレビューがありますが、コードエディターとインターフェイスプレビューの相対的な位置を変更して、これらのボタンを使用して水平方向に配置することができます（2つの領域の境界の右側）：

始める前に

ウィンドウ要素（ Controlという単語からコントロールとも呼ばれます）は、コンテナ内またはContentControlタイプの別の要素内に配置する必要があります。 コンテナは、自分の中に複数の子コントロールを配置し、相互の配置を調整できる特別なコントロールです。 コンテナの例：

• グリッド -要素を列と行に整理できます。各列または行の幅は個別に設定されます。
• StackPanel-子を単一の行または列に配置できます。

他のコンテナがあります。 コンテナはコントロールでもあるため、コンテナ内にはネストされたコンテナを含むネストされたコンテナなどがあります。 これにより、コントロールを相互に柔軟に配置できます。 また、コンテナの助けを借りて、ウィンドウのサイズを変更するときにネストされたコントロールの動作を柔軟に制御できます。

MVVMおよびINotifyPropertyChangedインターフェイス。 テキストのコピー。

この例の結果は、2つのコントロールを備えたアプリケーションになります。1つはテキストを編集でき、もう1つはビューだけです。 あるものから別のものへの変更は、 bindingを使用してテキストを明示的にコピーすることなく同期的に転送されます。

したがって、新しく作成したプロジェクト（ Ex1という名前）があり、レイアウトエディターに移動して、最初に既定のコンテナー（ <Grid> </ Grid> ）を<StackPanel> </ StackPanel>に置き換えます 。 このコンテナで十分です 上下に2つのコントロールのみを配置する必要があります。 プロパティOrientation = "Vertical"を追加して、コンポーネントの配置方法を明示的に指定します。 パネルスタック内にいくつかの要素を追加します。テキストを入力するフィールドとテキストを表示するフィールドです。 これらのコントロールには埋め込みコードが含まれないため、自己終了タグで記述できます（以下のコードを参照）。 上記のすべての手順の後、コンテナとネストされたコントロールを記述するコードは次の形式をとる必要があります。

<StackPanel Orientation="Vertical"> <TextBox /> <TextBlock /> </StackPanel>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、この例の目的に焦点を当てましょう。 テキストボックスに入力するときに、明示的なコピー操作を避けながら、同じテキストがテキストブロックに同期して表示されるようにします。 何らかの種類の接続エンティティが必要です。ここでは、前述のbindingなどのことを説明します。 WPFの用語でのバインディングは、コントロールの一部のプロパティをC＃クラスオブジェクトの一部のプロパティに関連付け、バンドルの一部が変更されたときにこれらのプロパティを相互に更新できるメカニズムです（これは、一方、他方、または両方の方向で同時に機能します）。 Qtに精通している人のために、スロットと信号の類推を描くことができます。 時間を伸ばさないために、コードに移りましょう。

したがって、バインディングを整理するには、コントロールのプロパティと特定のC＃クラスのプロパティが必要です。 最初に、XAMLコードを把握しましょう。 両方のコントロールのテキストはTextプロパティに保存されるため、これらのプロパティのバインディングを追加します。 これは次のように行われます。

 <TextBox Text="{Binding}"/> <TextBlock Text="{Binding}"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バインディングを作成しましたが、今のところ何が明確ではありません:)バインディングが行われるクラスのオブジェクトとこのオブジェクトのプロパティが必要です（彼らが言うように、バインドする必要があります）。

それで、このクラスは何ですか？ このクラスはビューモデルと呼ばれ、ビュー（インターフェイスまたはその部分）とモデル（モデル、つまりアプリケーションロジックを担当するコードの部分）間のリンクとして機能します。これにより（ある程度まで、 ）インターフェイス（ビュー）からのアプリケーションロジックは、 Model-View-ViewModel（MVVM）パターンと呼ばれ、WPFでは、このクラスはDataContextとも呼ばれます。

ただし、単にビューモデルクラスを記述するだけでは十分ではありません。 ビューモデルプロパティまたはビュープロパティが変更されたことをバインドメカニズムに何らかの方法で通知する必要もあります。 これには、 PropertyChangedイベントを含む特別なINotifyPropertyChangedインターフェイスがあります。 基本クラスBaseViewModelのフレームワークでこのインターフェイスを実装します 。 将来的には、インターフェイスの実装を複製しないように、この基本クラスからすべてのビューモデルを継承します。 そのため、 ViewModelsディレクトリをプロジェクトに追加し、 BaseViewModel.csファイルをこのディレクトリに追加します 。 次のプロジェクト構造が得られます。

ベースビューモデルの実装コード：

 using System.ComponentModel; namespace Ex1.ViewModels { public class BaseViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

MainWindowクラスのビューモデルを作成し、ベースモデルから継承します。 これを行うには、同じViewModelsディレクトリで、 MainWindowViewModel.csファイルを作成します。このファイルには、次のようなコードが含まれます。

 namespace Ex1.ViewModels { public class MainWindowViewModel : BaseViewModel { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いいね！ 次に、このビューモデルにプロパティを追加する必要があります。このプロパティにコントロールのテキストをバインドします。 これはテキストであるため、このプロパティのタイプはstringである必要があります 。

 public string SynchronizedText { get; set; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、このようなコードを取得します

 namespace Ex1.ViewModels { public class MainWindowViewModel : BaseViewModel { public string SynchronizedText { get; set; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

だから、彼らはそれをしたようです。 ビューからこのプロパティにバインドするために残り、準備ができています。 今すぐやってみましょう：

 <TextBox Text="{Binding Path=SynchronizedText}"/> <TextBlock Text="{Binding Path=SynchronizedText}"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Nishtyak、プロジェクトを開始し、テキストボックスにiiiiiと入力します...何も起こりません）））まあ、それは大丈夫です。実際、正しい方法で進んでいますが、正しいポイントに到達していません。

しばらく立ち止まって、何が欠けているのかを考えてみます。 ビューがあります。 ビューモデルも。 zabindiliのようなプロパティ。 目的のインターフェイスが実装されます。 哀れなテキスト行をコピーするために多くの仕事をしましたが、なぜこれが必要なのでしょうか????！？！111

さて、冗談はさておき。 ビューモデルオブジェクトと他の何かを作成するのを忘れました（これについては後で説明します）。 クラス自体について説明しましたが、このクラスのオブジェクトがないため、これは何の意味もありません。 さて、このオブジェクトへのリンクをどこに保存する必要がありますか？ 例の始めに近いところで、WPFで使用される特定のDataContextについて言及しました。 そのため、どのビューにもDataContextプロパティがあり、これにリンクをビューモデルに割り当てることができます。 やってみましょう。 これを行うには、 MainWindow.xamlファイルを開き、F7を押してこのビューのコードを開きます。 ほとんど空で、ウィンドウクラスコンストラクターのみがあります。 ビューモデルの作成をそれに追加し、ウィンドウのDataContextに配置します（目的のネームスペースを使用して追加することを忘れないでください）。

 public MainWindow() { InitializeComponent(); this.DataContext = new MainWindowViewModel(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

簡単でしたが、それでも十分ではありませんでした。 それでも、アプリケーションの起動時には、テキストの同期は発生しません。 他に何をする必要がありますか？

SynchronizedTextプロパティが変更されたときにPropertyChangedイベントを発生させ、このイベントを監視する必要があることをビューに通知する必要があります。 そのため、イベントをトリガーするには、ビューモデルコードを変更します。

 public class MainWindowViewModel : BaseViewModel { private string _synchronizedText; public string SynchronizedText { get => _synchronizedText; set { _synchronizedText = value; OnPropertyChanged(nameof(SynchronizedText)); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで何をしましたか？ テキストを格納するための非表示フィールドを追加し、既存のプロパティにラップします。このプロパティを変更するときは、非表示フィールドを変更するだけでなく、ベースビューモデルで定義されたOnPropertyChangedメソッドを呼び出し、ベースでも実装されたINotifyPropertyChangedインターフェイスで宣言されたPropertyChangedイベントを発生させますモデルを表示します。 テキストが変更されるたびにPropertyChangedイベントが発生し、変更されたビューモデルのプロパティの名前が渡されます。

まあ、ほぼすべて、フィニッシュライン！ PropertyChangedイベントをリッスンするビューを指定するために残ります。

 <TextBox Text="{Binding Path=SynchronizedText, UpdateSourceTrigger=PropertyChanged, Mode=OneWayToSource}"/> <TextBlock Text="{Binding Path=SynchronizedText, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どのトリガーによって更新が行われるべきかを示したという事実に加えて、この更新が追跡される方向（ビューからモデルへ、またはその逆）も示しました。 テキストボックスにテキストを入力するため、ビューの変更のみに関心があるため、 OneWayToSourceモードを選択します。 テキストブロックの場合、すべてが正反対です。ビューに表示するためにビューモデルの変更に関心があるため、 OneWayモードを選択します。 変更を両方向で追跡する場合、 Modeをまったく指定することも、 TwoWayを明示的に指定することもできません。

だから、プログラムを実行し、テキストを入力し、voi-la！ テキストは同期的に変更され、どこにも何もコピーしませんでした！

続けてくれてありがとう。 DataTemplateとCommandパターンを扱います。