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

SkinControls: Button, CheckBox and RadioButton controls with built-in styles

, 15 Mar 2006
Rate this:
Please Sign up or sign in to vote.
Custom drawn button, checkbox and radiobutton controls.

Introduction

I have finished my project dotnetskin which skins forms and controls automatically for .NET WinForms applications. I am demonstrating some code and images from that project in this article. The SkinControls library includes four components, providing skinned buttons, check boxes and radio buttons with three built-in styles. It is an excellent example of creating custom drawn controls.

Using the code

In order to use the library in your project, add it to your VS toolbox:

  • Right-click on the "General" tab in the Toolbox.
  • Choose "Add/Remove Items..."
  • On the ".NET Framework Components" tab, press the "Browse..." button and find DotNetSkin.SkinControl.dll.

That will add four component icons to the General tab. Drag the "SkinImage" icon to your form.

SkinImage

The SkinImage component provides skin images for all controls. It loads a skin image from a resource. All images are stored in a static object, so you need to add only one SkinImage component to your project.

The skin image can be in any image format that the .NET framework supports. I used PNG files including an alpha channel that determines the transparency.

This is the button image in Mac style.

The SkinImage has a Scheme property to set the skin scheme. There are three schemes available in the library's resources: Macos style, XP style, Plex Style.

This is the SkinImage code:

public class SkinImage:Component
{
    public static ImageObject button;
    public static ImageObject checkbox;
    public static ImageObject radiobutton;

    private Schemes scheme = Schemes.MacOs;

    public SkinImage()
    {
    }

    static SkinImage()
    {
        Macskin();
    }

    protected static void Macskin()
    {
        button = new 
          ImageObject("DotNetSkin.SkinControls.mac_button.png", 
          5,Rectangle.FromLTRB(14,11,14,11));
        checkbox = new 
          ImageObject("DotNetSkin.SkinControls.mac_checkbox.png",
          12,new Rectangle(0,0,0,0));
        radiobutton = new 
          ImageObject("DotNetSkin.SkinControls.mac_radiobutton.png",
          8,new Rectangle(0,0,0,0));
    }

    protected static void Xp1skin()
    {
        button = new 
          ImageObject("DotNetSkin.SkinControls.xp1_button.png",
          5,Rectangle.FromLTRB(8,9,8,9));
        checkbox = new 
          ImageObject("DotNetSkin.SkinControls.xp1_checkbox.png",
          12,new Rectangle(0,0,0,0));
        radiobutton = new 
          ImageObject("DotNetSkin.SkinControls.xp1_radiobutton.png",
          8,new Rectangle(0,0,0,0));
    }

    protected static void Plexskin()
    {
        button = new 
          ImageObject("DotNetSkin.SkinControls.Plex_button.png",
          5,Rectangle.FromLTRB(8,9,8,9));
        checkbox = new 
          ImageObject("DotNetSkin.SkinControls.Plex_checkbox.png",
          12,new Rectangle(0,0,0,0));
        radiobutton = new 
          ImageObject("DotNetSkin.SkinControls.Plex_radiobutton.png",
          8,new Rectangle(0,0,0,0));
    }

    protected override void Dispose( bool disposing )
    {
        if (disposing)
        {
        }
        base.Dispose( disposing );
    }

    public Schemes Scheme
    {
        get { return scheme;}
        set
        {
            scheme = value;
            try
            {    switch (scheme)
                {
                    case Schemes.MacOs:
                        Macskin();
                        break;
                    case Schemes.Xp:
                        Xp1skin();
                        break;
                    case Schemes.Plex:
                        Plexskin();
                        break;
                }
            }
            catch (Exception)
            {
                return;
            }
        }
    }
}

SkinButton

The button skin image has five button images tiled. These images are used in the Normal, MouseOver, MouseDown, Disabled, and the Focused states of buttons. In order to support non-rectangle images, the SkinButton supports a transparent background. The key is to call base.InvokePaintBackground to draw the parent background.

Non-transparent background Transparent background
protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
    //....

    Rectangle rc = this.ClientRectangle;
    Graphics g = e.Graphics;

    //Draw parent background
    base.InvokePaintBackground(this, 
         new PaintEventArgs(e.Graphics, base.ClientRectangle));

    //Draw skin image
    SkinDraw.DrawRect2(g,SkinImage.button,rc,i);

    //.... Draw button text
}

SkinCheckbox and SkinRadioButton

The checkbox control has twelve images tiled and the radio button has eight images. These images are used in the Normal, MouseOver, MouseDown, the Disabled states.

History

  • 2/10/2005 - First released.
  • 3/15/2006 - Fixed bug when button is pressed down, supports shoutcut '&' in button.text.

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

Pan wen
Web Developer
China China
I am working on developing a skin user interface library to enhance .Net Win forms application. Download it project from http://www.dotnetskin.net. feel free to email me for problem and bugs on my components.
 

Comments and Discussions

 
GeneralMy vote of 1 PinmemberDoubleGhost11-Apr-11 21:24 
GeneralMy vote of 1 Pinmemberzhang7cy18-Sep-09 14:16 
Questionvery bad!!! PinmemberM.Khadem8-Jul-07 1:45 
QuestionFree Use Pinmembercecypaz13-Apr-07 9:57 
Generalchange form caption (officce 2007) [modified] Pinmemberhamid_m10-Mar-07 3:12 
GeneralText Align Centre doesn't work for multiline buttons PinmemberChris Nevill11-Jan-07 2:11 
GeneralCache images Pinmemberhflorin13-Dec-06 5:13 
GeneralStill not supporting the & in the button.text Pinmembersaifonly9-Aug-06 23:30 
QuestionCheckedListBox Pinmemberdario773-Jul-06 11:15 
QuestionFound a bug in the control Pinmemberanu_kgec21-Feb-06 22:11 
AnswerRe: Found a bug in the control PinmemberPan wen22-Feb-06 11:43 
GeneralRe: Found a bug in the control Pinmemberanu_kgec22-Feb-06 22:47 
GeneralRe: Found a bug in the control PinmemberPan wen23-Feb-06 11:49 
GeneralRe: Found a bug in the control Pinmember2ASoft28-Feb-06 16:05 
GeneralMy apologies to the author! PinprotectorMarc Clifton8-Dec-05 3:59 
Generalsmall issue PinmemberMCHANNER8-Dec-05 0:00 

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.140705.1 | Last Updated 15 Mar 2006
Article Copyright 2005 by Pan wen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid