How shall i group the combobox items in MVVM WPF

Question

In my mainviewmodel i have list of People

class MainViewModel
{
    publc List<People> PeopleList
    {
        get;
        set;
    }
}

and the each People has mode of travelling

Class People
{
   public List<TravelMode> TravelModes
    {
     get;
      set;  
    }

    public string Name{get;set;}
}

Class TravelMode
{
  public string VehicleName{get;set;}  
}

Here is the XAML code

<ComboBox ItemsSource="{Binding Path= PeopleList, Mode=TwoWay}   DisplayMemberPath="VehicleName"  >

Now the combo box shows all the vehicle data like this

Car
Bike
Bus
Train

is it possible grouping the combo box items as mentioned below. with out any code behind just by databinding in xaml?

John
-------Car
-------Bike
Jerry
-------Bus
-------Train

How may i do that?

One trick is to define two different ItemTemplates. one for head elements (such as Car and Bus) and one for normal elements (Bike and Train). — Bizhan, Nov 12 '14 at 18:44

Umriyaev · Accepted Answer · 2014-11-13T09:15:45.540

Try this. But this actually uses treeview entirely. Because when you use combobox inside of the combobox it's hard to detect whether you are changing the travelNode or or you are changing person when you drop down your combobox. MainViewModel.cs:

public class MainViewModel
{
    public List<People> PeopleList { get; set; }

    public MainViewModel() { GenerateList(); }

    public void GenerateList()
    {
        PeopleList = new List<People>();
        TravelNode car = new TravelNode { VehicleName = "Car" };
        TravelNode bus = new TravelNode { VehicleName = "Bus" };
        TravelNode bike = new TravelNode { VehicleName = "Bike" };
        TravelNode train = new TravelNode { VehicleName = "Train" };
        People john = new People();
        john.Name = "John";
        john.TravelNodes = new List<TravelNode>();
        john.TravelNodes.Add(car); john.TravelNodes.Add(bike);
        People jerry=new People();
        jerry.Name="Jerry";
        jerry.TravelNodes=new List<TravelNode>();
        jerry.TravelNodes.Add(bus); jerry.TravelNodes.Add(train);
        PeopleList.Add(john); PeopleList.Add(jerry);
    }
}
public class People
{
    public List<TravelNode> TravelNodes { get; set; }
    public string Name { get; set; }
}
public class TravelNode
{
    public string VehicleName { get; set; }
}

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    MainViewModel viewmodel = new MainViewModel();
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = viewmodel;

    }
}

MainWindow.xaml

<Window x:Class="treeViewTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">

<Grid>
    <TreeView ItemsSource="{Binding PeopleList}">
        <TreeView.ItemTemplate>
            <DataTemplate>
                <TreeViewItem ItemsSource="{Binding TravelNodes}" Header="{Binding Name}">
                    <TreeViewItem.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding VehicleName}"></TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </TreeViewItem.ItemTemplate>
                </TreeViewItem>
            </DataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Grid>

If selecting is not really important, but you want just combobox inside of the combobox to display people and travelNodes, than you will change the MainWindow.xaml as following

<Window x:Class="treeViewTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">

<StackPanel>

    <ComboBox ItemsSource="{Binding PeopleList}" SelectedIndex="0">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Name}">    
                    </TextBlock>
                    <ComboBox ItemsSource="{Binding TravelNodes}" >
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding VehicleName}"/>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
</StackPanel>

http://stackoverflow.com/questions/3585017/grouping-items-in-a-combobox worked perfectly for me with only one exception is that when there is single item, I don't want to group. Anybody has a clue ? — rajibdotnet, Feb 19 '16 at 18:43
http://www.wpf-tutorial.com/listview-control/listview-grouping/ Finally, this is what I was looking for. — rajibdotnet, Feb 19 '16 at 23:36
Is there a way how to maybe put tree view inside combo box? And most importantly support selection of item on individual vehicle name and not on the whole group of vehicle names under people class? — Tomas Kosar, Jul 03 '17 at 16:42

How shall i group the combobox items in MVVM WPF

1 Answers1