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

C# ColorPicker Gadget

, 11 Feb 2007
Rate this:
Please Sign up or sign in to vote.
A ColorPicker Gadget for the Windows Vista Sidebar, written in C#

ColorPicker Gadget screenshot

Introduction

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

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 copyed 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 informations 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:

[Guid("fc720f6d-e15d-4b4d-82af-4dff1fb3db4d"),
ComVisible(true)]
public partial class Gadget : UserControl
{
    ...
}

During 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 much functions as possible, too.

The only real problem I had was the installation: How would the user be possible to install the gadgets only with a few mouse clicks and without to care 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=
    "position:absolute;left:0px;width:120px;height:100px;
    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.

CSS

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 wan24.de-link 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 extention 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 choosed a MSI installer for preparing the gadget as solution.

License

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

Share

About the Author

nd1279
Web Developer
Germany Germany
No Biography provided

Comments and Discussions

 
GeneralGood control PinmemberPouriya.GH11-Mar-11 5:53 
GeneralAnother good color picker PinmemberViper30003-Jun-07 14:29 
QuestionCannot install color picker gadget PinmemberHeidi Reyes3-Mar-07 21:52 
QuestionRe: Cannot install color picker gadget [modified] Pinmembernd12795-Mar-07 4:47 
AnswerRe: Cannot install color picker gadget PinmemberHeidi Reyes5-Mar-07 5:12 
GeneralRe: Cannot install color picker gadget Pinmembernd12795-Mar-07 21:46 
GeneralRe: Cannot install color picker gadget PinmemberHeidi Reyes6-Mar-07 21:00 
GeneralRe: Cannot install color picker gadget Pinmembernd12797-Mar-07 6:46 
GeneralRe: Cannot install color picker gadget PinmemberHeidi Reyes10-Mar-07 18:09 
AnswerRe: Cannot install color picker gadget Pinmembernd127911-Mar-07 0:19 
GeneralGo Go Gadget Eye Dropper Pinmemberdragonsbait2-Mar-07 0:54 
GeneralRe: Go Go Gadget Eye Dropper Pinmembernd12797-Mar-07 6:49 

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
Web03 | 2.8.140827.1 | Last Updated 11 Feb 2007
Article Copyright 2007 by nd1279
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid