Click here to Skip to main content
Click here to Skip to main content

Photoshop-Like Gradient Editor

, 16 Feb 2006
Rate this:
Please Sign up or sign in to vote.
A Photoshop-like gradient builder control for paint applications.

Introduction

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. Wink | ;)

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.

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

Share

About the Author

sameeraperera
Architect
Sri Lanka Sri Lanka
No Biography provided

Comments and Discussions

 
GeneralError PinmemberEhsan Golkar16-Feb-06 8:33 
GeneralRe: Error Pinmembersameeraperera16-Feb-06 15:37 
GeneralRe: Error PinmemberEhsan Golkar16-Feb-06 19:23 
GeneralRe: Error Pinmembersameeraperera16-Feb-06 19:46 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140826.1 | Last Updated 17 Feb 2006
Article Copyright 2006 by sameeraperera
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid