Click here to Skip to main content
15,867,453 members
Articles / Multimedia / GDI+
Article

Gradient Maker Application

Rate me:
Please Sign up or sign in to vote.
4.72/5 (33 votes)
20 Oct 20054 min read 92.3K   3.4K   56   11
Many web pages have a color graded banner as a background. GradientMaker is a simple graphics utility that allows you to create such images. You can also add text to these images. These can also be used as banners, backgrounds or logos.

Image 1

Introduction

The .NET drawing package includes some useful classes for drawing gradients in objects. Two of these classes are the LinearGradientBrush and the PathGradientBrush. The objects we need are in the Drawing2D namespace. It will be useful to import this namespace into your gradient drawing class.

Visual C#

C#
using System.Drawing.Drawing2D;

Visual Basic .NET

VB
Imports System.Drawing.Drawing2D

Drawing a linear gradient

A LinearGradientBrush describes a gradient between a start color and an end color along a line. The slope of the line is defined by the LinearGradientMode. In each of the following examples, we assume that we are drawing on a Panel object that has already been placed on a Windows Form. This is called panel_Gradient in the C# examples and Panel_Gradient in the Visual Basic examples. We create the Rectangle for the size and location of the drawn object. Then create a LinearGradientBrush using the rectangle and some colors. We also need to set the gradient mode. Finally, we draw the rectangle using the brush.

Visual C#

C#
Graphics graphics = panel_Gradient.CreateGraphics();
Rectangle rectBrush = new Rectangle( 0, 0, 400, 200);
LinearGradientBrush brush;
brush = new LinearGradientBrush(rectBrush, Color.Black,
               Color.White, LinearGradientMode.Horizontal);
graphics.FillRectangle(brush, rectBrush);
graphics.Dispose();

Visual Basic .NET

VB
Dim graphics As Graphics = Panel_Gradient.CreateGraphics()
Dim rectBrush As New Rectangle(0, 0, 400, 200)
Dim brush As LinearGradientBrush
brush = New LinearGradientBrush(rectBrush, Color.Black, _
                Color.White, LinearGradientMode.Horizontal)
graphics.FillRectangle(brush, rectBrush)
graphics.Dispose()

Here the size of the Graphics object and the colors are hard coded. In GradientMaker, we get these parameters from the controls on the window. Also, in GradientMaker we need to redraw every time the user changes a setting or the form needs a repainting.

Drawing a path gradient

A PathGradientBrush describes a gradient between a start color and an end color at a center point. The gradient goes to an end color along a path of points. In this example, we create an array of PointF objects from the four corners of a rectangle. A PathGradientBrush is created using the array of points as a path. We then set the center color and set the center point of the gradient to the center of the rectangle. Finally, we set the surround color and draw the rectangle with the brush and our rectangle.

Visual C#

C#
Graphics graphics = panel_Gradient.CreateGraphics();
Rectangle rectBrush = new Rectangle( 0, 0, 400, 200);
PathGradientBrush brush;
PointF[] rect = { new PointF(rectBrush.Left, rectBrush.Top),
                 new PointF(rectBrush.Left, rectBrush.Height),
                 new PointF(rectBrush.Width, rectBrush.Height),
                 new PointF(rectBrush.Width, rectBrush.Top),
                 new PointF(rectBrush.Left, rectBrush.Top) };
brush = new PathGradientBrush(rect);
brush.CenterColor = Color.White;
brush.CenterPoint = new PointF((float)rectBrush.Width / 2.0f,
                              (float)rectBrush.Height / 2.0f );
brush.SurroundColors = new Color[1] { Color.Black };
graphics.FillRectangle(brush, rectBrush);
graphics.Dispose();

Visual Basic .NET

VB
Dim graphics As Graphics = Panel_Gradient.CreateGraphics()
Dim rectBrush As New Rectangle(0, 0, 400, 200)
Dim brush As PathGradientBrush
Dim rect() As PointF = {New PointF(rectBrush.Left, rectBrush.Top), _
                      New PointF(rectBrush.Left, rectBrush.Height), _
                      New PointF(rectBrush.Width, rectBrush.Height), _
                      New PointF(rectBrush.Width, rectBrush.Top), _
                      New PointF(rectBrush.Left, rectBrush.Top)}
brush = New PathGradientBrush(rect)
brush.CenterColor = Color.White
brush.CenterPoint = New PointF(rectBrush.Width / 2.0F, _
                                    rectBrush.Height / 2.0F)
brush.SurroundColors = New Color() {Color.Black}
graphics.FillRectangle(brush, rectBrush)
graphics.Dispose()

Drawing a blend

A blend controls the shading of colors across a gradient. The shading is controlled by two arrays of floats called Factors and Positions. You can define the size of these arrays in the constructor of the Blend object. The Positions array defines the percentage along the gradient line for each factor. The percentages are scaled to the range 0.0f to 1.0f. So 0.5f is half way along the gradient. The first element of the array must be 0.0f and the last element 1.0f. The elements in the Factors array set the percentage of the end color in the gradient at each position across the blend. Each of the Factors elements is in the range 0.0f to 1.0f. So 0.0f represents 100% of the start color and 1.0f represents 100% of the end color. The methods used to create the gradient are the same as in the examples above. The additional code in this example is for creating a Blend object. Set Positions and Factors and then add it to the brush.

Visual C#

C#
Graphics graphics = panel_Gradient.CreateGraphics();
Rectangle rectBrush = new Rectangle( 0, 0, 400, 200);
LinearGradientBrush brush;
brush = new LinearGradientBrush(rectBrush, Color.Black,
              Color.White, LinearGradientMode.Horizontal);
// Add blend
Blend blend = new Blend(9);
blend.Positions[0] = 0.0f;
blend.Positions[1] = 0.125f;
blend.Positions[2] = 0.25f;
blend.Positions[3] = 0.375f;
blend.Positions[4] = 0.5f;
blend.Positions[5] = 0.625f;
blend.Positions[6] = 0.75f;
blend.Positions[7] = 0.875f;
blend.Positions[8] = 1.0f;
blend.Factors[0] = 0.0f;
blend.Factors[1] = 0.2f;
blend.Factors[2] = 0.4f;
blend.Factors[3] = 0.6f;
blend.Factors[4] = 0.7f;
blend.Factors[5] = 0.8f;
blend.Factors[6] = 0.9f;
blend.Factors[7] = 0.95f;
blend.Factors[8] = 1.0f;
brush.Blend = blend;
graphics.FillRectangle(brush, rectBrush);
graphics.Dispose();

Visual Basic .NET

VB
Dim graphics As Graphics = Panel_Gradient.CreateGraphics()
Dim rectBrush As New Rectangle(0, 0, 400, 200)
Dim brush As LinearGradientBrush
brush = New LinearGradientBrush(rectBrush, Color.Black, _
                 Color.White, LinearGradientMode.Horizontal)
' Add blend
Dim blend As New Blend(9)
blend.Positions(0) = 0.0F
blend.Positions(2) = 0.25F
blend.Positions(3) = 0.375F
blend.Positions(4) = 0.5F
blend.Positions(5) = 0.625F
blend.Positions(6) = 0.75F
blend.Positions(7) = 0.875F
blend.Positions(8) = 1.0F
blend.Factors(0) = 0.0F
blend.Factors(1) = 0.2F
blend.Factors(2) = 0.4F
blend.Factors(3) = 0.6F
blend.Factors(4) = 0.7F
blend.Factors(5) = 0.8F
blend.Factors(6) = 0.9F
blend.Factors(7) = 0.95F
blend.Factors(8) = 1.0F
brush.Blend = blend
graphics.FillRectangle(brush, rectBrush)
graphics.Dispose()

In this example the positions increase linearly across the gradient. But the factors form an approximate curve.

Drawing a text gradient

Text can also be drawn using a gradient brush. This example first finds the size of the rectangle to hold the text, given a font. A rectangle is then created using the size and the location for the text. We then create the gradient brush using the same methods that are used in the above examples. Finally, we use the DrawString method with the font, brush and rectangle that we have created.

Visual C#

C#
Graphics graphics = panel_Gradient.CreateGraphics();
string text = "automationControls";
Font textFont = new Font("Arial", 24);
SizeF textSize = graphics.MeasureString(text, textFont);
PointF textLocation = new PointF(10.0f, 10.0f);
RectangleF textArea = new RectangleF(textLocation, textSize);
LinearGradientBrush textBrush;
textBrush = new LinearGradientBrush(textArea, Color.Black,
               Color.White, LinearGradientMode.Horizontal);
graphics.DrawString(text, textFont, textBrush, textArea);
graphics.Dispose();

Visual Basic .NET

VB
Dim graphics As Graphics = Panel_Gradient.CreateGraphics()
Dim text As String = "automationControls"
Dim textFont As New Font("Arial", 24)
Dim textSize As SizeF = graphics.MeasureString(text, textFont)
Dim textLocation As New PointF(10.0F, 10.0F)
Dim textArea As New RectangleF(textLocation, textSize)
Dim textBrush As LinearGradientBrush
textBrush = New LinearGradientBrush(textArea, Color.Black, _
                    Color.White, LinearGradientMode.Horizontal)
graphics.DrawString(text, textFont, textBrush, textArea)
graphics.Dispose()

Conclusion

The basic objects for creating a gradient are the LinearGradientBrush and the PathGradientBrush. These can be used in the draw methods of a Graphics object. The GradientMaker application uses these objects and allows you to set the parameters from the controls on a form. You can view the source code for GradientMaker which is available from automationControls.

History

  • Version 1.0: September 2005 - AutomationControls project: 05_0002 GradientMaker.
  • Version 1.1: September 2005 - Added the following options to the application and help file:
    • Multi-line text
    • Text justification
    • Text rotation
    • Alpha option for text colors

    These options were added following the comments of Kevin Ashaman.

  • Version 1.2: October 2005 - Added the following options to the application and help file:
    • Allow the scrolling of just the image (not the whole window) if the image overflows the window
    • Example image blends
    • Anti-Alias modes for text
    • Example text blends

    These options were added following the comments of Axel Reitschin and F. W. Southern.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionget the CSS code Pin
ADemontis14-Aug-21 23:27
professionalADemontis14-Aug-21 23:27 
GeneralMy vote of 5 Pin
victorbos10-Oct-12 4:12
victorbos10-Oct-12 4:12 
GeneralMy vote of 5 Pin
Nasenbaaer28-Oct-11 4:12
Nasenbaaer28-Oct-11 4:12 
GeneralMy vote of 4 Pin
FlupkeDev24-May-11 2:00
FlupkeDev24-May-11 2:00 
GeneralMy vote of 1 Pin
eusta8-Dec-08 4:36
eusta8-Dec-08 4:36 
GeneralExisting image change backgroud Pin
Waheed Iqbal17-May-07 3:41
Waheed Iqbal17-May-07 3:41 
GeneralMore suggestions Pin
Axel Rietschin6-Oct-05 3:05
professionalAxel Rietschin6-Oct-05 3:05 
GeneralUI suggestions Pin
fwsouthern5-Oct-05 18:27
fwsouthern5-Oct-05 18:27 
Generalnice Pin
ha_ha_ha15-Sep-05 17:37
ha_ha_ha15-Sep-05 17:37 
GeneralRotated Text and Opacity settings Pin
Ashaman13-Sep-05 1:54
Ashaman13-Sep-05 1:54 
I am pretty impressed with the flexibility in building the gradient blends.

The only think I can think of that I think is crucial is to support rotated text with the alignment controls meaning 'bottom', 'center', and 'top', of course.

When I first saw this article, I thought "hot dog, I'm gonna build a super quick replacement for the background on the SharePoint 'Quick Launch' bar. But... I gotta have rotated text with opacity. Sure, I can do that with Photoshop, but your app makes it so fast, I'd love to see that one more thing.

-Kevin
GeneralRe: Rotated Text and Opacity settings Pin
Ashaman30-Sep-05 1:29
Ashaman30-Sep-05 1:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.