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.

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.

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.

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.

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.

Share

About the Author

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

Hello, I'm trying really hard to change the image that represents the control once it's added to a form and so far I haven't been lucky.

I already changed the embeded bitmap to one of my choice, but as the control uses a bitmap for it's icon and my form backcolor is different than the Control color, I get a 24,24 background with my bitmap inside.

I tried to make the resource a png so this wouldn't happen and still no luck.
Is it possible to add a PictureBox as the control representation on the form? How can I achieve this, as the current icon does not suit my needs?

Besides my doubt, it's amazing the work you've done. It works awesome!

Ok just so anyone having the same issue knows, I managed to solve this problem by modifying the EyeDropper class by inheriting the PictureBox properties and removing the OnPaint method that was in charge of drawing the icon.

Now when I instantiate the class I just change the Image property and choose the icon I want!