How to add two ToolStripComboBox and Separator Horizontally to one ToolStripDropMenuItem?

Question

I think that this should be simple to do. But I haven't seen it. I'd like to do something like:

DropDown -> DropDownItem1 [ComboBox1 [|] ComboBox2], DropDownItem2 [...], DropDownItem3 [...];

I'm using ToolStripDropDownButton in a ToolStrip. I'm programming w/ C# . Thanks for your advices.

Something like: https://s18.postimg.org/nd9r35jpl/c89a195a3b6e8dac6e7753af6b0b8a6c.png

Best Regards

Do you do this by code or by the designer ? https://i.gyazo.com/c89a195a3b6e8dac6e7753af6b0b8a6c.png — Jim, Nov 02 '16 at 14:26
Hi Jim, I did by designer and I've my dropdown like that img. But I like to place the second combobox2 beside combobox1. I don't know if you get it. — Christian Torres M, Nov 02 '16 at 14:41
Do you mean you want to have 2 combo boxes in the same dropdown item? — Reza Aghaei, Nov 02 '16 at 14:48
Excuses for my picture. I did w/ paint xd. Something like: https://s18.postimg.org/nd9r35jpl/c89a195a3b6e8dac6e7753af6b0b8a6c.png — Christian Torres M, Nov 02 '16 at 14:57

Reza Aghaei · Accepted Answer · 2016-11-02T16:33:28.143

It seems you are looking for such layout:

To do so, you don't need to create any custom control. Just use common features of ToolStrip. You need to set the LayoutStyle property to a suitable value.

Example

private void Form1_Load(object sender, EventArgs e)
{
    var dropdown = new ToolStripDropDown();

    //Define style
    dropdown.LayoutStyle = ToolStripLayoutStyle.Table;
    var settings = (dropdown.LayoutSettings as TableLayoutSettings);
    settings.ColumnCount = 3;

    //First Item    
    var item1 = new ToolStripMenuItem("Some Sub Menu");
    dropdown.Items.Add(item1);
    settings.SetColumnSpan(item1, 3); //Set column span to fill the row

    //First Combo
    var combo1 = new ToolStripComboBox("combo1");
    combo1.Items.AddRange(new string[] { "Item1", "Item2", "Item3" });
    dropdown.Items.Add(combo1);

    //Separator
    dropdown.Items.Add("-");

    //Second Combo
    var combo2 = new ToolStripComboBox("combo2");
    combo2.Items.AddRange(new string[] { "Item1", "Item2", "Item3" });
    dropdown.Items.Add(combo2);

    //Last item
    var item2 = new ToolStripMenuItem("Some Othe Sub Menu");
    dropdown.Items.Add(item2);
    settings.SetColumnSpan(item2, 3); //Set column span to fill the row

    toolStripDropDownButton1.DropDown = dropdown;
}

This works the same way with ToolstripDropDownButton instead of ToolstripDropDown? — Christian Torres M, Nov 02 '16 at 16:48
I have a `ToolStripDropDownButton` as you can see. Then I created a `ToolStripDropDown` with a custom layout, and set it as `DropDown` of that `ToolStripDropdownButton`. — Reza Aghaei, Nov 02 '16 at 16:50
It's not the only solution, there can be different solution for the requirement, for example by using a `ToolStripControlHost` hosting some controls. But it's a simple one. — Reza Aghaei, Nov 02 '16 at 16:57

score 1 · Answer 2 · answered Nov 02 '16 at 14:37

Use the wizard and look at the final code:

// 
// toolStrip1
// 
this.toolStrip1.Items.AddRange(new System.Windows.Forms.ToolStripItem[] {
this.toolStripComboBox1,
this.toolStripComboBox2,
this.toolStripSeparator1,
this.toolStripDropDownButton1});
this.toolStrip1.Location = new System.Drawing.Point(0, 0);
this.toolStrip1.Name = "toolStrip1";
this.toolStrip1.Size = new System.Drawing.Size(771, 25);
this.toolStrip1.TabIndex = 2;
this.toolStrip1.Text = "toolStrip1";
// 
// toolStripComboBox1
// 
this.toolStripComboBox1.Name = "toolStripComboBox1";
this.toolStripComboBox1.Size = new System.Drawing.Size(121, 25);
// 
// toolStripComboBox2
// 
this.toolStripComboBox2.Name = "toolStripComboBox2";
this.toolStripComboBox2.Size = new System.Drawing.Size(121, 25);
// 
// toolStripSeparator1
// 
this.toolStripSeparator1.Name = "toolStripSeparator1";
this.toolStripSeparator1.Size = new System.Drawing.Size(6, 25);
// 
// toolStripDropDownButton1
// 
this.toolStripDropDownButton1.DisplayStyle = System.Windows.Forms.ToolStripItemDisplayStyle.Image;
this.toolStripDropDownButton1.Image = ((System.Drawing.Image)(resources.GetObject("toolStripDropDownButton1.Image")));
this.toolStripDropDownButton1.ImageTransparentColor = System.Drawing.Color.Magenta;
this.toolStripDropDownButton1.Name = "toolStripDropDownButton1";
this.toolStripDropDownButton1.Size = new System.Drawing.Size(29, 22);
this.toolStripDropDownButton1.Text = "toolStripDropDownButton1";

Hi mcNets, I have my code like that. But I like to place the second combobox2 beside combobox1, I don't want combobox1 above combobox2 (Horizontal alignment on items not vertical). I don't know if you get it. — Christian Torres M, Nov 02 '16 at 14:45
change items order in `this.toolStrip1.Items.AddRange()` method. — McNets, Nov 02 '16 at 14:47
Mcnets something like: https://s18.postimg.org/nd9r35jpl/c89a195a3b6e8dac6e7753af6b0b8a6c.png — Christian Torres M, Nov 02 '16 at 15:01
If you're not using the default behavior, you must use a custom control. http://www.codeproject.com/Articles/15892/Adding-a-custom-control-to-a-ToolStripDropDownButt — McNets, Nov 02 '16 at 15:07

How to add two ToolStripComboBox and Separator Horizontally to one ToolStripDropMenuItem?

2 Answers2