toolStrip to have menuStrip gradient background

Question

I have a form with a menu and a toolstrip at the top. The menuStrip has a nice looking gradient background, how can I get the same effect on the toolStrip control? I know about the RenderMode property but changing this doesn't have the desired result.

Answer 1

You can achieve this with a custom renderer.

public class CustomToolStripRenderer : ToolStripProfessionalRenderer
{
    public CustomToolStripRenderer() { }

    protected override void OnRenderToolStripBackground(ToolStripRenderEventArgs e)
    {
        //you may want to change this based on the toolstrip's dock or layout style
        LinearGradientMode mode = LinearGradientMode.Horizontal;

        using (LinearGradientBrush b = new LinearGradientBrush(e.AffectedBounds, ColorTable.MenuStripGradientBegin, ColorTable.MenuStripGradientEnd, mode))
        {
            e.Graphics.FillRectangle(b, e.AffectedBounds);
        }
    }
}

Then set your toolstrip to use an instance of this renderer.

public Form1()
{
    InitializeComponent();

    CustomToolStripRenderer r = new CustomToolStripRenderer();
    r.RoundedEdges = false;

    toolStrip1.Renderer = r;
}