Click here to Skip to main content
15,395,065 members
Articles / Programming Languages / C#
Posted 11 Feb 2007


38 bookmarked

C# ColorPicker Gadget

Rate me:
Please Sign up or sign in to vote.
3.56/5 (19 votes)
11 Feb 2007CPOL4 min read
A ColorPicker Gadget for the Windows Vista Sidebar, written in C#

ColorPicker Gadget screenshot


This gadget is based on my article, "Pure C# .NET Desktop Color Picker With Magnifying Glass". It uses the MagnifyingGlass class and the Windows API methods (because Windows is a system requirement to run as Windows Vista Sidebar Gadget ;).

After running the gadget in your sidebar, you see the current selected color. You may select another color by clicking the color preview panel from the default Windows color dialog. To select a color from the desktop, simply click on the pipette button to enter the select mode. In the select mode, you'll see two magnifying glasses: one following the cursor, another fixed one in the gadget GUI. The gadget will also display the color of the current pixel in the preview panel on the right side. Just click to quit the exit the select mode and select the color of the pixel under the mouse cursor. To copy a color value to the Windows clipboard, just click on it in the gadget GUI.

The ColorPicker Gadget may be useful for designers to get color values fast and easy, every time from everywhere.

Using the Code

You can download only the source or the complete gadget with an installer, including the source. If you choose to install the complete gadget, you'll find the source zipped in the application folder (f.e. "C:\Program files\Andreas Zimmermann\ColorPicker Gadget\") after installing. After unzipping the source, you find all gadget files that will be copied by the Vista installer in the subfolder "Gadget". All other files are the Visual Studio project files for the ColorPickerGadget.dll.

Please have a look at my article, "Pure C# .NET Desktop Color Picker With Magnifying Glass", if you want to get information about how to use the MagnifyingGlass class.

A way to display a C# user control within the gadgets HTML is to make the DLLs COM visible and register the class, so you can use the object HTML tag like this:

<object classid="clsid:fc720f6d-e15d-4b4d-82af-
    4dff1fb3db4d" width="120" height="78" />

I used this class header for the COM:

public partial class Gadget : UserControl

While writing the code, I didn't care much about the fact that the application will run as Sidebar Gadget. The only one target was to make the GUI as small as possible (120 x 100 pixel should be small enough), but to include as many functions as possible, too.

The only real problem I had was the installation: How would the user be able to install the gadgets only with a few mouse clicks and without caring about how it works? Simply zipping the files and changing the extension to ".gadget" was no solution because the COM classes have to be registered to get them working. So I decided so make an MSI installer that will prepare the use of the gadget. After the installer finished, the folder with the shortcut to the .gadget-file will be opened (for this, I created the class Setup within the ColorPickerGadget.dll). Finally, the user needs to click on "Use ColorPicker Gadget" to install the gadget to the Sidebar.

Points of Interest

This was my first attempt to get something running in the Sidebar. And I had some problems with doing that... So if you want to develop your own gadget, you may be interested in this:

Transparent Background

If you want to use a transparent background, you use something like this:

<g:background src="images/tbg.png" style=
    top:0px;z-index:-999;" />

Don't show any text or links on this transparent background, it'll look ugly: Place text elements on a coloured background always.


I had some problems using CSS for defining a style for text links: The hover behavior was ignored. I don't know the reason yet, but maybe you'll have similar problems with other CSS attributes...

Use of an COM Object as GUI

At first, the ColorPicker Gadgets GUI was only made of the .NET user control. But then I realized that no options (for moving, closing, etc.) are fading if I hover the GUI while it's used as Sidebar Gadget. At last, it seems you need to view a small non-user control area (finally, the on the ColorPicker Gadget GUI bottom) to enable the user closing and configuring the gadget.

Another problem is that - like I wrote above - it may not be enough to zip and change the file extension to ".gadget" to have an installer. If you want to use COM objects that are not yet trusted at the target system, they won't work! I chose an MSI installer for preparing the gadget as a solution.


  • 11th February, 2007: Initial version


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


About the Author

Web Developer
Germany Germany
No Biography provided

Comments and Discussions

GeneralGood control Pin
Pouriya Ghamary11-Mar-11 5:53
MemberPouriya Ghamary11-Mar-11 5:53 
GeneralAnother good color picker Pin
Viper30003-Jun-07 14:29
MemberViper30003-Jun-07 14:29 
QuestionCannot install color picker gadget Pin
Heidi Reyes3-Mar-07 21:52
MemberHeidi Reyes3-Mar-07 21:52 
QuestionRe: Cannot install color picker gadget [modified] Pin
nd12795-Mar-07 4:47
Membernd12795-Mar-07 4:47 
AnswerRe: Cannot install color picker gadget Pin
Heidi Reyes5-Mar-07 5:12
MemberHeidi Reyes5-Mar-07 5:12 
GeneralRe: Cannot install color picker gadget Pin
nd12795-Mar-07 21:46
Membernd12795-Mar-07 21:46 
GeneralRe: Cannot install color picker gadget Pin
Heidi Reyes6-Mar-07 21:00
MemberHeidi Reyes6-Mar-07 21:00 
GeneralRe: Cannot install color picker gadget Pin
nd12797-Mar-07 6:46
Membernd12797-Mar-07 6:46 
GeneralRe: Cannot install color picker gadget Pin
Heidi Reyes10-Mar-07 18:09
MemberHeidi Reyes10-Mar-07 18:09 
AnswerRe: Cannot install color picker gadget Pin
nd127911-Mar-07 0:19
Membernd127911-Mar-07 0:19 
GeneralGo Go Gadget Eye Dropper Pin
dragonsbait2-Mar-07 0:54
Memberdragonsbait2-Mar-07 0:54 
GeneralRe: Go Go Gadget Eye Dropper Pin
nd12797-Mar-07 6:49
Membernd12797-Mar-07 6:49 

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.