Winforms ToolStripSplitButton displays with a grey line under it, and is only raised on when the mouse hovers over it

Question

I'm trying to figure out the ToolStripSplitButton. The purpose is to display a usercontrol gauge when a ToolStripSplitButton is pressed. However, no matter what settings I try, there is a grey line visible below the button.

The ToolStrip itself is set to RenderMode.System, is not docked, and the ToolStripSplitButton is the only component in it.

I can remove the line by introducing a custom ToolStripRenderer class, but this seems like a total overkill for removing this single annoying dark grey line under the control.

I realize it might be a total shot in the dark since I don't provide the rest of the gazillion settings for these components, but I was hoping someone could provide insight into why this control is behaving the way it does.

My second question is regarding the behaviour of the ToolStripSplitButton. Is there any way to avoid the flat and borderless look that the component displays before the mouse hovers over it? I'm trying to give it a uniform look along with the rest of the buttons in the panel, and the ToolStripSplitButton only appears raised when the mouse cursor is placed above the component.

Here's a screenshot:

ToolStripSplitButton flawed

Any help is greatly appreaciated!

score 2 · Answer 1 · answered Oct 14 '09 at 23:35

/// <summary>
/// This class provides custom rendering code for the ToolStrip and ToolStripDropDownButton because the standard windows
/// rendering gave it a very flat look.
/// </summary>
public class CustomToolStripRenderer : ToolStripRenderer {
    ToolStripDropDownButton toolStripDDButton;

    public CustomToolStripRenderer(ToolStripDropDownButton toolStripDropDownButton) : base() {
        toolStripDDButton = toolStripDropDownButton;
    }

    //protected override void OnRenderButtonBackground(ToolStripItemRenderEventArgs tsirea) {
    //    // Check if the item is selected or hovered over.
    //    if (tsirea.Item.Selected || tsirea.Item.Pressed) {
    //        LinearGradientBrush brush = new LinearGradientBrush(tsirea.Item.Bounds, Color.DarkBlue, Color.DarkGreen, 90);
    //        tsirea.Graphics.FillRectangle(brush, 0, 0, tsirea.Item.Width, tsirea.Item.Height);
    //    }
    //}

    protected override void OnRenderToolStripBackground(ToolStripRenderEventArgs tsrea) {
        // This event occurs before the OnRenderDropDownButtonBackground event...

        if (toolStripDDButton.Pressed) {
            base.OnRenderToolStripBackground(tsrea);
        }
        else if (toolStripDDButton.Selected) {
            ControlPaint.DrawButton(tsrea.Graphics, tsrea.AffectedBounds, ButtonState.Normal);
        }
        else {
            ControlPaint.DrawButton(tsrea.Graphics, tsrea.AffectedBounds, ButtonState.Normal);
        }
    }

    //protected override void OnRenderDropDownButtonBackground(ToolStripItemRenderEventArgs tsirea) {
    //    // Happens every time the button is hovered over as well, and upon mouseleave

    //    //ControlPaint.DrawButton(tsirea.Graphics, tsirea.Item.ContentRectangle, ButtonState.Normal);
    //    base.OnRenderDropDownButtonBackground(tsirea);
    //}

    protected override void OnRenderToolStripBorder(ToolStripRenderEventArgs tsrea) {
        //This event occurs after the OnRenderDropDownButtonBackground event...
        //Thus it will paint over whatever is already painted in the OnRenderDropDownButtonBackground event.

        //Debug.Println("OnRenderToolStripBorder");
        if (toolStripDDButton.Pressed) {
            // Draw the top and left borders of the component so that it looks like a tab page:
            tsrea.Graphics.DrawLine(SystemPens.ControlDarkDark, tsrea.AffectedBounds.Left, tsrea.AffectedBounds.Top, tsrea.AffectedBounds.Left, tsrea.AffectedBounds.Bottom);
            tsrea.Graphics.DrawLine(SystemPens.ControlDarkDark, tsrea.AffectedBounds.Left, tsrea.AffectedBounds.Top, tsrea.AffectedBounds.Right, tsrea.AffectedBounds.Top);
        }
        base.OnRenderToolStripBorder(tsrea);
    }

}

score 1 · Accepted Answer · answered Jul 14 '09 at 05:40

For anyone interested, I ended up creating a custom ToolStripRenderer class after all. Here I had to override several methods to get the wanted result, and the result came out pretty nice. To draw the button outline I simply used ControlPaint, and for the dropped-down tab-like look I drew some lines with the ControlDarkDark system color. Not to get into the gory details, there are several tutorials out there describing this already. Now, it does seem weird that to get a button-like behaviour from a ToolStripDropDownButton one has to do the drawing oneself, but I'm not ruling out that a setting might have clashed with another somewhere.

I can post the code if anyone is interested.

Winforms ToolStripSplitButton displays with a grey line under it, and is only raised on when the mouse hovers over it

2 Answers2