Custom Radio Button – Custom controls WinForm C#

Hola, esta vez haremos un Radio Button personalizado. Al igual que otros controles de Windows de Form, este control no tiene muchas opciones de personalización de apariencia. Por ello, agregaremos algunas propiedades de apariencia y así poder cambiar el color de estilo del Radio Button existente de Windows Form.

Es muy sencillo de hacerlo, así que empecemos con el tutorial.

1.- Crear clase

Primeramente agregaremos una clase para el Botón de Opcion Personalizado en nuestro proyecto de Windows Form, Pueden colocar el nombre que desean, en mi caso pondré de nombre RJRadioButton.

2.- Importar librería Windows.Form y Drawing

Para hacer cualquier control personalizado, es necesario importar la librería Windows Forms y la librería de dibujos (Drawing).

using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;

3.- Heredar la clase RadioButton

Como es de costumbre, heredaremos un control existente de la librería Windows Form y así ampliar su funcionalidad y modificar la apariencia, en este caso, heredar de la clase RadioButton.

    public class RJRadioButton : RadioButton
    {
    }

4.- Declarar campos

En la clase creada anteriormente, declararemos campos para la apariencia y asignar sus valores predeterminados, por ejemplo: El color para el estado seleccionado y deseleccionado del RadioButton.

    //Fields
    private Color checkedColor = Color.MediumSlateBlue;
    private Color unCheckedColor = Color.Gray;

5.- Generar propiedades

Generamos propiedades para exponer los campos definidos anteriormente.

//Properties
    public Color CheckedColor
    {
        get { return checkedColor; }
        set
        {
            checkedColor = value;
            this.Invalidate();
        }
    }

    public Color UnCheckedColor
    {
        get { return unCheckedColor; }
        set
        {
            unCheckedColor = value;
            this.Invalidate();
        }
    }

6.- Constructor

En el constructor, simplemente establecemos el tamaño mínimo del control, el alto mínimo debe ser 21. Esto es muy importante para no tener problemas con el tamaño de la figura del Radio Button y el tamaño de fuente.

    //Constructor
    public RJRadioButton()
    {
        this.MinimumSize = new Size(0, 21);
        //Add a padding of 10 to the left to have a considerable distance between the text and the RadioButton.
        this.Padding = new Padding(10,0,0,0);
    }

7.- Anular el evento de Pintura

Es necesario anular el método de evento OnPaint para dibujar y pintar la nueva apariencia del control, y anular el método de evento Resize para establecer el ancho adecuado para el control cada vez que este cambie de tamaño.

//Overridden methods
    protected override void OnPaint(PaintEventArgs pevent)
    {
        //Fields
        Graphics graphics = pevent.Graphics;
        graphics.SmoothingMode = SmoothingMode.AntiAlias;
        float rbBorderSize = 18F;
        float rbCheckSize = 12F;
        RectangleF rectRbBorder = new RectangleF()
        {
            X = 0.5F,
            Y = (this.Height - rbBorderSize) / 2, //Center
            Width = rbBorderSize,
            Height = rbBorderSize
        };
        RectangleF rectRbCheck = new RectangleF()
        {
            X = rectRbBorder.X + ((rectRbBorder.Width - rbCheckSize) / 2), //Center
            Y = (this.Height - rbCheckSize) / 2, //Center
            Width = rbCheckSize,
            Height = rbCheckSize
        };

        //Drawing
        using (Pen penBorder = new Pen(checkedColor, 1.6F))
        using (SolidBrush brushRbCheck = new SolidBrush(checkedColor))
        using (SolidBrush brushText = new SolidBrush(this.ForeColor))
        {
            //Draw surface
            graphics.Clear(this.BackColor);
            //Draw Radio Button
            if (this.Checked)
            {
                graphics.DrawEllipse(penBorder, rectRbBorder);//Circle border
                graphics.FillEllipse(brushRbCheck, rectRbCheck); //Circle Radio Check
            }
            else
            {
                penBorder.Color = unCheckedColor;
                graphics.DrawEllipse(penBorder, rectRbBorder); //Circle border
            }
            //Draw text
            graphics.DrawString(this.Text, this.Font, brushText,
                rbBorderSize + 8, (this.Height - TextRenderer.MeasureText(this.Text, this.Font).Height) / 2);//Y=Center
        }
    }
        //X-> Obsolete code, this was replaced by the Padding property in the constructor
        //(this.Padding = new Padding(10,0,0,0);)
        //protected override void OnResize(EventArgs e)
        //{
        //    base.OnResize(e);
        //    this.Width = TextRenderer.MeasureText(this.Text, this.Font).Width + 30;
        //}

Bueno, eso es todo, ya puedes usar el nuevo RadioButton personalizado desde la caja de herramientas, No olvides compilar el proyecto para guardar los cambios. 

Mirar video tutorial