いきなりですが、
あなたは下のような画面を作る場合、どのようにXAMLを記述しますか?
全部で50個!LabelやTextBoxで書くのは大変ですよね。
こんな場合には、『DataTemplate』を使いましょう!!
DataTemplateでデータの表示形式を定義する
DataTemplateを使うと、データの表示形式を定義することが出来ます。
さっそく、コードです。
<DockPanel.Resources>
<DataTemplate x:Key="UnitPriceList">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Rank}" Style="{StaticResource RankLabel}"/>
<TextBox Style="{StaticResource UnitPriceRankText}">
<TextBox.Text>
<Binding Path="UnitPrice" Mode="TwoWay" StringFormat="N2">
<Binding.ValidationRules>
<validators:DecimalUnitPriceValidationRule/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
</StackPanel>
</DataTemplate>
</DockPanel.Resources>
DataTemplateを使って、下のような1セットを定義しました。
(ヘッダ部分は DataTemplate に含んでいません。無視してください。)
DataTemplateを使う
テンプレート化した部品を使いたい場所に下記コードを置きます。
<ItemsControl ItemsSource="{Binding UnitPriceRank.ViewUnitPriceRanks[0]}" ItemTemplate="{StaticResource UnitPriceList}"/>
ItemsSource には、ランク1~10までのデータが詰まったコレクションを指定しています。
ItemTemplate には、先に定義したDataTemplateを指定しています。
ItemsSource
サンプルソースでは、ObservableCollectionで宣言したコレクションに10個のデータが詰まっています。
ItemsControl では、コレクションからデータを取り出して1つ1つ ItemTemplate に渡してくれます。
ItemTemplate
DataTemplateを定義したときに、”x:Key”で付けておいた名前を指定することでテンプレートを使うことが出来ます。
<DataTemplate x:Key="UnitPriceList">
結果
生成された表示が以下のようになります。
まとめ
上記で DataTemplate が便利なことは伝わったでしょうか?
DataTemplate の中で、 ItemsControl を使い、別の DataTemplate を呼び出すことで、最初に提示した横方向もDataTemplateで実装することが出来ます。
(こうやって書くと分かりにくいですね (^^;
少しでも参考になれば幸いです。
コメント