Click here to Skip to main content
14,210,839 members
Click here to Skip to main content
Posted 9 Feb 2006


40 bookmarked

Photoshop-Like Gradient Editor

Rate this:
4.29 (14 votes)
Please Sign up or sign in to vote.
4.29 (14 votes)
16 Feb 2006     Ms-RL    
A Photoshop-like gradient builder control for paint applications.


I'm presently in the design stage of a huge smart-client application, with tons of stunning UIs. Looking at the UI designs, it quickly became obvious that I'd have to spend a lot of time writing code to paint gradient fills, which seem to be quite hot among graphic designers these days. And it's not hard to understand why; the difference they make to a UI is quite spectacular.

So faced with the potential nightmare of having to paint everything from a simple Label to a complex container control, I started on a small GUI library, which I code named Inferno. The idea was to build several controls inherited from the classes in System.Windows.Forms, and to attach design-time configurable gradient fills. So for instance, instead of the usual BackColor property, a Label would have a BackGraident property. Well hopefully, in the near future I'd be able to post the entire library here. Keep your fingers crossed…

So this article is about the very first widget I cooked up. Although, it was originally built to be used as a UITypeEditor for my Gradient class, I'm sure many people could find a use for it in any form of graphics applications that they maybe building.

How it ticks

The GradientBuidler class is a custom painted control which is split horizontally into two rectangular areas, called the gradientBarRect and the markerStrip.

The marker strip area is where the user can insert new color steps on to the gradient. He could basically double click on any point right below the gradient preview, to insert a new marker (which defaults to the exact color of the gradient just above it). The markers, other than the start and end markers could be moved along the marker strip to fine tune the gradient.

The preview of the gradient is painted on to the gradientBarRect in a discretionary manner. When the gradient is changed, the new gradient is painted on to a Bitmap object which is then painted on to the gradient bar area. The Bitmap object serves as a cached snapshot of the gradient, greatly improving the performance of the paint operation when the control has to repaint itself. Incidentally, this behavior was not present in my actual UITypeEditor as it would only need to be displayed for a very short amount of time.

The code also includes the TypeEditor developed by Emmanuel Tissandier for displaying the color picker.

Using the gradient editor

The gradient editor is set to expose an object of type Gradient. The Gradient class contains several methods that you can use while performing common fill operations:

  • public void FillRectangle( Graphics g, Rectangle rect )
  • public void FillRegion( Graphics g, Region rgn )
  • public void FillPath( Graphics g, GraphicsPath path )

If on the other hand you require more flexibility, you can obtain a handle to either a LinearGradientBrush or a PathGradientBrush object by using,

  • public PathGradientBrush GetPathGradientBrush( GraphicsPath path )
  • public LinearGradientBrush GetLinearGradientBrush(Rectangle rect)

You would then of course be responsible for disposing of the brush once you're done. ;)

Handle the GradientChanged event of the GradientEditor to redraw your graphics when the user makes changes to the Gradient. By setting the SilentMarkers property to false (default) you could make the control fire this event even as a marker is being dragged.

A word about the demo

The demo app I've included is perhaps too simple for anybody's liking. Painting on a Panel by handling its Paint event is not the most optimal way to go. I've only done it to keep things as simple as possible. If you are writing a real graphics app, I recommend that you use one of the many great canvas classes CodeProject seems to have.


This article, along with any associated source code and files, is licensed under Microsoft Reciprocal License


About the Author

Sri Lanka Sri Lanka
No Biography provided

Comments and Discussions

QuestionSmall Bug OnResize Pin
Member 1080675315-Oct-15 9:18
memberMember 1080675315-Oct-15 9:18 
GeneralError Pin
Ehsan Golkar16-Feb-06 8:33
memberEhsan Golkar16-Feb-06 8:33 
GeneralRe: Error Pin
sameeraperera16-Feb-06 15:37
membersameeraperera16-Feb-06 15:37 
GeneralRe: Error Pin
Ehsan Golkar16-Feb-06 19:23
memberEhsan Golkar16-Feb-06 19:23 
GeneralRe: Error Pin
sameeraperera16-Feb-06 19:46
membersameeraperera16-Feb-06 19:46 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190618.1 | Last Updated 17 Feb 2006
Article Copyright 2006 by sameeraperera
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid