Open Panel as ToolStrip MenuItem after click on menu C#

Question

There is special menu item in Visual Studio Express 2013.
It looks like aPanel opened after a click on MenuItem. For example:

How can I create "panel menu item" like this for my MenuStrip, connected to MenuItem? It is only a standard MenuItem and standard hidden Panel with dynamic position based on the Form borders? Or is it a modified MenuItem to contain Graphics and Uri?

I searched for something like that, but I can not find how to create Panel inside a ToolStrip, and I don't know if should I create a plain Panel with menu, or there is a solution somewhere (Custom component).

Answer 1

Assuming WinForms, you can use a ToolStripControlHost to hold a Panel or a UserControl:

The control to show in the pop-up:

var panel = new Panel() {
  BackColor = Color.White,
  MinimumSize = new Size(150, 72),
  Size = MinimumSize,     
};
panel.Paint += (s, e) => {
  TextRenderer.DrawText(e.Graphics, "Pop-up Panel",
  SystemFonts.DefaultFont, panel.ClientRectangle,
  Color.Black, Color.Empty,
  TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter);
};

The ToolStrip controls to show the panel:

  var hostTool = new ToolStripControlHost(panel) {
    Padding = Padding.Empty,
    Margin = Padding.Empty
  };

  var downButton = new ToolStripDropDownButton("Panel Menu") {
    Alignment = ToolStripItemAlignment.Right,
    DisplayStyle = ToolStripItemDisplayStyle.Text,
    DropDownDirection = ToolStripDropDownDirection.BelowLeft,
  };

  ((ToolStripDropDownMenu)downButton.DropDown).ShowCheckMargin = false;
  ((ToolStripDropDownMenu)downButton.DropDown).ShowImageMargin = false;
  downButton.DropDown.AutoSize = false;
  downButton.DropDown.Size = new Size(panel.Width + 12, panel.Height + 4);
  downButton.DropDown.Items.Add(hostTool);
  var tool = new ToolStrip();
  tool.Items.Add(downButton);
  this.Controls.Add(tool);

Result: