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

ColorPicker, FontPicker...

By , 14 Jul 2006
Rate this:
Please Sign up or sign in to vote.

Note: the source code must be compiled / run against .NET framework 2.0.

Introduction

Although the .NET framework provides quite a rich collection of UI controls and components for WinForms development, there is one particular type of control that has been missing. I'm talking about a color-picker control with drop-down color selection capabilities, and a font-picker control with pop-up font selection capabilities, just like the one used within the Visual Studio .NET property browser for editing Color-typed or Font-typed properties.

About the PickerBase

As the base class of the enhanced controls ColorPicker, FontPicker, HatchStylePicker, DashStylePicker, the PickerBase class mostly implements all the general methods and properties which might be used or required in its inherited classes. Therefore, its size exceeds more than 1000 lines, and its implementation will not be detailed here (if you are interested, you can refer to the PickerBase.cs file for detailed implementation). In addition, more Picker controls can be derived from this base class if you like. (One more thing: if your derived Picker control requires a UITypeEditor which might not be provided by the .NET framework, you must define one for your Picker control. For your reference, please see the DashStyleEditor in the DashStylePicker.cs file.)

Inheritance from the PickerBase

ColorPicker: Represents a Windows picker box that displays Color values.

//ColorPicker.cs

using System;
using System.Drawing;
using System.Text;

namespace Com.Windows.Forms
{
    /// <summary>
    /// Represents a Windows picker box that displays Color values.
    /// </summary>
    public class ColorPicker : PickerBase
    {
        /// <summary>
        /// Constructor
        /// </summary>
        public ColorPicker()
            : base(typeof(Color))
        {
            Value = Color.White;
        }

        /// <summary>
        /// Value
        /// </summary>
        public new Color Value
        {
            get
            {
                return (Color)base.Value;
            }
            set
            {
                base.Value = value;
            }
        }
    }
}

FontPicker: Represents a Windows picker box that displays Font values.

//FontPicker.cs

using System;
using System.Drawing;
using System.Text;

namespace Com.Windows.Forms
{
    /// <summary>
    /// Represents a Windows picker box that displays Font values.
    /// </summary>
    public class FontPicker : PickerBase
    {
        /// <summary>
        /// Constructor
        /// </summary>
        public FontPicker()
            : base(typeof(Font))
        {
            Value = SystemFonts.DefaultFont;
        }

        /// <summary>
        /// Value
        /// </summary>
        public new Font Value
        {
            get
            {
                return (Font)base.Value;
            }
            set
            {
                base.Value = value;
            }
        }
    }
}

HatchStylePicker: Represents a Windows picker box that displays HatchStyle values.

//HatchStylePicker.cs

using System;
using System.Collections;
using System.Text;
using System.Drawing;
using System.Drawing.Design;
using System.Drawing.Drawing2D;
using System.ComponentModel;

namespace Com.Windows.Forms
{
    /// <summary>
    /// Represents a Windows picker box that displays HatchStyle values.
    /// </summary>
    public class HatchStylePicker : PickerBase
    {
        /// <summary>
        /// Constructor
        /// </summary>
        public HatchStylePicker()
            : base(typeof(HatchStyle))
        {
            Value = HatchStyle.Cross;
            Editor = new HatchStyleEditor();
            TextEditable = false;
        }

        /// <summary>
        /// Value
        /// </summary>
        public new HatchStyle Value
        {
            get
            {
                return (HatchStyle)base.Value;
            }
            set
            {
                base.Value = value;
            }
        }


        /// <summary>
        /// The UITypeEditor of HatchStyle
        /// </summary>
        private class HatchStyleEditor : UITypeEditor
        {
            /// <summary>
            /// Constructor
            /// </summary>
            public HatchStyleEditor()
            {
            }

            /// <summary>
            /// Overloaded. Gets the editor style used by the EditValue method.
            /// </summary>
            /// <param name="context">An ITypeDescriptorContext
            ///    that can be used to gain additional
            ///    context information.</param>
            /// <returns>A UITypeEditorEditStyle value that indicates
            ///    the style of editor used by the EditValue method.</returns>
            public override UITypeEditorEditStyle 
                   GetEditStyle(ITypeDescriptorContext context)
            {
                return UITypeEditorEditStyle.None;
            }

            /// <summary>
            /// Indicates whether the specified context supports painting
            /// a representation of an object's value within the specified context.
            /// </summary>
            /// <param name="context">An ITypeDescriptorContext that
            /// can be used to gain additional context information.</param>
            /// <returns>true if PaintValue is implemented;
            /// otherwise, false.</returns>
            public override bool 
                   GetPaintValueSupported(ITypeDescriptorContext context)
            {
                return true;
            }

            /// <summary>
            /// Paints a representation of the value of an object
            /// using the specified PaintValueEventArgs.
            /// </summary>
            /// <param name="e">A PaintValueEventArgs that
            /// indicates what to paint and where to paint it.</param>
            public override void PaintValue(PaintValueEventArgs e)
            {
                if (e.Value != null)
                {
                    HatchStyle style = (HatchStyle)e.Value;
                    Rectangle bounds = e.Bounds;
                    Brush brush = new HatchBrush(style, 
                                  SystemColors.WindowText, SystemColors.Window);
                    try
                    {
                        GraphicsState state = e.Graphics.Save();
                        e.Graphics.RenderingOrigin = new Point(bounds.X, bounds.Y);
                        e.Graphics.FillRectangle(brush, bounds);
                        e.Graphics.Restore(state);
                    }
                    finally
                    {
                        brush.Dispose();
                    }
                }
            }

        }
    }
}

DashStylePicker: Represents a Windows picker box that displays DashStyle values.

//DashStylePicker.cs

using System;
using System.Collections;
using System.Text;
using System.Drawing;
using System.Drawing.Design;
using System.Drawing.Drawing2D;
using System.ComponentModel;

namespace Com.Windows.Forms
{
    /// <summary>
    /// Represents a Windows picker box that displays DashStyle values.
    /// </summary>
    public class DashStylePicker : PickerBase
    {
        /// <summary>
        /// Constructor
        /// </summary>
        public DashStylePicker()
            : base(typeof(DashStyle))
        {
            Value = DashStyle.Solid;
            Editor = new DashStyleEditor();
            TextEditable = false;
            PaintValueFrame = false;
            PaintValueWidth = 40;
        }

        /// <summary>
        /// Value
        /// </summary>
        public new DashStyle Value
        {
            get
            {
                return (DashStyle)base.Value;
            }
            set
            {
                base.Value = value;
            }
        }

        /// <summary>
        /// The UITypeEditor of DashStyle
        /// </summary>
        private class DashStyleEditor : UITypeEditor
        {
            /// <summary>
            /// Constructor
            /// </summary>
            public DashStyleEditor()
            {
            }
            
            /// <summary>
            /// Overloaded. Gets the editor style used by the EditValue method.
            /// </summary>
            /// <param name="context">An ITypeDescriptorContext that
            /// can be used to gain additional context information.</param>
            /// <returns>A UITypeEditorEditStyle value that indicates
            /// the style of editor used by the EditValue method.</returns>
            public override UITypeEditorEditStyle 
                   GetEditStyle(ITypeDescriptorContext context)
            {
                return UITypeEditorEditStyle.None;
            }

            /// <summary>
            /// Indicates whether the specified context supports painting
            /// a representation of an object's value within the specified context.
            /// </summary>
            /// <param name="context">An ITypeDescriptorContext
            ///   that can be used to gain additional
            ///   context information.</param>
            /// <returns>true if PaintValue is implemented;
            ///            otherwise, false.</returns>
            public override bool 
                   GetPaintValueSupported(ITypeDescriptorContext context)
            {
                return true;
            }

            /// <summary>
            /// Paints a representation of the value of an object
            /// using the specified PaintValueEventArgs.
            /// </summary>
            /// <param name="e">A PaintValueEventArgs that
            /// indicates what to paint and where to paint it.</param>
            public override void PaintValue(PaintValueEventArgs e)
            {
                if (e.Value != null)
                {
                    DashStyle style = (DashStyle)e.Value;
                    Rectangle bounds = e.Bounds;

                    int y = bounds.Y + bounds.Height / 2;
                    Point start = new Point(bounds.Left, y);
                    Point end = new Point(bounds.Right, y);

                    Pen pen = new Pen(SystemColors.WindowText);
                    pen.DashStyle = style;
                    pen.Width = 2;
                    Brush brush = new SolidBrush(SystemColors.Window);
                    try
                    {
                        GraphicsState state = e.Graphics.Save();
                        e.Graphics.FillRectangle(brush, bounds);
                        e.Graphics.DrawLine(pen, start, end);
                        e.Graphics.Restore(state);
                    }
                    finally
                    {
                        pen.Dispose();
                        brush.Dispose();
                    }
                }
            }

        }
    }
}

Using the ColorPicker, FontPicker, HatchStylePicker, and DashStylePicker

All these enhanced controls are easy to use, by dragging & dropping them onto the destination WinForm just like other Microsoft UI controls: TextBox or ComboBox, for instance.

The following code is generated by the Windows Forms Designer after being dragged onto Form1:

//HatchStylePicker.cs

namespace TestPicker
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources
        /// should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.fontPicker1 = new Com.Windows.Forms.FontPicker();
            this.colorPicker1 = new Com.Windows.Forms.ColorPicker();
            this.hatchStylePicker1 = new Com.Windows.Forms.HatchStylePicker();
            this.dashStylePicker1 = new Com.Windows.Forms.DashStylePicker();
            this.SuspendLayout();
            // 
            // fontPicker1
            // 
            this.fontPicker1.BackColor = System.Drawing.SystemColors.Window;
            this.fontPicker1.ForeColor = System.Drawing.SystemColors.WindowText;
            this.fontPicker1.Location = new System.Drawing.Point(15, 15);
            this.fontPicker1.Name = "fontPicker1";
            this.fontPicker1.ReadOnly = false;
            this.fontPicker1.Size = new System.Drawing.Size(245, 21);
            this.fontPicker1.TabIndex = 0;
            this.fontPicker1.Text = "Microsoft Sans Serif, 8.25pt";
            this.fontPicker1.Value = new 
                 System.Drawing.Font("Microsoft Sans Serif", 8.25F);
            // 
            // colorPicker1
            // 
            this.colorPicker1.BackColor = System.Drawing.SystemColors.Window;
            this.colorPicker1.ForeColor = System.Drawing.SystemColors.WindowText;
            this.colorPicker1.Location = new System.Drawing.Point(15, 58);
            this.colorPicker1.Name = "colorPicker1";
            this.colorPicker1.ReadOnly = false;
            this.colorPicker1.Size = new System.Drawing.Size(245, 21);
            this.colorPicker1.TabIndex = 1;
            this.colorPicker1.Text = "White";
            this.colorPicker1.Value = System.Drawing.Color.White;
            // 
            // hatchStylePicker1
            // 
            this.hatchStylePicker1.BackColor = System.Drawing.SystemColors.Window;
            this.hatchStylePicker1.ForeColor = 
                 System.Drawing.SystemColors.WindowText;
            this.hatchStylePicker1.Location = new System.Drawing.Point(15, 107);
            this.hatchStylePicker1.Name = "hatchStylePicker1";
            this.hatchStylePicker1.ReadOnly = false;
            this.hatchStylePicker1.Size = new System.Drawing.Size(245, 21);
            this.hatchStylePicker1.TabIndex = 2;
            this.hatchStylePicker1.Text = "LargeGrid";
            this.hatchStylePicker1.Value = 
                 System.Drawing.Drawing2D.HatchStyle.LargeGrid;
            // 
            // dashStylePicker1
            // 
            this.dashStylePicker1.BackColor = System.Drawing.SystemColors.Window;
            this.dashStylePicker1.ForeColor = 
                 System.Drawing.SystemColors.WindowText;
            this.dashStylePicker1.Location = new System.Drawing.Point(15, 161);
            this.dashStylePicker1.Name = "dashStylePicker1";
            this.dashStylePicker1.ReadOnly = false;
            this.dashStylePicker1.Size = new System.Drawing.Size(245, 21);
            this.dashStylePicker1.TabIndex = 3;
            this.dashStylePicker1.Text = "Solid";
            this.dashStylePicker1.Value = 
                 System.Drawing.Drawing2D.DashStyle.Solid;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(7F, 15F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(341, 253);
            this.Controls.Add(this.dashStylePicker1);
            this.Controls.Add(this.hatchStylePicker1);
            this.Controls.Add(this.colorPicker1);
            this.Controls.Add(this.fontPicker1);
            this.Font = new System.Drawing.Font("Arial", 9F, 
                        System.Drawing.FontStyle.Regular, 
                        System.Drawing.GraphicsUnit.Point, ((byte)(0)));
            this.Name = "Form1";
            this.Text = "Form1";
            this.ResumeLayout(false);

        }

        #endregion

        private Com.Windows.Forms.FontPicker fontPicker1;
        private Com.Windows.Forms.ColorPicker colorPicker1;
        private Com.Windows.Forms.HatchStylePicker hatchStylePicker1;
        private Com.Windows.Forms.DashStylePicker dashStylePicker1;
    }
}

About the downloads

The code download supplied with the article contains the ColorPicker.sln solution consisting of two projects:

  • Picker.csproj - the project implements the enhanced ColorPicker, FontPicker, HatchStylePicker, and DashStylePicker controls, and their base class PickerBase.
  • TestPicker.csproj - ColorPicker, FontPicker, HatchStylePicker, and DashStylePicker sample programs written in C#.NET.

Please, don't forget to:

  • Rebuild the solution (Build | Rebuild Solution) after you open it for the first time (this step will ensure that the ColorPicker, FontPicker ... controls will display correctly at design-time).

History

  • Wednesday, July 05, 2006 - Initial release.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Jay Liu

China China
No Biography provided

Comments and Discussions

 
AnswerFix for bug with Enabled/Readonly PinmemberRobert Prouse16-Sep-09 4:18 
GeneralFont selection on the webForm. PinmemberJunior Boy6-Jun-07 22:55 
QuestionOdd Font Sizes Pinmembersmcneese22-Feb-07 7:14 
AnswerRe: Odd Font Sizes PinmemberJay Liu26-Feb-07 14:07 
GeneralRe: Odd Font Sizes Pinmembersmcneese14-Mar-07 10:29 
AnswerRe: Odd Font Sizes PinmemberNate@Elan25-Oct-07 10:45 
AnswerRe: Odd Font Sizes PinmemberOliver Bock23-Jun-09 18:24 
AnswerRe: Odd Font Sizes PinmemberToli Cuturicu19-Aug-10 5:21 
GeneralHost form looses focus - Not good PinmembereisernWolf15-Feb-07 19:27 
Questionlocalization PinmemberSHartmann11-Jan-07 11:14 
GeneralStrange behaviour Pinmemberoggelito20-Dec-06 6:53 
GeneralGreat Article Pinmembervl950t17-Jul-06 22:53 
AnswerRe: Great Article PinmemberJay Liu18-Jul-06 14:42 

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
Web01 | 2.8.140415.2 | Last Updated 14 Jul 2006
Article Copyright 2006 by Jay Liu
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid