How to put an image beside the text of a ToolStripMenuItem (or similar control)?

Question

I know that it's possible to add an image to a ToolStripMenuItem, like in the "Close All Documents" item in the image below:

However, what I would like to achieve is something like this:

That is to place the image to the side of the item's text, but without overlapping the check space. I have searched a bit but couldn't find a Winforms control that can do this. Can you point me to any? Or do I have to implement my own? Thank you.

EDIT: thanks everyone for the answers! I will accept one after the weekend.

Answer 1

You have to use some custom painting. There are some ways to implement this, however I would like to introduce to using some custom ToolStripRenderer. The following is just a demo code, you can improve it yourself. I save each inner Image in the corresponding Item's Tag for convenience:

public class CustomRenderer : ToolStripProfessionalRenderer
{
    int innerImagePadding = 2;
    protected override void OnRenderItemText(ToolStripItemTextRenderEventArgs e) {
        Image img = e.Item.Tag as Image;
        if(img == null) base.OnRenderItemText(e);
        else {
          e.Graphics.DrawImage(img, e.Item.ContentRectangle.Left + e.Item.Bounds.Height + innerImagePadding,
                               e.Item.ContentRectangle.Top + innerImagePadding, 
                               Math.Max(1, e.Item.ContentRectangle.Height - innerImagePadding*2), 
                               Math.Max(1, e.Item.ContentRectangle.Height - innerImagePadding*2));              
          Rectangle textRect = new Rectangle(e.Item.ContentRectangle.Left + e.Item.Bounds.Height*2, 
                               e.Item.ContentRectangle.Top +1, 
                               e.TextRectangle.Width, 
                               e.TextRectangle.Height);
          e.Graphics.DrawString(e.Text, e.TextFont, new SolidBrush(e.TextColor), textRect);
       }
    }
}

//Usage
ContextMenuStrip cm = new ContextMenuStrip();
cm.Items.Add(new ToolStripMenuItem("Clear all", myImage) {Tag = myImage});
cm.Items.Add(new ToolStripMenuItem("Remove all", myImage){Tag = myImage});
this.ContextMenuStrip = cm; //set the ContextMenuStrip for the form
//set the custom Renderer
cm.Renderer = new CustomRenderer();

Answer 2

You can't do it from the designer, but you can show the extra margins by casting the parent DropDown property to a ToolStripDownDownMenu item to access the Show properties:

public Form1() {
  InitializeComponent();
  ((ToolStripDropDownMenu)FileMenuItem.DropDown).ShowCheckMargin = true;
  ((ToolStripDropDownMenu)FileMenuItem.DropDown).ShowImageMargin = true;
}

Result: