C# ToolStripPanel Drawing Question

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

Check the color depth of your setup. We had a similar issue on systems that didn't have 32-bit color. Anything less than 32-bit color, resulted in subtle differences. 32-bit color systems looked fine.

We never did find a solution, but maybe you can push the 32-bit color requirement onto your users. ;-)

Answer 2

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...