Search code examples
wpfmvvmcomboboxcollectionviewsource

Grouping items in a ComboBox


I have a ListView that contains two types of objects, single and multiple. The single is a ordinary TextBlock while the multiple is a ComboBox with items.

I'm trying to group the items in the ComboBox without success. Is it possible? Or should I go for a different approach?

What I'm trying to achieve:

[ComboBox v]
    [Header  ]
    [    Item]
    [    Item]
    [Header  ]
    [    Item]

Solution

  • It is possible. Use a ListCollectionView with a GroupDescription as the ItemsSource and just provide a GroupStyle to your ComboBox. See sample below:

    XAML:

    <Window x:Class="StackOverflow.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:StackOverflow"
            xmlns:uc="clr-namespace:StackOverflow.UserControls"
            Title="MainWindow" Height="350" Width="525">
        <StackPanel>
            <ComboBox x:Name="comboBox">
                <ComboBox.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Name}"/>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ComboBox.GroupStyle>
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}"/>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
        </StackPanel>
    </Window>
    

    Code-behind:

    namespace StackOverflow
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
    
            public MainWindow()
            {
                InitializeComponent();
                //this.comboBox.DataContext = this;
    
                List<Item> items = new List<Item>();
                items.Add(new Item() { Name = "Item1", Category = "A" });
                items.Add(new Item() { Name = "Item2", Category = "A" });
                items.Add(new Item() { Name = "Item3", Category = "A" });
                items.Add(new Item() { Name = "Item4", Category = "B" });
                items.Add(new Item() { Name = "Item5", Category = "B" });
    
                ListCollectionView lcv = new ListCollectionView(items);
                lcv.GroupDescriptions.Add(new PropertyGroupDescription("Category"));
    
                this.comboBox.ItemsSource = lcv;
            }
    
    
        }
    
        public class Item
        {
            public string Name { get; set; }
            public string Category { get; set; }
        }
    
    }