Custom Toggle Button In C#

Introduction 

Hello everyone today we are going to do something interesting. We are going to create a custom toggle button control in windows form with C#. So here we have two phases to create a custom toggle button in our first phase we design a button view with Microsoft PowerPoint. If you have good knowledge of Photoshop you can create the same design with Photoshop. So let’s start with part one. So like before I want to show you first what we are going to make.

Toggle Button

Steps to design the view part of the toggle button

Step 1

First, we open Microsoft  PowerPoint with an empty slide.

Step 2

Then we go to the go to the insert menu.

Step 3

Click on shapes >> choose –Rounded Rectangle  >> and draw it.

Step 4

To make it a more rounded shape like a toggle button click on this yellow point that is presented on the left upper corner and drag it down now our shape looks like a toggle button.

Step 5

Here we fill the shape with the white color, you can fill it with your favorite one. I'll suggest a filling color that matches the background of the windows form.

Step  6

Now add another rounded rectangle and shape it round with the same height and 25% width as the first rounded rectangle.

Step 7

Select both rounded rectangles and click on the format menu here click on the shape outline and fill the outline with the black color. You can choose any other color that you want to fill on it, then select the first rounded rectangle and shape fill with white color and go to shape outline and down here you get Weight to click on it and set weight 6pt that enhanced our shape and shape will not look blurry.

Step 8

Select another rounded rectangle and fill with Red color and set weight 4pt.

Step 9

Select both rounded rectangles copy (ctrl+c) and paste (ctrl+v) them just shift the small rounded rectangle from right to left and fill it with the green color. You can choose another color depending on your requirement

Now the designing part of the toggle button is completed. Just select the red button and save as PNG with the name btnRed and select the green button and save as PNG with the name btnGreen. If these buttons are not saving separately you can save one PNG and then crop them separately now our buttons look like this.

Now we have two PNG after changing the color from red to green look like

btnGreen.png

btnRed.png

Now let’s focus on part-2

Open Visual Studio. I’m using Visual Studio 2019, you can use what you have installed in your system.

Now follow these steps to create a toggle button.

Step 1

Open visual studio and create a new project with the name toggle2.0 you can put any other name that you want.

Step 2

Choose windows form .NET framework with C# and continue

Step 3

Let's open Tool Box, to open the toolbox, we have two ways one is,  to go view the menu, and Under View, we get the toolbox. Another way to open the toolbox is to press the shortcut key ctrl +Alt+X. Choose button control then drag and drop it on the form toolbox to the form.

Step 4

Next, we need to remove all the text from the button so we right-click on the button click on properties, Go to the text property and leave it blank

Step 5

Next we rename the  button with the name property 

Here we change the name of the button control from button1  to tglColor.

Next, we go to the BackgroundImage property and import both images(btnred.png and btnGreen.png)to the resources

.

Step 6

Next, we go to the BackgroundImageLayout property and set it as stretch.

Step  7

Next, we need to remove the border of the button. We can do it by setting the border 0 under flatAppearance or with code. I’m doing it manually to open the form load event by just double-clicking on the form. And write this code

private void Form1_Load(object sender, EventArgs e) {
    tglColor.FlatStyle = FlatStyle.Flat;
    tglColor.FlatAppearance.BorderSize = 0;
}

Here we set button appearance flat and border=0

Step 8

Next, we need a variable that helps us in changing the background image of the button that  helps to present our button  as a toggle button so here  I have declared bool type variable chk and its default value is false

bool chk;

Step 9

Next, we open the button click event by just double-clicking on the button control and writing this code.

private void tglColor_Click(object sender, EventArgs e) {
    if (chk != true) {
        tglColor.BackgroundImage = Properties.Resources.btnRed;
        chk = true;
    } else {
        tglColor.BackgroundImage = Properties.Resources.btnGreen;
        chk = false;
    }
}

Here I have checked the value of the chk variable.

If the value of the chk variable is false then change the backgroundImage from btnGreen.png to btnRed.png and set the value of the chk variable true.

Explanation

Here

• tglColor -is the name of the toggle button.
•   BackgroundImage-is a property that is being used to set the background image to the control.
• Properties.Resources-is the location of our images.
• btnRed-is the name of the image that is located in the resource.

if (chk != true) {
    tglColor.BackgroundImage = Properties.Resources.btnRed;
    chk = true;
}

If the value is true then change the backgroundImage from btnRed.png to btnGreen.png and change the value of the chk variable and set false

Explanation

Here

• tglColor -is the name of the toggle button.
• BackgroundImage-is a property that is being used to set the background image to the control.
• Properties.Resources-is the location of our images.
• btnGreen-is the name of the image that is located in the resource.

else {
    tglColor.BackgroundImage = Properties.Resources.btnGreen;
    chk = false;
}

Now our button is ready to be used we perform the different tasks if the value is true or false.

So let's add a label and set text  -I’m changing my color with the toggle button and putting this code on the button click event.

private void button1_Click(object sender, EventArgs e) {
    if (chk != true) {
        button1.BackgroundImage = Properties.Resources.btnRed;
        chk = true;
        label1.BackColor = Color.Red;
    } else {
        button1.BackgroundImage = Properties.Resources.btnGreen;
        chk = false;
        label1.BackColor = Color.Green;
    }
}

Here

• lable1-is the name of the label control.
• BackColor -is a color property that can set the color of the control.
• Color -is a structure that contains multiple colors located in the System. Drawing namespace
• Green is a color that is initialized to the label control

 label1.BackColor = Color.Red;

This is the all code programmed by us. 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace toggle2._0 {
    public partial class Form1: Form {
        bool chk;
        public Form1() {
            InitializeComponent();
        }
        private void tglColor_Click(object sender, EventArgs e) {
            if (chk != true) {
                tglColor.BackgroundImage = Properties.Resources.btnRed;
                chk = true;
                label1.BackColor = Color.Red;
            } else {
                tglColor.BackgroundImage = Properties.Resources.btnGreen;
                chk = false;
                label1.BackColor = Color.Green;
            }
        }
        private void Form1_Load(object sender, EventArgs e) {
            tglColor.FlatStyle = FlatStyle.Flat;
            tglColor.FlatAppearance.BorderSize = 0;
        }
    }
}

Now when the button color is red label color will be red and if it's green label also will be green

Output.

Note
I have added the png files with the resources in folder pnG_Buttons you can use them by just adding them to your project resources. First, unzip the zip file attached with the article and use them in your way or you can design them in your way.

Conclusion

 Here we created an interesting toggle button. You can create different designs of buttons and can use them in the same way.