2016/10/03

    C#のWPFでComboBoxをグループ毎に表示させる

    WPFのComboBoxでは、グループ毎にヘッダーを付けてリストを表示させる機能がある。

    こんな感じ↓

    ヘッダーの表示をカスタマイズする為ComboBox.GroupStyleを定義する。

    GroupStyle.HeaderTemplateへ表示したいコントロールを配置する。  

            <ComboBox x:Name="comboBox">
            <ComboBox.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}" Background="Aqua"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ComboBox.GroupStyle>
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <WrapPanel>
                        <TextBlock Text="{Binding Title}"/>
                    </WrapPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

    ※HeaderTemplateでバインドするフィールドはNameになる

    ※ComboBoxのItemsSourceにはListCollectionViewクラスをセットするが、

    　ヘッダー欄はListCollectionViewのGroupsプロパティが参照される

    ※GroupsプロパティはCollectionViewGroup型のリストで

    　CollectionViewGroupのNameプロパティをバインドするという意味になる 

     

     

     

    バインドするデータは以下のように、ListCollectionViewとして作成し、

    GroupDescriptionsプロパティへグループ化したい項目をセットしている。  

        public partial class MainWindow : Window
    {
        public class ComboItem
        {
            public string Title { get; set; }
            public string Category { get; set; }
        }



        public MainWindow()
        {
            InitializeComponent();

            List<ComboItem> items = new List<ComboItem>();
            items.Add(new ComboItem() { Title = "ichiro", Category = "CategoryA" });
            items.Add(new ComboItem() { Title = "jiro",   Category = "CategoryA" });
            items.Add(new ComboItem() { Title = "saburo", Category = "CategoryA" });
            items.Add(new ComboItem() { Title = "momotaro", Category = "CategoryB" });
            items.Add(new ComboItem() { Title = "kintaro", Category = "CategoryB" });
            ListCollectionView view = new ListCollectionView(items);
            view.GroupDescriptions.Add(new PropertyGroupDescription("Category"));
            this.comboBox.ItemsSource = view;
        }
    }

     

     

    カテゴリ： C#, C#WPF