Create Separator Control in C#

Separator control in C# can be used as a visual separator of controls on a form. To simulate the separator control in C# Windows Forms there are many techniques.

Techniques:

You can use a panel control as a separator in your form or you can also use a Label control.

To use a panel as a separator control just add a new panel control from toolbox. Set a desired background color and change its size and place it in a desired location.

To use a Label control as a separator, just add a label control in the form.

Now change the AutoSize property to False. change its height to 2px and border style to Fized 3D. Now your Horizontal Separator control is ready.

for a vertical separator, do the same and just change its width to 2px.

Tools Required:

1. Visual Studio (2010 or above version).
2. Just Color Picker (optional). download it from Here.

Custom Separator in C# (Recommended):

In this tutorial we’ll create a custom separator for windows forms applications C#.

First of all create a new class file and name it as ‘SeparatorControl.cs’. Now inherit it from main Control class and add the following code.

These header files must be included before add the code or you can add them while typing the code by using code snippet:

using System.Collections.Generic;
using System.Drawing;

Then add the following code inside the delimiters {} of SeparatorControl class:

        private int _thckness = 1;
        private bool _isVertical;

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            var sz = _isVertical ? Height / 2 : Width / 2;
            e.Graphics.TranslateTransform(Width / 2f, Height / 2f);

            using (var pen = new Pen(ForeColor,_thckness))
            {
                if (!_isVertical)
                {
                    e.Graphics.DrawLine(pen, -sz + Padding.Left, 0, sz - Padding.Right, 0);
                }
                else
                {
                    e.Graphics.DrawLine(pen, 0, -sz + Padding.Top, 0, sz - Padding.Bottom);
                }
            }
        }
        protected override void OnPaddingChanged(EventArgs e)
        {
            base.OnPaddingChanged(e);
            Invalidate();
        }

        public bool isVertical
        {
            get => _isVertical;
            set
            {
                _isVertical = value;
                Invalidate();
            }
        }
        public int Thickness
        {
            get => _thckness;
            set
            {
                _thckness = value;
                if (Height < _thckness)
                    Height = _thckness;
                else
                    Invalidate();
            }
        }

In the above code, the first variable is to store the thickness of our separator control. The other Boolean variable is to check either the user wants a Vertical separator.

we’ll pass values to these variables from the properties which are initialized at the last section of code.

Video Tutorial:

Watch a full video tutorial on our official YouTube Channel to learn how to implement this separator control: https://youtu.be/Zl2W3QxZCqY

Source Code: