How can I bind my list Property of the object to combo box submenus?

Question

I have this object of class type HouseInfo that contains a list property:

public class HouseInfo
    {
        public string House
        {
            get;
            set;
        }

        public List<String> Details
        {
            get;
            set;

        }

    }

 public List<HouseInfo> HouseInfos { get; set; }

I am successfully binding the House property to main items of combo box using ItemSource property in xaml but can't figure out the binding of Details to their respective submenus.

<ComboBox x:Name="Houses1"
                                  Grid.Row="1"
                                  Grid.Column="4"
                                  ItemsSource="{Binding HouseInfos}"
                                  Padding="0"
                                  DisplayMemberPath="House"
                                  VerticalContentAlignment="Center"
                                  VerticalAlignment="Top"
                                  HorizontalContentAlignment="Stretch"
                                  Margin="0,0,0,2">
</ComboBox>

I tried customizing menuitems in xaml but I get the error "itemsCollection must be empty before using items Source."

How do I get the Details list in each menu item as submenu items?

Any help would be appreciated. Thanks in advance.

Update:

I have bound submenu items as well but they are not visible. I am sure they have bound successfully as it generates submenu items equal to the count of the list inside the details property list of the object. This is the updated xaml for the menu:

 <Menu x:Name="menu"
                              VerticalAlignment="Top"
                              Grid.Row="1"
                              Grid.Column="4"
                              Height="19">
                            <MenuItem ItemsSource="{Binding HouseInfos}"
                                      Padding="0"
                                      Background="#0068FF11"
                                      VerticalAlignment="Top"
                                      RenderTransformOrigin="0.5,0.5"
                                      Height="19"
                                      Width="105">
                                <MenuItem.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <SkewTransform />
                                        <RotateTransform />
                                        <TranslateTransform X="0.5" />
                                    </TransformGroup>
                                </MenuItem.RenderTransform>
                                <MenuItem.Header>
                                    <Label x:Name="headerYears"
                                           Margin="0"
                                           Padding="0"
                                           Content="Houses"
                                           Background="#00FF0000"
                                           MaxHeight="18"
                                           UseLayoutRounding="False"
                                           RenderTransformOrigin="0,0"
                                           HorizontalContentAlignment="Center" />
                                </MenuItem.Header>
                                <MenuItem.ItemContainerStyle>
                                    <Style TargetType="{x:Type MenuItem}">
                                        <Setter Property="Header"
                                                Value="{Binding House}" />
                                        <Setter Property="ItemsSource"
                                                Value="{Binding InfoPoints}" />
                                    </Style>
                                </MenuItem.ItemContainerStyle>
                            </MenuItem>
                        </Menu>

Here is the image of menu which is populated but not visible.

Bound but invisible submenu items

This is exactly what you want . see this link : https://stackoverflow.com/questions/23941314/wpf-how-can-i-create-menu-and-submenus-using-binding . — Meysam Asadi, Feb 07 '21 at 13:37
ok, that is close to what I want but I have bound the submenus as well. I just can't understand why they are not visible. Check the Update in the question. — Divyanshu Agrawal, Feb 07 '21 at 13:42

Kaushik Dayalan · Answer 1 · 2021-02-07T11:44:54.950

0

Try using the DataSource property of the combobox. You can assign HouseInfos.House1.

What I did was I dynamically assign them to the combobox

comboBox1.DataSource = HouseInfo.House1.Details;
comboBox1.DisplayMember = "HouseDetails";
comboBox1.ValueMember = "HouseDetailsID";

Or you can try something like the above.

edited Feb 07 '21 at 11:44

answered Feb 07 '21 at 11:41

Kaushik Dayalan

46
5

How will datasource create submenu items by itself? – Divyanshu Agrawal Feb 07 '21 at 11:44
So you are actually retrieving a list of houses which has details as another list with each house retrieved from the db ? – Kaushik Dayalan Feb 07 '21 at 11:46
1

I can set datasource and displaymember to main items easily. problem is with submenu items for all twelve houses – Divyanshu Agrawal Feb 07 '21 at 11:49
Or what you are trying to do is that you have a combo box with the list of houses and then user clicks on the house selected another submenu opens up with the details list in a combo box ? – Kaushik Dayalan Feb 07 '21 at 11:49
yes.. u got it. when user moves mouse over any of the twelve house the submenu populated with list should appear – Divyanshu Agrawal Feb 07 '21 at 11:51
Why don't you try it out like this. First let the user select the house and then depending on the selected house have the combobox which appears with the list of details rather than lazyloading everything at once. – Kaushik Dayalan Feb 07 '21 at 11:52
that can work.. but how will the combo box appear next to selected house? – Divyanshu Agrawal Feb 07 '21 at 11:55
Rather than that I guess you could use a `ContextMenuStrip` [link](https://www.c-sharpcorner.com/UploadFile/mahesh/context-menu-in-C-Sharp/) try this link – Kaushik Dayalan Feb 07 '21 at 12:00

Meysam Asadi · Answer 2 · 2021-02-07T14:48:20.807

Use this structure. I matched the names with your own names.

MainWindw.xaml

 <Window x:Class="MyNameSpace.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:MyNameSpace"
        mc:Ignorable="d"
        Title="TestMenu" Height="450" Width="800">
    <DockPanel>
        <Menu DockPanel.Dock="Top" ItemsSource="{Binding MenuItems}">
            <Menu.ItemContainerStyle>
                <Style TargetType="{x:Type MenuItem}">
                    <Setter Property="Command" Value="{Binding Command}" />
                </Style>
            </Menu.ItemContainerStyle>
            <Menu.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type local:HouseInfo}" ItemsSource="{Binding Path=Details}">
                    <TextBlock Text="{Binding House}"/>
                </HierarchicalDataTemplate>
            </Menu.ItemTemplate>
        </Menu>
        <Grid>
        </Grid>

      
    </DockPanel>
</Window>

MainWindow.cs

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;

namespace MyNameSpace
{
    /// <summary>
    /// Interaction logic for MainWindw.xaml
    /// </summary>
    public partial class MainWindw : Window
    {
        public List<HouseInfo> MenuItems { get; set; }

        public MainWindw()
        {
            InitializeComponent();

            MenuItems = new List<HouseInfo>();
            HouseInfo houseInfo1 = new HouseInfo();
            houseInfo1.House = "Header A";
            houseInfo1.Details = new List<HouseInfo>() { new HouseInfo() { House = "Header A1" }, new HouseInfo() { House = "Header A2" } };


            HouseInfo houseInfo2 = new HouseInfo();
            houseInfo2.House = "Header B";
            houseInfo2.Details = new List<HouseInfo>() { new HouseInfo() { House = "Header B1" }, new HouseInfo() { House = "Header B2" } };


            MenuItems.Add(houseInfo1);
            MenuItems.Add(houseInfo2);
            DataContext = this;
        }
    }

    public class HouseInfo
    {
        public string House
        {
            get;
            set;
        }
        public List<HouseInfo> Details { get; set; }

        private readonly ICommand _command;
        public HouseInfo()
        {
            _command = new CommandViewModel(Execute);
        }

        public ICommand Command
        {
            get
            {
                return _command;
            }
        }

        private void Execute()
        {
            // (NOTE: In a view model, you normally should not use MessageBox.Show()).
            MessageBox.Show("Clicked at " + House);
        }
    }

    public class CommandViewModel : ICommand
    {
        private readonly Action _action;

        public CommandViewModel(Action action)
        {
            _action = action;
        }

        public void Execute(object o)
        {
            _action();
        }

        public bool CanExecute(object o)
        {
            return true;
        }

        public event EventHandler CanExecuteChanged
        {
            add { }
            remove { }
        }
    }
}

you can gave style to every element with this code

<Menu.ItemContainerStyle>
     <Style TargetType="{x:Type MenuItem}">
          <Setter Property="Command" Value="{Binding Command}" />
     </Style>
</Menu.ItemContainerStyle>

for example add this line to HouseInfo class

public Thickness Margin { get; set; }

and MainWindow.cs

MenuItems = new List<HouseInfo>();
HouseInfo houseInfo1 = new HouseInfo();
houseInfo1.House = "Header A";
houseInfo1.Margin = new Thickness(5);
houseInfo1.Details = new List<HouseInfo>() { new HouseInfo() { House = "Header A1" }, new HouseInfo() { House = "Header A2", Margin=new Thickness(10) } };

and set Style in xaml

<Menu.ItemContainerStyle>
   <Style TargetType="{x:Type MenuItem}">
         <Setter Property="Command" Value="{Binding Command}" />
         <Setter Property="Margin" Value="{Binding Margin}" />
   </Style>
</Menu.ItemContainerStyle>

test:

Same thing happened with using hierarchical data template. The submenus are invisible like in the image attached in the question above — Divyanshu Agrawal, Feb 07 '21 at 14:28
I posted a picture of my menu that runs perfectly. Check that you have not set anything wrong — Meysam Asadi, Feb 07 '21 at 14:35
My details list property is string type.. is it necessary to give it the same class type in which it Exists like you have set it to HouseInfo type? — Divyanshu Agrawal, Feb 07 '21 at 14:38

How can I bind my list Property of the object to combo box submenus?

2 Answers2