Recipe 9.13. Using Gradients for Smooth Color Changes

Problem

You want to fill a graphics area with colors that smoothly transition from one shade to another.

Solution

Sample code folder: Chapter 09\SmoothColor

Create a GraphicsPath object, use it to create and define a PathGradientBrush, set the various colors of the brush, and then use the new gradient brush to fill a graphics area.

Discussion

The PathGradientBrush object enables a lot of creative color transitions in your graphics. The code in this recipe provides a good starting point for further experimentation.

Some of these objects require referencing the Drawing2D namespace, so be sure to add the following Imports statement to the top of your source code:

 Imports System.Drawing.Drawing2D 

This example dynamically updates the gradient fill as you move the mouse over the face of the form. To do this, the mouse position is recorded with each MouseMove event, and the form repaints itself by calling its Refresh() method:

 ' ----- Keep track of the mouse position. Private MouseX As Integer Private MouseY As Integer Private Sub Form1_MouseMove(ByVal sender As Object, _       ByVal e As System.Windows.Forms.MouseEventArgs) _       Handles Me.MouseMove    ' ----- Record the mouse position.    MouseX = e.X    MouseY = e.Y    ' ----- Cause a repaint of the form.    Me.Refresh() End Sub 

The form's Paint event handles the important details of the gradient color fill. Let's take this step by step.:

1. The Paint event is called with each move of the mouse:

         Private Sub Form1_Paint(ByVal sender As Object, _            ByVal e As System.Windows.Forms.PaintEventArgs) _            Handles Me.Paint 

   
   

2. The graphics path can be any shape, even discontinuous rectangles, ellipses, and so on. In this case the path is defined as the rectangle around the edge of the form's client area:

            ' ----- Create path around edge of form's client area.         Dim thePath As New GraphicsPath         thePath.AddRectangle(Me.ClientRectangle) 

   
   

3. The PathGradientBrush is created using the predefined path. The object uses this geometric information internally to determine smoothly transitioning colors for all pixel locations during drawing:

            ' ----- Use the path to construct a gradient brush.         Dim smoothBrush As PathGradientBrush = _            New PathGradientBrush(thePath) 

   
   

4. You can define one point in the center of the brush area to have a specific color. Here, set the point under the mouse cursor to White. Colors will transition away from white based on distance from the mouse cursor to the edges of the path:

            ' ----- Set the color at the mouse point.         smoothBrush.CenterPoint = New PointF(MouseX, MouseY)         smoothBrush.CenterColor = Color.White 

   
   

5. One or more colors can be set along the path using the SurroundColors property of the PathGradientBrush object. Set an array of four colors, so each corner of the form provides a standard color:

            ' ----- Set a color along the entire boundary of the path.         Dim colorArray() As Color = _            {Color.Red, Color.Green, Color.Blue, Color.Yellow}         smoothBrush.SurroundColors = colorArray 

   
   

6. The new PathGradientBrush is used to fill the rectangular area of the form, and all pixels on the form are set to a smoothly transitioned shade depending on the geometry and settings made earlier in the code:

            ' ----- Fill form with gradient path.         e.Graphics.FillRectangle(smoothBrush, Me.ClientRectangle)      End Sub 

   
   

7. To have the effect update smoothly, set the form's DoubleBuffered property to true. Figure 9-21 shows the form's appearance as the mouse is moved around on it.

Figure 9-21. Color gradients open the door to many special color-shading effects