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
eyedropper1.PreviewPositionStyle = ePreviewPositionStyle.Centered;
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.
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:
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 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.
ScreenCaptured event passes two parameters to the listener(s):
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.
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.