Design WinForms Controls using Photoshop: CheckBoxes

• Download source code - 162.8 KB

Introduction

This article is the first article of Design WinForms controls using Photoshop series which I will write to explain how to "Design" and "Code" your customized CheckBoxes controls based on your skills as a designer and a coder as well.

Basics

Actually, when I started writing the articles, I was aware that many people in here have no idea about design and painting so it will be a hard task for them to learn how to exploit this methodology in other coming projects.

In this case, I am going to highlight the steps I took and the activities I went through to create the CheckBox presented above.

Let's continue. :)

Design CheckBox Behaviors

This is the most important part. Actually, what we are going to do is draw our CheckBox's frames that change from time to time depending on the events of the mouse as I did explain in the main article.

First of all, we have to create a new window with these properties:

Once you are done with creating the window, the designing part comes.

As the title suggests, this window will be our default checkbox state when it is set to false.

What we are going to do right now is draw a rectangle which will be empty in the middle. To do this, there exist a lot of methods and tutorials to follow but in here, I am going to show the simplest one from my point of view.

To create the default frame, we must go through these steps:

1. Zoom the layer for more professional view (I suggest you to select 3200% zoom):

   

2. Select the Paint Bucket Tool (its color by default will be black)

   and click on the zoomed area to make it all black or whatever color you chose.

3. Select the area that we will erase using the Rectangle Marquee tool

   . Once you select the area, just delete it using the Magic Eraser Tool.

   

The final result will look somehow like this:

Alright! The default view frame is done.

Hovered Frame

The hovered frame is a rectangle which is surrounded by a weird aura (it is rectangle also :D) that tells that the CheckBox is being hovered right now.

To design such a thing, we will draw the same default frame as we did in the beginning but we will draw another rectangle around it.

1. Using the bucket, fill the area with blue:

   

2. Now we will select an area again, but instead of using an eraser, we will use the bucket again (in black) and paint it:

   

3. Now once this part is done, we will simply erase the inside of the black rectangle to make it look like a default view surrounded with weird blue light :D.

The final result should look like this:

OnClick Frame

This frame is the easiest among them all, all you have to is start going through designing the default layout steps then instead of using the eraser, use the bucket and fill the rectangle with blue.

The final result looks like this:

How It Works

The PsCheckBox (Photoshopped CheckBox) behaves according to the events of the mouse:

• Default view
• MouseHover
• MouseClick

Create the CheckBox using Well-Designed Pictures

Create a new class.cs:

public class PsCheckBox : CheckBox

First thing to do after loading the images into the resources and creating our class is to declare objects to store them:

        /// <summary>
        /// The default image
        /// </summary>        
        private Image initImage => Properties.Resources.Init_false;
        /// <summary>
        /// The hovered Image
        /// </summary>
        private Image Hovered => Properties.Resources.Hovered;
        /// <summary>
        /// The clicked Image
        /// </summary>
        private Image Clicked => Properties.Resources.Clicked;
        /// <summary>
        /// Ticked icon
        /// </summary>
        private Image TickTock => Properties.Resources.TickTock;

After doing that, we have to create a PictureBox that will host our frames:

        private PictureBox Layout = new PictureBox();

This PictureBox we just declared will be added to our CheckBox control and we will exploit its events to accomplish the pursued task.

Set its properties:

#region Layout properties
            this.Layout.BackColor = Color.Transparent;
            this.Layout.BackgroundImage = this.initImage;
            this.Layout.Visible = true;
            this.Layout.BackgroundImageLayout = ImageLayout.Stretch;
            Set16(this.Layout);
            this.Layout.Location = new Point(0, 0);
            this.Layout.MouseEnter += (sender, args) =>
            {
                this.Layout.BackgroundImage = this.Hovered;
                Set18(this.Layout);
            };
            this.Layout.MouseClick += (sender, args) => {
                this.ClickEvent();

            };
            this.Layout.MouseLeave += (sender, args) =>
            {
                this.Layout.BackgroundImage = this.initImage;
                Set16(this.Layout);
            };
            this.Layout.MouseDown += 
                      (sender, args) => this.Layout.BackgroundImage = this.Clicked;
            this.Layout.MouseUp += 
                      (sender, args) => this.Layout.BackgroundImage = this.initImage;
#endregion

Now the PictureBox, which is our layout, will function normally as a better customized CheckBox control.

To make it look as Checked, we have to draw our TickTock Image in the middle of our box:

            if (this.Checked)
            {
                e.Graphics.DrawImage(this.TickTock, 2, 2, 12, 12);
            }

Implementation

BoxColor can be used to change the color of the box.

Using the Code

Simply drag and drop the control on the form as if it's a normal CheckBox control.

History

• 11^th June, 2016: Initial version