MVVM – WPFデータバインディング

この章では、データバインディングがMVVMパターンをどのようにサポートするかを学習します。データバインディングは、MVVMとMVCやMVPなどの他のUI分離パターンとを区別する重要な機能です。

データバインディングの場合は、ビューまたはUI要素のセットを構築する必要があり、その後、バインディングが指す他のオブジェクトが必要です。
ビューのUI要素は、ViewModelによって公開されるプロパティにバインドされます。
最初にビューを説明したように、ViewとViewModelが構築される順序は状況に依存します。
ViewとViewModelが構築され、ViewのDataContextがViewModelに設定されます。
バインディングは、ViewとViewModelの間でデータをやり取りするOneWayまたはTwoWayデータバインディングのいずれかです。

同じ例でデータバインディングを見てみましょう。以下は、StudentViewのXAMLコードです。

<UserControl x:Class = "MVVMDemo.Views.StudentView"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:local = "clr-namespace:MVVMDemo.Views"
   xmlns:viewModel = "clr-namespace:MVVMDemo.ViewModel"
   xmlns:vml = "clr-namespace:MVVMDemo.VML"
   vml:ViewModelLocator.AutoHookedUpViewModel = "True"
   mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">

   <!--<UserControl.DataContext>
      <viewModel:StudentViewModel/>
   </UserControl.DataContext>-->

   <Grid>
      <StackPanel HorizontalAlignment = "Left">
         <ItemsControl ItemsSource = "{Binding Path = Students}">
            <ItemsControl.ItemTemplate>
               <DataTemplate>

                  <StackPanel Orientation = "Horizontal">
                     <TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}"
                        Width = "100" Margin = "3 5 3 5"/>

                     <TextBox Text = "{Binding Path = LastName, Mode = TwoWay}"
                        Width = "100" Margin = "0 5 3 5"/>

                     <TextBlock Text = "{Binding Path = FullName, Mode = OneWay}"
                        Margin = "0 5 3 5"/>

                  </StackPanel>

               </DataTemplate>
            </ItemsControl.ItemTemplate>
         </ItemsControl>
      </StackPanel>
   </Grid>

</UserControl>

上記のXAMLコードを見ると、ItemsControlがViewModelによって公開されている学生コレクションにバインドされていることがわかります。
また、Studentモデルのプロパティにも独自の個別のバインディングがあり、これらはTextboxesとTextBlockにバインドされていることもわかります。
ビューの全体的なDataContextがViewModelに設定されているため、ItemsControlのItemSourceはStudentsプロパティにバインドできます。
ここでのプロパティの個々のバインディングもDataContextバインディングですが、ItemSourceの動作方法のため、ViewModel自体に対するバインディングではありません。
アイテムソースがコレクションにバインドされると、レンダリング時に各アイテムのコンテナがレンダリングされ、そのコンテナのDataContextがアイテムに設定されます。そのため、行内の各テキストボックスとテキストブロックの全体的なDataContextは、コレクション内の個々の生徒になります。また、これらのTextBoxのバインディングはTwoWayデータバインディングであり、TextBlockの場合はTextBlockを編集できないため、OneWayデータバインディングであることがわかります。

このアプリケーションを再度実行すると、次の出力が表示されます。

WPF Data Bindingsメインウィンドウ

最初の行の2番目のテキストボックスのテキストをAllainからUpstonに変更し、Tabキーを押してフォーカスを失います。 TextBlockテキストも更新されていることがわかります。

更新されたテキストブロック

これは、TextBoxesのバインディングがTwoWayに設定され、Modelも更新され、モデルからTextBlockが再び更新されるためです。

Mvvm-wpf-data-bindings

MVVM – WPFデータバインディング