2016/10/04

    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をセットする。

     

     

     

     

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

     

     

    カテゴリ： C#, C#WPF