Click here to Skip to main content
12,754,090 members (31,339 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


10 bookmarked
Posted 8 Jul 2014

Windows Forms ToggleButton

, 10 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
A Windows Forms toggle button with Android, Windows and iOS like styles.


To customize the look and feel of a Windows Forms application, we don't have many options. Especially if we need to use a control for binary options, we always stick to the traditional checkboxes. This control will better help to meet the requirement of using a new control wherever we need a control to represent the binary decision value like "yes" or "no"

Here I'm going to describe the creation of a custom control to represent binary decision with some custom properties and unique UI layer.

What's Supported?

Since customization is the prior focus behind the creation of this control, we can customize almost every element of this ToggleButton. The main properties related to the appearance of the control has been listed below.

  • Toggle Style
  • Toggle State
  • Customized Text
  • Customized Color

These properties and its impact in the control will be described followed by the control creation.

Control Drawing

ToggleButton has been inherited from the Control class of System.Windows.Forms and overrides its OnPaint method to draw the required styles. Since there are different styles supported, the control drawing has been taken care based on the selected style.

protected override void OnPaint(PaintEventArgs e)
            controlBounds = e.ClipRectangle;
            switch (ToggleStyle)
                case ToggleButtonStyle.Android:
                    contentRectangle = e.ClipRectangle;
                    this.BackColor = Color.FromArgb(32, 32, 32);
                case ToggleButtonStyle.Windows:
                    contentRectangle = new Rectangle(e.ClipRectangle.X, e.ClipRectangle.Y, this.Width - 1, this.Height - 1);
                case ToggleButtonStyle.IOS:
                    contentRectangle = new Rectangle(0, 0, this.Width, this.Height);
                case ToggleButtonStyle.Custom:
                    contentRectangle = new Rectangle(2, 2, this.Width - 3, this.Height - 3);
                case ToggleButtonStyle.Metallic:

For each toggle styles, the control's client rectangle will be modified and the region for drawing will be updated. Once the style has been changed, the existing style's regions and graphics path will be reset in order to paint with the new parameters.

For example, let's consider the Android style. The control's region and the points where it should be painted are calculated by the function AndroidPoints() which has been then filled with default / user selected color.

private void DrawAndroidStyle(PaintEventArgs e)
    using (SolidBrush sb = new SolidBrush(clr))
                e.Graphics.FillPolygon(sb, AndroidPoints());

     private Point[] AndroidPoints()
            p1 = new Point(padx, contentRectangle.Y);
            if (padx == 0)
                p2 = new Point(padx, contentRectangle.Bottom);
                p2 = new Point(padx - SlidingAngle, contentRectangle.Bottom);

            p4 = new Point(p1.X + (contentRectangle.Width / 2), contentRectangle.Y);

            p3 = new Point(p4.X - SlidingAngle, contentRectangle.Bottom);
            if (p4.X == contentRectangle.Right)
                p3 = new Point(p4.X, contentRectangle.Bottom);

            andPoints[0] = p1;
            andPoints[1] = p2;
            andPoints[2] = p3;
            andPoints[3] = p4;
            return andPoints;

            ///p1 -  p4
            ///|     |
            ///p2 -  p3

Similar to the above, for each toggle styles, the control's region and drawing has been modified.

Mouse Interactions

Since this control's main usage relies with the user's mouse interaction on toggling states, it is needed to handle the painting with respect to the mouse gestures to indicate that the state has been changed / toggled.

So in order to achieve this, the OnMouseMove and OnMouseDown events were handled in order to update the drawing of control when a Mouse Button is pressed and moved at the same time.

protected override void OnMouseDown(MouseEventArgs e)
            if (!this.DesignMode)
                isMouseDown = true;
                downpos = e.Location;

protected override void OnMouseDown(MouseEventArgs e)
            if (!this.DesignMode)
                isMouseDown = true;
                downpos = e.Location;

        protected override void OnMouseMove(MouseEventArgs e)
           if (e.Button == MouseButtons.Left && !this.DesignMode)
                sliderPoint = e.Location;
                isMouseMoved = true;
                if (this.ToggleStyle == ToggleButtonStyle.Android)

                    padx = e.X;
                    if (padx <= contentRectangle.Left + SlidingAngle)
                        padx = contentRectangle.Left;
                        this.ToggleState = ToggleButtonState.OFF;

                    if (padx >= contentRectangle.Right - (contentRectangle.Width / 2))
                        padx = contentRectangle.Right - (contentRectangle.Width / 2);
                        this.ToggleState = ToggleButtonState.ON;

Using Code

To use this control in an application, either drag and drop from toolbox would work or else just follow the simple steps of code.

ToggleButton  toggleButton1 = new ToggleButton();
this.toggleButton1.ToggleStyle = ToggleButton.ToggleButtonStyle.Android;

Customization Properties

Toggle Style

Togglebutton supports five styles, namely Android, Windows, iOS, Metallic and Custom. By default, the control uses the Android style appearance, we can change the styles through the ToggleStyle property.

this.toggleButton1.ToggleStyle = ToggleButton.ToggleButtonStyle.Windows;

Toggle State

You can change the toggle state of the button using the property 'ToggleState' which is similar to the CheckedState in the traditional checkbox.

this.toggleButton1.ToggleState = ToggleButton.ToggleButtonState.OFF;

this.toggleButton1.ToggleState = ToggleButton.ToggleButtonState.ON;

Customized Text

We can modify the default text value for the toggle states too, through the 'ActiveText' and 'InActiveText' properties. By default, it uses 'ON' and 'OFF' as default values.

this.toggleButton1.ActiveText = "Yes";

this.toggleButton1.ActiveText = "No";

Customized Color

Similar to the text values, we can also change the color for the active and inactive colors for the control.

this.toggleButton1.ActiveColor = Color.Red

this.toggleButton1.InActiveColor = Color.Blue


With the above approach used in OnPaint() function, we can create and apply new styles to this ToggleButton. :)


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


About the Author

Software Developer
India India
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionHello Pin
Member 1229747331-Jan-16 5:49
memberMember 1229747331-Jan-16 5:49 
QuestionWork in VS 2010? Pin
Pratik Pandya6-Dec-15 19:55
memberPratik Pandya6-Dec-15 19:55 
QuestionI don't understand... Pin
Johnny J.7-Aug-15 5:44
professionalJohnny J.7-Aug-15 5:44 
QuestionAwesome Pin
KannanRavindranS15-Jul-14 8:27
memberKannanRavindranS15-Jul-14 8:27 
QuestionSmall typo Pin
Brad Bruce11-Jul-14 14:22
memberBrad Bruce11-Jul-14 14:22 
GeneralMy vote of 1 Pin
FernandoUY8-Jul-14 17:13
memberFernandoUY8-Jul-14 17:13 
QuestionSource code with sample app Pin
Ravi Bhavnani8-Jul-14 11:03
professionalRavi Bhavnani8-Jul-14 11:03 
QuestionScreenshot? Pin
Ravi Bhavnani8-Jul-14 11:01
professionalRavi Bhavnani8-Jul-14 11:01 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 10 Jul 2014
Article Copyright 2014 by IKalai
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid