How to add subitem in dropbox

Question

I've got unfinished project and my first steps is to modify main menu which is based on combobox and looks like in GitHub desktop application

So now task is to group similar items into subgroups.

For example Log View, Cities View and Stores View should be placed under the group Administration. And years 2017...2020 should be placed under one group.

Unfortunately I can't find solution for this task, maybe ComboBox is not the best solution for this. Maybe someone can give me direction where my solution is? It can either collapsible group or like menu-style, when nested items appears on right of the group.

P.S Administration and Year Table Administration is just empty combobox items.

You could set or bind the `ItemsSource` property to a grouped `CollectionView`: https://stackoverflow.com/questions/3585017/grouping-items-in-a-combobox — mm8, Jan 07 '20 at 14:08
@SBarbovskis: Add an expander to the `GroupStyle` if you want this. — mm8, Jan 07 '20 at 14:38

score 0 · Answer 1 · answered Jan 08 '20 at 09:29

So, my solution is based on thies https://stackoverflow.com/a/3585244/7283900

I added Expander to my ComboBox, so entire solution now looks like

XAML:

<Window x:Class="WpfApp1_TEST.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1_TEST"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid>

    <Grid>
        <Grid.Resources>
            <Style x:Key="GroupItem" TargetType="{x:Type GroupItem}">
                <Setter Property="Margin" Value="0,0,0,5"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type GroupItem}">
                            <Expander x:Name="expander" 
                                      ExpandDirection="Down">

                                <Expander.Header>
                                    <DockPanel>
                                        <TextBlock Text="{Binding Name}" FontWeight="Bold" Margin="2,5,0,2" FontSize="14"/>
                                    </DockPanel>
                                </Expander.Header>
                                <Expander.Content>
                                    <Border Margin="5,0,0,0">
                                        <ItemsPresenter >
                                        </ItemsPresenter>
                                    </Border>
                                </Expander.Content>
                            </Expander>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <ComboBox Height="27" HorizontalAlignment="Left"  
                  ItemsSource="{Binding Item}"
                  Margin="162,109,0,0" VerticalAlignment="Top" 
                  Width="195" Name="cboGroup" >
            <ComboBox.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupItem}"/>
            </ComboBox.GroupStyle>
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>

</Grid>

And CodeBehind of this page

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        List<Item> items = new List<Item>();
        items.Add(new Item() { Name = "Item1", Category = "Category_1" });
        items.Add(new Item() { Name = "Item2", Category = "Category_1" });
        items.Add(new Item() { Name = "Item3", Category = "Category_1" });
        items.Add(new Item() { Name = "Item4", Category = "Category_2" });
        items.Add(new Item() { Name = "Item5", Category = "Category_2" });

        ListCollectionView lcv = new ListCollectionView(items);
        lcv.GroupDescriptions.Add(new PropertyGroupDescription("Category"));

        //this.comboBox.ItemsSource = lcv;
        this.cboGroup.ItemsSource = lcv;
    }

    public class Item
    {
        public string Name { get; set; }
        public string Category { get; set; }
    }


}

How to add subitem in dropbox

1 Answers1