Make a Custom "Different" CheckBox

All tutorials created in C# to be posted in here.
2 posts Page 1 of 1
Contributors
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Make a Custom "Different" CheckBox
XTechVB
In this tutorial you will learn how to create a custom CheckBox like the one bellow.
CustomCheckBox.PNG
First will start by creating a new Project and adding a class named CCheckBox

Now add this Namespaces and Inherit Control
Code: Select all
using System;
using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;
Next we must write the Constructor, Properties and Events
Constructor
Code: Select all
        #region Constructor
        public CCheckBox()
        {
            this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
            this.SetStyle(ControlStyles.UserPaint, true);
            this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
            this.SetStyle(ControlStyles.ResizeRedraw, true);
            this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
            this.Font = new Font("Arial", 8, FontStyle.Bold);
        }
        #endregion
Properties
Code: Select all
#region Properties
        //Logic
        bool _Checked = false;
        public bool Checked
        {
            get { return _Checked; }
            set { _Checked = value; CheckStateChanged(); this.Invalidate(); }
        }
        string _CheckText = "Yes";
        public string CheckText
        {
            get { return _CheckText; }
            set { _CheckText = value; this.Invalidate(); }
        }
        string _UnCheckText = "No";
        public string UnCheckText
        {
            get { return _UnCheckText; }
            set { _UnCheckText = value; this.Invalidate(); }
        }
        //Colors
        private Color _BackgroundColor = Color.FromArgb(223, 226, 236);
        public Color BackgroundColor
        {
            get { return _BackgroundColor; }
            set { _BackgroundColor = value; this.Invalidate(); }
        }
        private Color _BorderColor = Color.FromArgb(204, 209, 221);
        public Color BorderColor
        {
            get { return _BorderColor; }
            set { _BorderColor = value; this.Invalidate(); }
        }
        private Color _ButtonStartColor = Color.FromArgb(254, 254, 254);
        public Color ButtonStartColor
        {
            get { return _ButtonStartColor; }
            set { _ButtonStartColor = value; this.Invalidate(); }
        }
        private Color _ButtonEndColor = Color.FromArgb(249, 249, 249);
        public Color ButtonEndColor
        {
            get { return _ButtonEndColor; }
            set { _ButtonEndColor = value; this.Invalidate(); }
        }
        private Color _ButtonBorderStartColor = Color.FromArgb(219, 223, 235);
        public Color ButtonBorderStartColor
        {
            get { return _ButtonBorderStartColor; }
            set { _ButtonBorderStartColor = value; this.Invalidate(); }
        }
        private Color _ButtonBorderEndColor = Color.FromArgb(186, 190, 201);
        public Color ButtonBorderEndColor
        {
            get { return _ButtonBorderEndColor; }
            set { _ButtonBorderEndColor = value; this.Invalidate(); }
        }
        private Color _CheckTextColor = Color.FromArgb(98, 171, 226);
        public Color CheckTextColor
        {
            get { return _CheckTextColor; }
            set { _CheckTextColor = value; this.Invalidate(); }
        }
        private Color _UnCheckTextColor = Color.FromArgb(115, 124, 147);
        public Color UnCheckTextColor
        {
            get { return _UnCheckTextColor; }
            set { _UnCheckTextColor = value; this.Invalidate(); }
        }
        #endregion
Events
Code: Select all
#region Events
        private void CheckStateChanged()
        {
            if (CheckChanged != null)
            {
                CheckChanged(this, EventArgs.Empty);
            }
        }
        public event CheckChangedEventHandler CheckChanged;
        public delegate void CheckChangedEventHandler(object sender, EventArgs e);

        protected override void OnMouseDown(MouseEventArgs e)
        {
            //Get Rectsngles
            Rectangle _CheckRect = new Rectangle(2, 3, this.Width / 2, this.Height - 7);
            Rectangle _UnCheckRect = new Rectangle(this.Width / 2, 3, this.Width / 2 - 2, this.Height - 7);
            //Check State
            if (_CheckRect.Contains(e.Location))
            {
                this.Checked = true;
            }
            else if (_UnCheckRect.Contains(e.Location))
            {
                this.Checked = false;
            }
        }
        #endregion
Now the Drawing begins. First we must draw the Background and then the CheckButton
Background
Code: Select all
#region Draw Background
        private void DrawBackground(Graphics e)
        {
            //Get Rectangle
            Rectangle _BackRect = new Rectangle(0, 0, this.Width - 1, this.Height - 1);
            //Draw
            using (SolidBrush _BackgroundBrush = new SolidBrush(_BackgroundColor))
            using (Pen _BorderPen = new Pen(_BorderColor))
            {
                e.SmoothingMode = SmoothingMode.AntiAlias;
                //Draw Background First
                e.FillRectangle(_BackgroundBrush, _BackRect);
                //Draw Border
                e.DrawRectangle(_BorderPen, _BackRect);
                e.SmoothingMode = SmoothingMode.Default;
            }
        }
        #endregion
CheckButton
Code: Select all
#region Draw Check Button
        private void DrawCheckButton(Graphics e)
        {
            //Get Rectsngles
            Rectangle _CheckRect = new Rectangle(2, 2, this.Width / 2, this.Height - 5);
            Rectangle _UnCheckRect = new Rectangle(this.Width / 2, 2, this.Width / 2 - 3, this.Height - 5);
            //Draw
            using (LinearGradientBrush _BackgroundBrush = new LinearGradientBrush(_CheckRect, _ButtonStartColor, _ButtonEndColor, LinearGradientMode.Vertical))
            using (SolidBrush _CheckTextBrush = new SolidBrush(_CheckTextColor))
            using (SolidBrush _UnCheckTextBrush = new SolidBrush(_UnCheckTextColor))
            using (LinearGradientBrush _BorderBrush = new LinearGradientBrush(_CheckRect, _ButtonBorderStartColor, _ButtonBorderEndColor, LinearGradientMode.Vertical))
            {
                _BorderBrush.WrapMode = WrapMode.TileFlipX;
                e.SmoothingMode = SmoothingMode.AntiAlias;
                //Center Text
                StringFormat _TextFormat = new StringFormat();
                _TextFormat.Alignment = StringAlignment.Center;
                _TextFormat.LineAlignment = StringAlignment.Center;
                //Draw Check State
                if (_Checked == true)
                {
                    //Draw Background First
                    e.FillRectangle(_BackgroundBrush, _CheckRect);
                    //Draw Border                  
                    e.DrawRectangle(new Pen(_BorderBrush), _CheckRect);
                    //Draw Text
                    e.DrawString(_CheckText, this.Font, _CheckTextBrush, Rectangle.Round(_CheckRect), _TextFormat);
                    e.DrawString(_UnCheckText, this.Font, _UnCheckTextBrush, Rectangle.Round(_UnCheckRect), _TextFormat);
                }
                else
                {
                    //Draw Background First
                    e.FillRectangle(_BackgroundBrush, _UnCheckRect);
                    //Draw Border
                    e.DrawRectangle(new Pen(_BorderBrush), _UnCheckRect);
                    //Draw Text
                    e.DrawString(_UnCheckText, this.Font, _CheckTextBrush, Rectangle.Round(_UnCheckRect), _TextFormat);
                    e.DrawString(_CheckText, this.Font, _UnCheckTextBrush, Rectangle.Round(_CheckRect), _TextFormat);
                }
                e.SmoothingMode = SmoothingMode.Default;
            }
        }
        #endregion
And finally override the System Paint
Code: Select all
#region Override System Paint
        protected override void OnPaint(PaintEventArgs e)
        {
            DrawBackground(e.Graphics);
            DrawCheckButton(e.Graphics);
        }
        #endregion
That's it we're finished.
This code is all written by me you can use it or modify it anyway you want. Please don't share it on other websites as your own.
You do not have the required permissions to view the files attached to this post.
You can find me on Facebook or on Skype mihai_92b
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

That's a really nice checkbox. +rep
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
2 posts Page 1 of 1
Return to “C-Sharp Tutorials”