１． WPFのデザイン効率を上げたい

WPFはWindowsFormと異なりデータバインドを利用することで複雑な画面をサクサク作ることができる。具体的には下記のような画面を作りたいと思ったときに特殊なコントロールを使わずに標準コントロールで１時間もあれば画面を作ることができる。

ただ、デザイナー画面ではItemTemplateに指定したユーザーコントロールが表示されないので、毎回プログラムを実行する必要があり効率が悪い。いろいろと調べた結果、下記の方法で画面のデザインを表示させることができる。

＜通常＞

＜完成系＞

２．手順

要はデザイン中にもデータバインドをすればいいので、専用の「DemoClsMainWindowViewModel.cs」を追加する。

とりあえず、リストが表示されればいいので、カード部分の部品のClassを仮で作る

MainWindowのXamlに記載する

<Window.Resources>

<local:DemoClsMainWindowViewModel x:Key="DemoMainWindowViewModel"></local:DemoClsMainWindowViewModel>

</Window.Resources>

<Window.DataContext>

</Window.DataContext>

※リソースとして指定するとデザイナー内でインスタンス化されるイメージ？作成したリソースをDataContextにバインドをする

画面にデータをバインドしていることになるので、実際にクラスのプロパティの値を指定することで、デザイナー画面でデータのバインドなどを確認することができるので、すごく効率的にデザインの確認や調整ができる。

DemoClsCardクラスにNameプロパティを作って値を設定した。

バインドされる側のユーザーコントロール「CardView.xaml」の「氏名」には「Name」プロパティがバインドされると指定されている

デザイナー画面でインスタンス時に指定した氏名が表示されている

なお、ユーザーコントロール「CardView.xaml」で「Binding」に指定しているプロパティ名と同じプロパティ名を作っておけばデザイナー編集用のクラスを作ることができる