C#のWPFで複数のテンプレートを切り替えて使う

WPFでは、テンプレートを使って見た目を自由にカスタマイズ出来る。

さらに、データの条件によってテンプレートを使い分ける事も可能。

以下の例では、ComboBoxのグループヘッダーを別々の色にしている。

手順は以下の通り。

DataTemplateSelectorを作成

DataTemplateSelectorクラスから派生した独自のクラスを作成する。

必要な数だけDataTemplate型のプロパティを作っておき、SelectTemplateメソッドをオーバーライドして条件にあったDateTemplateを戻り値とするようコーディングする。

        public class ComboHeaderTemplateSelector : DataTemplateSelector
        {
            public DataTemplate Template1 { get; set; }
            public DataTemplate Template2 { get; set; }


            public override DataTemplate SelectTemplate(object item, DependencyObject container)
            {
                CollectionViewGroup group = (CollectionViewGroup)item;

                if ("CategoryA" == group.Name.ToString())
                    return Template1;
                else
                    return Template2;
            }
        }

２つのDateTemplate型プロパティを作成している。

作成したTemplate1、Template2の中身についてはXAML側から定義を行う。

SelectTemplateメソッドでは引数itemにバインドされたデータが渡ってくる。

ComboBoxのヘッダー欄の場合、ListCollectionViewのGroupsプロパティが参照されるGroupsプロパティはCollectionViewGroup型のリストでなので、itemはCollectionViewGroupへキャスト出来る。

 

それぞれのテンプレートとセレクターを作成

    <Window.Resources>
        <DataTemplate x:Key="MyTemplate1">
            <TextBlock Text="{Binding Name}" Background="Aqua"/>
        </DataTemplate>
        <DataTemplate x:Key="MyTemplate2">
            <TextBlock Text="{Binding Name}" Background="Gold"/>
        </DataTemplate>
        <local:ComboHeaderTemplateSelector x:Key="MySelector"
                                Template1="{StaticResource MyTemplate1}"
                                Template2="{StaticResource MyTemplate2}"/>
    </Window.Resources>
    <StackPanel Margin="10">
        <ComboBox x:Name="comboBox">
            <ComboBox.GroupStyle>
                <GroupStyle HeaderTemplateSelector="{StaticResource MySelector}"/>
            </ComboBox.GroupStyle>
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Title}"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </StackPanel>

Windows.Resource内にそれぞれのDataTemplateを定義。

上記で作成したTemplateSelectorも定義し、Template1、template2へDateTemplateをセット。

ComboBox.GroupStyleのHeaderTemplateSelectorへ作成したTemplateSelectorをセットする。

 

その他のソースはこちらを参照