ViewModel で作成したクラスを ルート要素の Panel の DataContext にデータバインドする際の手順のまとめ。

1. ViewModel 用のクラスを作ります

   　ViewModel 用のクラスを作ります。 (以下では「MainWindowViewModel」が相当）

   Class MainWindow 
   End Class
   
   Class MainWindowViewModel
       Public Property AAAA As Integer = 100
       Public Property BBBB As String = "ABCD"
       Public Property CCCC As TestClass = New TestClass With {.Age = 18, .Name = "test"}
       Public Property DDDD As Double() = New Double(10) {}
   End Class
   
   Class TestClass
       Public Property Name As String
       Public Property Age As Integer
   End Class
   

2. ビルドします

   　XAML editor 側で MainWindowViewModel の内容が正しく評価されるようにするためにビルドします。
   　以後 ViewModel の変更を行うたびにリビルドします。

3. XAMLを編集します
   • xmlns:local="clr-namespace:WpfApplication1" を追記します
     （「WpfApplication1」 は自アプリケーション名です。）
   • Window.Resources に local:MainWindowViewModel のエントリーを追記します。
   • ルートパネルの DataContext 属性に"{StaticResource ViewModel}"を追記します。

   <Window x:Class="MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:WpfApplication1"
       Title="MainWindow" Height="100" Width="200">
   
   
       <Window.Resources>
           <local:MainWindowViewModel x:Key="ViewModel" />
       </Window.Resources>
   
   
       <Grid DataContext="{StaticResource ViewModel}">
           <Button Content="Button1" Margin="10" />
       </Grid>
   </Window>
   

4. バインディングを指定します

   　上記の準備を終えると、Button等のコントロールを選択し「~のデータバインドを作成」などを選択すると、ViewModelの情報が表示されるようになります。

   

5. 指定した後の例

   　上記4.のダイアログで実際に選択してみると、XAML が以下のように変更されます。

       <Grid DataContext="{StaticResource ViewModel}">
           <Button Content="{Binding CCCC.Name}" Margin="10" />
       </Grid>