Tuesday, February 17, 2004

I know that I promissed to show the code that will draw a gradient background similar to this in the managed control. The key method here is filling a rectangle with a gradient colors. A while back I posted a managed implementation of that which has evolved into something more usefull:

public static void DrawGradient(Graphics g, Color color1, Color color2, Rectangle rect)

{

      Pen pen = null;

      //draw the lines

      for(int i=0;i<rect.Width;i++)

      {

            Color currColor = InterpolateLinear(color1, color2, (float)i, (float)0,  (float)rect.Width);

            pen = new Pen(currColor);

            g.DrawLine(pen, rect.X + i, rect.Top, rect.X + i, rect.Bottom );

            pen.Dispose();

      }

}

And here's the method that would return a required color with a simple interpolation:

public static Color InterpolateLinear(Color first, Color second, float position, float start, float end)

{

      float R = ((second.R)*(position - start) + (first.R)*(end-position))/(end-start);

      float G = ((second.G)*(position - start) + (first.G)*(end-position))/(end-start);

      float B = ((second.B)*(position - start) + (first.B)*(end-position))/(end-start);

 

      return Color.FromArgb((int)Math.Round((double)R), (int)Math.Round((double)G), (int)Math.Round((double)B));

 

}

 

And at last the method that will create a bitmap with gradient stripes:

 

public static Bitmap CreateGradBackground(Rectangle rc, Color colStart, Color colEnd)

{

      //Initialize gradient line + white space

      Bitmap bmpLine = new Bitmap(rc.Width, 4);

      Graphics gxLine = Graphics.FromImage(bmpLine);

      gxLine.Clear(Color.White);

      //Initialize Backgound bitmap

      Bitmap bmpBack = new Bitmap(rc.Width, rc.Height);

      Graphics gxBack = Graphics.FromImage(bmpBack);

      gxBack.Clear(Color.White);

                 

      //gradient line rectangle

      Rectangle rcLine = new Rectangle(0, 0, rc.Width, 2);

      //draw gradient

      ControlPaint.DrawGradient(gxLine, colStart, colEnd, rcLine);

      //Calculate half color

      Color halfColor = Color.FromArgb((colStart.R + colEnd.R) / 2, (colStart.G + colEnd.G) / 2, (colStart.B + colEnd.B) / 2);

      //Draw that next to line

      ControlPaint.DrawGradient(gxLine, colStart, halfColor, new Rectangle(0, 2, rc.Width, 2));

 

      //Fill the whole backround with prepared lines

      for(int i=0;i<rc.Height;i++)

      {

            gxBack.DrawImage(bmpLine, 0, i);

            i+=3;

      }

      gxLine.Dispose();

      gxBack.Dispose();

      return bmpBack;

}

 

The next question comes to mind is how can we identify the gradient colors that're currently set in the system? The answer is located in the themes xml configuration files that are available on PPC2003 and Smartphone devices. The settings for COLOR_GRADLEFT and COLOR_GRADRIGHT attributes should give you the missing values for colStart and colEnd parameters. I'll show you how to retrieve these values from xml file and convert them to a managed Color in my next blog post.

Anyway you can use this technique for creating gradient backgrounds for your custom owner-drawn controls or if you'd like, in the ListBoxEx control that comes with SDF.

 

 

 
2/17/2004 5:09:21 PM (GMT Standard Time, UTC+00:00)  #     |