Click here to Skip to main content
15,867,330 members
Articles / Multimedia / GDI+
Article

Office 2003 Color Picker

Rate me:
Please Sign up or sign in to vote.
4.95/5 (52 votes)
3 Aug 2007CPOL3 min read 215.9K   4.5K   97   54
An exact mimic of the Office 2003 color picker, both as a ComboBox and as a ToolStripButton

The OfficeColorPicker in action

Introduction

While working on a project with an Office 2003 look, I needed a color picker with the exact look and feel of a Windows 2003 application. So, I've created one.

Using the code

The project has three controls that are available for use: OfficeColorPicker, ComboBoxColorPicker and ToolStripColorPicker. The first two controls are ToolBoxItem controls and therefore using them is as simple as dragging the control from the toolbox to your form. The third control is derived from ToolStripDropDownButton and will be discussed later in this article. All of these controls have a Color property to get or set the selected color of the control. Also, they have an event called SelectedColorChanged that occurs when the selected color of the control changes.

OfficeColorPicker

The OfficeColorPicker placed in a form

This control holds all of the colors and functionality for color picking. It can be used modeless in the application by this code, where this is a Form or any other container:

C#
// Creates new instance of the OfficeColorPicker,
// adds it to the form control.
// Note: you may use OfficeColorPicker(Color)
// to start with a specified color.

OfficeColorPicker officeColorPicker = new OfficeColorPicker();
this.Controls.Add(officeColorPicker);

Of course, the better way to open the color picker is as a pop-up, using the other two controls provided.

ComboBoxColorPicker

This control derives from System.Windows.Forms.ComboBox to show the selected color in the ComboBox. When clicking on the drop-down arrow, it will open the OfficeColorPicker control in a pop-up with context menu behavior, i.e. it will close on selection or on loss of focus.

The ComboBoxColorPicker placed in a form

To use this combo box control:

C#
// Creates new instance of the ComboBoxColorPicker,
// adds it to the form control.
// Note: you may use ComboBoxColorPicker(Color)
// to start with a specified color.
ComboBoxColorPicker comboBoxColorPicker = 
    new ComboBoxColorPicker();
this.Controls.Add(comboBoxColorPicker);

ToolStripColorPicker

The ComboBoxColorPicker placed in a form

This control derives from System.Windows.Forms.ToolStripDropDownButton in order to allow using the button inside any xxxStrip control. Examples include ToolStrip, ContextMenuStrip, MenuStrip and any other controls that "know" to hold ToolStripItem. To add ToolStripColorPicker to ToolStrip, use the following code:

C#
// Creates a new tool strip to hold the ToolStripColorPicker:
ToolStrip toolStrip = new ToolStrip();
this.Controls.Add(toolStrip);

// Creates a new ToolStripColorPicker with starting color white
ToolStripColorPicker toolStripColorPicker = 
    new ToolStripColorPicker(Color.White);
            
// Adds the ToolStripColorPicker to the ToolStrip.
toolStrip.Items.Add(toolStripColorPicker);

An easier way of using ToolStripColorPicker is to employ the design-time support of VS 2005. Just add ToolStrip or any other xxxStrip control to the form and use the drop-down list of controls to add ToolStripColorPicker:

Desing-Time support for the ToolStripTColorPicker

VS 2005 uses some sort of reflection to find the ToolStripItem available to add, but this subject is beyond the scope of this article. ToolStripColorPicker has the following properties:

C#
/// <summary>
/// Gets or sets the ToolStripColorPickerDisplayType in order to
/// specify the display style of the button
/// - image, text, underline etc.
/// </summary>
public ToolStripColorPickerDisplayType ButtonDisplayStyle;
       
/// <summary>
/// Gets or sets the color assign to the color picker control.
/// </summary>
public Color Color;

/// <summary>
/// Gets or sets value indicating whether
/// to render the color name to the tool tip text.
/// </summary>
public bool AddColorNameToToolTip;

/// <summary>
/// Gets or sets the text that appears as a tooltip in the button.
/// the color name will be rendered to the tooltip
/// if the AddColorNameToolTip property set to true.
/// </summary>
new public string ToolTipText;

The ButtonDisplayStyle property, unlike the DisplayStyle one, is used in order to specify whether to paint the image, the text and the underline for the button instead of just the image and the text, as in DisplayStyle.

Events

As mentioned above, all of these controls have the SelectedColorChanged event. This event occurs when the selected color of the control changes. To use this event:

C#
...

// Attach the event
this.colorPickerControl.SelectedColorChanged += 
    new System.EventHandler(colorPickerControl_SelectedColorChanged);
    ...

// Handle the event
private void (colorPickerControl_SelectedColorChanged);
    (object sender, EventArgs e)
{
    Color newColor = colorPickerControl.Color;
   // Do anything you want with the newColor
       ...
}

Points of interest

To allow context menu behavior, I've created a ContextMenuForm class that derives from System.Windows.Forms.Form. This form may hold any Control instance and will hide itself when it loses focus. To use this form:

C#
// Create new instance of the form
OfficePickers.Util.ContextMenuForm contextMenuForm = 
    new OfficePickers.Util.ContextMenuForm();

// Adds a control to the form (Dock will set to Dock.Fill automatically)
contextMenuForm.SetContainingControl(control);

// Shows the form as a pop-up
contextMenuForm.Show(this, new Point(0, 0), 100);

You can use this form for any control you wish. To close the form -- i.e. the user selects an option -- use the following code in your control:

C#
Form parentForm = this.FindForm();
if(parentForm != null)
{
    parentForm.Hide();
}

Improvements

  • Add support for XP themes: to do this, you should implement a Theme reader and interact it with the CustomColors class that holds all the colors.
  • Add the automatic color button: just paint another button like the More Colors button and implement the selection for it.

History

  • 8.12.2005 - Version 1.0 of OfficeColorPicker posted.
  • 1.8.2007 - Version 1.1 released, including:
    • Focus bug fixed.
    • When changing Enable to false, the button is painted in grayscale.
    • Support for SplitButton: clicking on the arrow will display the color selection as today, but clicking on the button portion itself will fire SelectedColorChanged to use for changing the color of the current selected element, like in Office.

License

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


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 185984914-Oct-15 22:49
Member 185984914-Oct-15 22:49 
QuestionHats Off Pin
KannanRavindranS3-Mar-14 17:21
KannanRavindranS3-Mar-14 17:21 
QuestionCustom Colors Pin
freakuancy7-Feb-13 22:58
freakuancy7-Feb-13 22:58 
AnswerRe: Custom Colors Pin
eligazit9-Feb-13 19:27
eligazit9-Feb-13 19:27 
QuestionWhen adding to a context menu... Pin
jcrumley5-Dec-11 10:28
jcrumley5-Dec-11 10:28 
GeneralAutoSize does not work Pin
steffen_dec11-May-11 5:03
steffen_dec11-May-11 5:03 
Generalon hover color change like office 2007 Pin
Divyesh Kharade23-Apr-10 0:17
Divyesh Kharade23-Apr-10 0:17 
GeneralRe: on hover color change like office 2007 Pin
Eli Gazit23-Apr-10 0:32
Eli Gazit23-Apr-10 0:32 
QuestionCan this be added to a contextmenustrip menuitem?? Pin
Philabuster22-Feb-10 8:17
Philabuster22-Feb-10 8:17 
AnswerRe: Can this be added to a contextmenustrip menuitem?? Pin
Eli Gazit23-Apr-10 0:33
Eli Gazit23-Apr-10 0:33 
GeneralThank you Pin
bluealert45529-Jul-09 23:04
bluealert45529-Jul-09 23:04 
GeneralExcellent Pin
The Cake of Deceit4-Oct-08 11:27
The Cake of Deceit4-Oct-08 11:27 
GeneralA small modification to the ToolstripColorPicker to avoid flicker Pin
jfcosse15-Sep-08 0:52
jfcosse15-Sep-08 0:52 
QuestionLicence Pin
Mike10662-Sep-08 8:42
Mike10662-Sep-08 8:42 
AnswerRe: Licence Pin
Eli Gazit3-Sep-08 20:59
Eli Gazit3-Sep-08 20:59 
GeneralHere's a handy optional addition to the ComboBox Pin
JMuskovitz26-Dec-07 9:34
JMuskovitz26-Dec-07 9:34 
GeneralRe: Here's a handy optional addition to the ComboBox Pin
eligazit17-Feb-08 4:27
eligazit17-Feb-08 4:27 
Generalanother color picker (office 2007 style) Pin
OwfAdmin29-Jul-07 3:14
OwfAdmin29-Jul-07 3:14 
GeneralRe: another color picker (office 2007 style) Pin
André Ziegler4-Aug-07 2:45
André Ziegler4-Aug-07 2:45 
GeneralRe: another color picker (office 2007 style) Pin
Secrets26-Nov-07 23:53
Secrets26-Nov-07 23:53 
GeneralNice looking control Pin
Johnny J.24-Jul-07 3:06
professionalJohnny J.24-Jul-07 3:06 
GeneralRe: Nice looking control Pin
eligazit31-Jul-07 20:57
eligazit31-Jul-07 20:57 
GeneralDisabled ToolStripColorPicker [modified] Pin
93Current19-Nov-06 22:38
93Current19-Nov-06 22:38 
GeneralRe: Disabled ToolStripColorPicker Pin
eligazit31-Jul-07 20:59
eligazit31-Jul-07 20:59 
Generalvery good Pin
egn_sha10026-Aug-06 21:39
egn_sha10026-Aug-06 21:39 

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.