Creación de un control personalizado sencillo

2025-05-07

En este artículo se explica cómo crear un control personalizado de Windows Forms. El control simple desarrollado en este artículo imprime el componente Text del control hacia la izquierda, el centro o la derecha del control. Se puede cambiar la alineación del texto. Este control no genera ni gestiona eventos.

En este artículo, aprenderá a:

Agregue una propiedad y un campo para controlar la configuración de alineación horizontal del texto.
Use OnTextChanged para invalidar el control.
Proporcione código en el OnPaint método para dibujar texto en la superficie del control.

Agregar un control personalizado

El primer paso es agregar un control personalizado al proyecto.

En Visual Studio, busque la ventana Explorador de soluciones. Haga clic con el botón derecho en el proyecto y elija Agregar>nuevo elemento.
Busque Control personalizado y selecciónelo.
Establezca el nombre de archivo en FirstControl y seleccione Agregar.
Si el modo Diseño del control está visible, cambie a la vista de código. Presione F7 o seleccione el vínculo cambiar a la vista de código .

Sugerencia

También puede hacer clic con el botón derecho en el archivo en la ventana Explorador de soluciones y seleccionar Ver código.

Ahora debería examinar el código fuente del control personalizado, que es similar al siguiente fragmento de código:

public partial class FirstControl : Control
{
    public FirstControl()
    {
        InitializeComponent();
    }

    protected override void OnPaint(PaintEventArgs pe)
    {
        base.OnPaint(pe);
    }
}

Public Class FirstControl

    Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
        MyBase.OnPaint(e)

        'Add your custom paint code here
    End Sub

End Class

Agregar una propiedad

Cree una nueva propiedad en el control denominado TextAlignment. Esta propiedad ajusta dónde se pinta el texto en el control. Con la FirstControl clase , realice los pasos siguientes:

Agregue un campo denominado _textAlignment del tipo HorizontalAlignment.

private HorizontalAlignment _textAlignment = HorizontalAlignment.Left;

Private _textAlignment As HorizontalAlignment = HorizontalAlignment.Left

Envuelva el campo en una propiedad denominada TextAlignment. Al establecer la propiedad , llame al Invalidate método para forzar que el control se vuelva a pintar.

public HorizontalAlignment TextAlignment
{
    get => _textAlignment;
    set
    {
        _textAlignment = value;
        Invalidate();
    }
}

Public Property TextAlignment As HorizontalAlignment
    Get
        Return _textAlignment
    End Get

    Set(value As HorizontalAlignment)
        _textAlignment = value
        Invalidate()
    End Set
End Property

Agregue los atributos siguientes a la propiedad para integrarlos con la ventana Propiedades de Visual Studio.
- Category—La categoría aplicada a la propiedad .
- Description—Descripción de la propiedad.
- DefaultValue: valor predeterminado para la propiedad .
  
  El valor predeterminado permite que el diseñador restablezca la propiedad. También ayuda a determinar cuándo se debe serializar la propiedad en el código subyacente, ya que los valores predeterminados no se serializan.
```
[System.ComponentModel.Category("Alignment"),
System.ComponentModel.Description("Specifies the alignment of text."),
System.ComponentModel.DefaultValue(HorizontalAlignment.Left)]
public HorizontalAlignment TextAlignment
```
```
<System.ComponentModel.Category("Alignment"),
System.ComponentModel.Description("Specifies the alignment of text."),
System.ComponentModel.DefaultValue(HorizontalAlignment.Left)>
Public Property TextAlignment As HorizontalAlignment
```

Manejo del texto cambiado

La TextAlignment propiedad llama a Invalidate para que el control se vuelva a pintar. Esto garantiza que la alineación correcta se utilice de manera instantánea durante la renderización del control Text. Sin embargo, si cambia la Text propiedad, no se actualiza nada porque Text no llama a Invalidate. Sin embargo, la propiedad llama al método OnTextChanged, el cual puedes sobrescribir para llamar a Invalidate y forzar que el control se repinte.

Con la FirstControl clase , realice los pasos siguientes:

Invalide el OnTextChanged método .
Llame a base.OnTextChanged para que el TextChanged evento se genere, según lo previsto por los consumidores del control.
Llame al método Invalidate para forzar el repintado.

El código debe tener un aspecto similar al siguiente fragmento de código:

protected override void OnTextChanged(EventArgs e)
{
    base.OnTextChanged(e);
    Invalidate();
}

Protected Overrides Sub OnTextChanged(e As EventArgs)
    MyBase.OnTextChanged(e)
    Invalidate()
End Sub

Pintar el control

La última parte del control personalizado es el dibujo. Con la FirstControl clase , realice los pasos siguientes:

Busque el OnPaint método generado por la plantilla. Si falta, anule desde la clase base.
Crear una nueva variable StringFormat llamada style.
```
StringFormat style = new();
```
```
Dim style As New StringFormat
```
El System.Drawing.StringFormat tipo encapsula la información de diseño de texto y proporciona acceso a la alineación.

En función de TextAlignment, establezca la style.Alignment propiedad en el valor adecuado.

style.Alignment = TextAlignment switch
{
    // Map the HorizontalAlignment enum to the StringAlignment enum
    HorizontalAlignment.Left => StringAlignment.Near,
    HorizontalAlignment.Right => StringAlignment.Far,
    HorizontalAlignment.Center => StringAlignment.Center,
    
    // Default to Near alignment
    _ => StringAlignment.Near
};

'Map the HorizontalAlignment enum to the StringAlignment enum
Select Case TextAlignment
    Case HorizontalAlignment.Left
        style.Alignment = StringAlignment.Near
    Case HorizontalAlignment.Right
        style.Alignment = StringAlignment.Far
    Case HorizontalAlignment.Center
        style.Alignment = StringAlignment.Center
End Select

Dibuje la Text propiedad con Graphics.DrawString.

// Create the brush and automatically dispose it.
using SolidBrush foreBrush = new(ForeColor);

// Call the DrawString method to write text.
// Text, Font, and ClientRectangle are inherited properties.
pe.Graphics.DrawString(Text, Font, foreBrush, ClientRectangle, style);

'Create the brush and automatically dispose it.
Using foreBrush As New SolidBrush(ForeColor)
    'Call the DrawString method to write text.
    'Text, Font, and ClientRectangle are inherited properties.
    e.Graphics.DrawString(Text, Font, foreBrush, ClientRectangle, style)
End Using

Importante

El Graphics.DrawString método usa un Brush para el color del texto. Brushes debe desecharse después de su uso.

El Graphics.DrawString método usa texto, una fuente, un color y opciones de formato para dibujar una cadena.

Llame al base.OnPaint para asegurarse de que se genera el evento Paint.
```
base.OnPaint(pe);
```
```
MyBase.OnPaint(e)
```
Guarde el archivo de código y compile el proyecto. Una vez compilado el proyecto, Visual Studio agrega el control personalizado a la ventana Cuadro de herramientas al abrir el Diseñador visual.

El código debe tener un aspecto similar al siguiente fragmento de código:

public partial class FirstControl : Control
{
    private HorizontalAlignment _textAlignment = HorizontalAlignment.Left;

    [System.ComponentModel.Category("Alignment"),
    System.ComponentModel.Description("Specifies the alignment of text."),
    System.ComponentModel.DefaultValue(HorizontalAlignment.Left)]
    public HorizontalAlignment TextAlignment
    {
        get => _textAlignment;
        set
        {
            _textAlignment = value;
            Invalidate();
        }
    }

    public FirstControl()
    {
        InitializeComponent();
    }

    protected override void OnTextChanged(EventArgs e)
    {
        base.OnTextChanged(e);
        Invalidate();
    }

    protected override void OnPaint(PaintEventArgs pe)
    {
        StringFormat style = new();

        style.Alignment = TextAlignment switch
        {
            // Map the HorizontalAlignment enum to the StringAlignment enum
            HorizontalAlignment.Left => StringAlignment.Near,
            HorizontalAlignment.Right => StringAlignment.Far,
            HorizontalAlignment.Center => StringAlignment.Center,
            
            // Default to Near alignment
            _ => StringAlignment.Near
        };

        // Create the brush and automatically dispose it.
        using SolidBrush foreBrush = new(ForeColor);

        // Call the DrawString method to write text.
        // Text, Font, and ClientRectangle are inherited properties.
        pe.Graphics.DrawString(Text, Font, foreBrush, ClientRectangle, style);

        base.OnPaint(pe);
    }
}

Public Class FirstControl

    Private _textAlignment As HorizontalAlignment = HorizontalAlignment.Left

    <System.ComponentModel.Category("Alignment"),
    System.ComponentModel.Description("Specifies the alignment of text."),
    System.ComponentModel.DefaultValue(HorizontalAlignment.Left)>
    Public Property TextAlignment As HorizontalAlignment
        Get
            Return _textAlignment
        End Get

        Set(value As HorizontalAlignment)
            _textAlignment = value
            Invalidate()
        End Set
    End Property

    Protected Overrides Sub OnTextChanged(e As EventArgs)
        MyBase.OnTextChanged(e)
        Invalidate()
    End Sub

    Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
        Dim style As New StringFormat

        'Map the HorizontalAlignment enum to the StringAlignment enum
        Select Case TextAlignment
            Case HorizontalAlignment.Left
                style.Alignment = StringAlignment.Near
            Case HorizontalAlignment.Right
                style.Alignment = StringAlignment.Far
            Case HorizontalAlignment.Center
                style.Alignment = StringAlignment.Center
        End Select

        'Create the brush and automatically dispose it.
        Using foreBrush As New SolidBrush(ForeColor)
            'Call the DrawString method to write text.
            'Text, Font, and ClientRectangle are inherited properties.
            e.Graphics.DrawString(Text, Font, foreBrush, ClientRectangle, style)
        End Using
        MyBase.OnPaint(e)
    End Sub

End Class

Compartir a través de

Creación de un control personalizado sencillo

Agregar un control personalizado

Agregar una propiedad

Manejo del texto cambiado

Pintar el control

Contenido relacionado

Comentarios

Recursos adicionales