スポンサーリンク

【C#】【WPF】DataTemplateを使いこなそう!

C#

いきなりですが、

あなたは下のような画面を作る場合、どのように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で実装することが出来ます。
(こうやって書くと分かりにくいですね (^^;

少しでも参考になれば幸いです。

スポンサーリンク
スポンサーリンク
C#プログラミング
スポンサーリンク
Step1

コメント

タイトルとURLをコピーしました