Question

I am trying to get a ToolStripPanel to have the same drawing style as the embedded ToolStrips, so that it looks like one continuous bar. I have the ToolStrips using the ToolStripProfessionalRenderer so that they are styled the same as the Windows Task Bar.

I have gotten close by creating a new Renderer derived from ToolStripProfessionalRenderer:

   class CustomRenderer : ToolStripProfessionalRenderer
   {
      protected override void OnRenderToolStripPanelBackground(ToolStripPanelRenderEventArgs e)
      {
         base.OnRenderToolStripPanelBackground(e);

         LinearGradientBrush lgb = new LinearGradientBrush(e.ToolStripPanel.ClientRectangle, this.ColorTable.ToolStripGradientBegin, this.ColorTable.ToolStripGradientEnd, LinearGradientMode.Vertical);
         e.Graphics.FillPath(lgb, e.ToolStripPanel.ClientRectangle);
      }
   }

This creates the gradient look with the correct colors, but they do not match up quite right. It seems as if the gradient has a higher number of colors, so the spread is drawn out longer.

I have accounted for the border of the ToolStrips (which is not shown in this code), yet they still don’t match up quite right.

Anyone know how to make this happen?

Answer 1

I finally figured this out — and I seems so obvious now.

The ColorTable in the ToolStripPanelProfessionalRenderer has three colors we are interested in:

ColorTable.ToolStripGradientBegin
ColorTable.ToolStripGradientMiddle
ColorTable.ToolStripGradientEnd

The background needs to be painted in two parts — the top gradient, and the bottom gradient.

The top goes from the ‘Begin’ color to the ‘Middle’ color, and the bottom goes from the ‘Middle’ color to the ‘End’ color.

Looks perfect…