Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / Windows Forms

Adobe Eyedropper Control

Rate me:
Please Sign up or sign in to vote.
4.35/5 (9 votes)
18 May 2009CPOL3 min read 37.5K   1.3K   28   8
A screen picker control that can be dropped into any .NET project.

eyedropper_example.JPG

Introduction

While there are a lot of articles about color pickers and dialogs, the eyedropper is rarely included. If it is included, it's usually hard wired into the color picker, making it difficult to drop into other projects. The current graphics application that I'm working on called for an eyedropper, so after some Googling and CodeProject research, I decided to create my own custom eyedropper control. I've called this Adobe Eyedropper control because the eyedropper image is actually screen copied from Adobe Photoshop. Okay, enough said, let's get right into the code.

Using the Code

You'll notice that the eyedropper control is stored in an assembly file (.dll). This is due to the fact that a custom cursor is used when capturing the screen. Even though loading a custom cursor is not that complex, managing all the details can be pretty annoying. I wanted this control to be fully functional once the developer dropped it into their project. Let's discuss some of the properties and events of the eyedropper.

The Pixel Preview Window

The control comes with a pop-up window that gives us feedback on the pixel that is being captured. By default, the window will center itself above the eyedropper control before hovering. We have several options for positioning the window with the PreviewPositionStyle property.

C#
eyedropper1.PreviewPositionStyle = ePreviewPositionStyle.Centered;

If PreviewPositionStyle is set to Manual, you can specify the exact location of the window through the PreviewLocation property. Keep in mind that the value of PreviewLocation is relative to the upper-left corner of the eyedropper control.

C#
eyedropper1.PreviewPositionStyle = ePreviewPositionStyle.Manual;
eyedropper1.PreviewLocation = new Point(100, 250);

By default, the pixel preview window will display two items: the captured color from the screen, and a magnified view of the surrounding screen area. These settings can be altered with the following properties:

  • ShowColorPreview
  • ShowPixelPreview
  • PixelPreviewSize
  • PixelPreviewZoom

The first two properties should be self explanatory, so we'll discuss the last two. The PixelPreviewSize property specifies how much screen real estate to capture. There would really be no need to have a preview of the pixels if we couldn't zoom in on the captured area. PixelPreviewZoom allows us to specify how much to zoom in on the captured area. As you would expect, the zoom value is represented by a float value. For example, a value of 1.0 will not apply any zoom. All values greater than 1.0 will zoom in.

Trapping Screen Capture Events

Once the eyedropper begins capturing pixels, you can trap the event with the SelectedColorChange event. This basic event fires for notification purposes only. However, if the situation calls for more detail, you can trap the following events:

  • BeginScreenCapture
  • ScreenCaptured
  • EndScreenCapture

The BeginScreenCapture event fires when the user presses the left mouse button over the eyedropper control. The ScreenCaptured event fires every time the mouse moves to a different location. The EndScreenCapture event fires when a mouse up event occurs.

The ScreenCaptured event passes two parameters to the listener(s):

C#
private void eyeDropper1_ScreenCaptured(Bitmap capturedPixels, Color capturedColor)
{

}

This came in handy the other day when I was developing a Photoshop like color picker. In case you are unfamiliar with Photoshop, there are two panels on the color picker surface: one panel shows the original color, and the other shows alterations made to the original color. I thought the interface would look more appealing to show the captured pixel color in the top panel and paint the captured pixels in the bottom (original color) panel.

color_picker_preview.JPG

If you are still in question about any of the features that have been discussed, I encourage you to download the demo project. With it, you can easily make changes to all the relevant properties of the eyedropper in a visual way.

That's it folks! I trust you will find this article helpful in your own projects. Please take time to rate the article because it's my only feedback on how helpful it has been.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Unity3 Software
United States United States
Richard Blythe is founder and CEO of Unity3 Software.
In his spare time he enjoys flying Cessna 172s, reading, playing his Taylor acoustic guitar and recording music. He's latest non-computer endeavor is to learn violin. (Ouch)

Comments and Discussions

 
QuestionControl Image Pin
webflashing28-Oct-12 19:02
webflashing28-Oct-12 19:02 
AnswerRe: Control Image Pin
webflashing29-Oct-12 13:04
webflashing29-Oct-12 13:04 
QuestionThanks Pin
kpbiju6-Mar-12 22:31
kpbiju6-Mar-12 22:31 
GeneralLicence Pin
tamilpuyal_2826-Aug-10 3:13
tamilpuyal_2826-Aug-10 3:13 
GeneralRe: Licence Pin
Richard Blythe26-Aug-10 5:23
Richard Blythe26-Aug-10 5:23 
GeneralRe: Licence Pin
tamilpuyal_2827-Aug-10 19:32
tamilpuyal_2827-Aug-10 19:32 
QuestionDemo Pin
dethtroll18-May-09 15:50
dethtroll18-May-09 15:50 
AnswerRe: Demo Pin
Richard Blythe19-May-09 4:47
Richard Blythe19-May-09 4:47 

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.