Compartir por

Creación de un control de usuario

En este artículo se explica cómo agregar un control de usuario al proyecto y, a continuación, agregar ese control de usuario a un formulario. Creará un control de usuario reutilizable que sea visualmente atractivo y funcional. El nuevo control agrupa un control TextBox con un control Button. Cuando el usuario selecciona el botón, se borra el texto del cuadro de texto. Para obtener más información sobre los controles de usuario, consulte Información general sobre el control de usuario.

Comprensión de los usuarios de sistemas de control

A lo largo de este artículo, el término consumidor hace referencia a cualquier código que use el control de usuario. Esto incluye:

  • Formularios que contienen el control de usuario.
  • Otros controles que hospedan el control de usuario.
  • Aplicaciones que hacen referencia a la biblioteca de control de usuario.

Al crear un control de usuario, va a crear un componente reutilizable. El consumidor es quien use ese componente colocándolo en un formulario, estableciendo sus propiedades o respondiendo a sus eventos. El consumidor no necesita conocer los controles internos (como el TextBox y el Button) que componen su control de usuario; solo interactúan con las propiedades y eventos que usted decide exponer.

Patrón de código esencial para controles de usuario

Antes de agregar la implementación detallada, resulta útil comprender el patrón de código mínimo viable para un control de usuario. En su núcleo, un control de usuario necesita:

  • Reenvío de eventos: transferencia de eventos desde los controles internos al consumidor.
  • Exposición de propiedades - Permite al consumidor acceder a las propiedades internas del control.
  • Comportamiento lógico : controle las interacciones entre los controles internos.

En el código siguiente se muestran estos patrones. No necesita todo este código para un control de usuario básico, pero estos patrones ayudan a crear un componente profesional y reutilizable que se integre bien con el diseñador y las aplicaciones de consumidor.

Adición de un nuevo control de usuario

Después de abrir el proyecto de Windows Forms en Visual Studio, use las plantillas de Visual Studio para crear un control de usuario:

  1. En Visual Studio, busque la ventana Explorador de soluciones. Haga clic con el botón derecho en el proyecto y seleccione Agregar>Control de usuario (Windows Forms).

    Haga clic con el botón derecho en el Explorador de soluciones de Visual Studio para agregar un control de usuario a un proyecto de Windows Forms

  2. Establezca el elemento Name del control en ClearableTextBox y pulse Agregar.

    Cuadro de diálogo Agregar elemento en Visual Studio para Windows Forms

Una vez creado el control de usuario, Visual Studio abre el diseñador:

Diseñador de controles de usuario en Visual Studio para Windows Forms

Diseño del cuadro de texto que se puede borrar

El control de usuario se compone de controles constituyentes, que son los controles que crea en la superficie de diseño, igual que cuando diseña un formulario. Siga estos pasos para agregar y configurar el control de usuario y sus controles constituyentes:

  1. Con el diseñador abierto, la superficie de diseño del control de usuario debe ser el objeto seleccionado. Si no es así, haga clic en la superficie de diseño para seleccionarla. Establezca las siguientes propiedades en la ventana Propiedades:

    Propiedad Importancia
    TamañoMínimo 84, 53
    Tamaño 191, 53

  2. Agregue un control Label. Establezca las siguientes propiedades:

    Propiedad Importancia
    Nombre lblTitle
    Ubicación 3, 5

  3. Agregue un control TextBox. Establezca las siguientes propiedades:

    Propiedad Importancia
    Nombre txtValue
    Ancla Top, Left, Right
    Ubicación 3, 23
    Tamaño 148, 23

  4. Agregue un control Button. Establezca las siguientes propiedades:

    Propiedad Importancia
    Nombre btnClear
    Ancla Top, Right
    Ubicación 157, 23
    Tamaño 31, 23
    Mensaje de texto ↻

    El control debe tener un aspecto similar al de la siguiente imagen:

    Visual Studio con Windows Forms, que muestra el control de usuario que se acaba de diseñar.

  5. Presione F7 para abrir el editor de código de la clase ClearableTextBox.

  6. Realice los siguientes cambios en el código:

    1. En la parte superior del archivo de código, importe el namespace System.ComponentModel.

    2. Agregue el atributo DefaultEvent a la clase. Este atributo establece qué evento se genera cuando el consumidor (el formulario o la aplicación que usa este control) hace doble clic en el control en el diseñador. Para obtener más información sobre los atributos, consulte Atributos (C#) o Información general sobre los atributos (Visual Basic).

      using System.ComponentModel;

namespace UserControlProject
{
    [DefaultEvent(nameof(TextChanged))]
    public partial class ClearableTextBox : UserControl

      Imports System.ComponentModel

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox

    3. Agregue un controlador de eventos que reenvíe el evento TextBox.TextChanged a los usuarios de su control personalizado.

      [Browsable(true)]
public new event EventHandler? TextChanged
{
    add => txtValue.TextChanged += value;
    remove => txtValue.TextChanged -= value;
}

      <Browsable(True)>
Public Shadows Custom Event TextChanged As EventHandler
    AddHandler(value As EventHandler)
        AddHandler txtValue.TextChanged, value
    End AddHandler
    RemoveHandler(value As EventHandler)
        RemoveHandler txtValue.TextChanged, value
    End RemoveHandler
    RaiseEvent(sender As Object, e As EventArgs)

    End RaiseEvent
End Event

      Fíjese que el evento tiene el atributo Browsable declarado en él. Cuando el atributo Browsable se aplica a un evento o propiedad, controla si el elemento está visible o no en la ventana Propiedades cuando se selecciona el control en el diseñador. En este caso, true se pasa como un parámetro al atributo para indicar que el evento debe estar visible.

    4. Agregue una propiedad de cadena denominada Text, que expone la propiedad TextBox.Text a los consumidores del control de usuario.

      [Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public new string Text
{
    get => txtValue.Text;
    set => txtValue.Text = value;
}

      <Browsable(True)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)>
Public Shadows Property Text() As String
    Get
        Return txtValue.Text
    End Get
    Set(value As String)
        txtValue.Text = value
    End Set
End Property

    5. Agregue una propiedad de cadena denominada Title, que expone la propiedad Label.Text a los consumidores del control de usuario.

      [Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public string Title
{
    get => lblTitle.Text;
    set => lblTitle.Text = value;
}

      <Browsable(True)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)>
Public Property Title() As String
    Get
        Return lblTitle.Text
    End Get
    Set(value As String)
        lblTitle.Text = value
    End Set
End Property

  7. Vuelva al diseñador de ClearableTextBox y haga doble clic en el control btnClear para generar un controlador para el evento Click. Agregue el código siguiente para el controlador, que borra el cuadro de texto txtValue:

    private void btnClear_Click(object sender, EventArgs e) =>
    Text = "";

    Private Sub btnClear_Click(sender As Object, e As EventArgs)
    txtValue.Text = ""
End Sub

  8. Por último, compile el proyecto haciendo clic en él con el botón derecho desde la ventana Explorador de soluciones y seleccionando Compilar. No debería haber errores y, una vez finalizada la compilación, el control ClearableTextBox debería aparecer en el cuadro de herramientas para su uso.

El siguiente paso consiste en usar el control en un formulario.

Aplicación de ejemplo

Si ha creado un nuevo proyecto en la última sección, tiene un Form en blanco llamado Form1, de lo contrario, cree un nuevo formulario.

  1. En la ventana Explorador de soluciones, haga doble clic en el formulario para abrir el diseñador. Se debe seleccionar la superficie de diseño del formulario.

  2. Establezca la propiedad Size del formulario en 432, 315.

  3. Abra la ventana Cuadro de herramientas y haga doble clic en el control ClearableTextBox. Este control debería aparecer en una sección denominada igual que el proyecto.

  4. De nuevo, haga doble clic en el control ClearableTextBox para generar un segundo control.

  5. Vuelva al diseñador y separe los controles para que pueda ver ambos.

  6. Seleccione un control y establezca las siguientes propiedades:

    Propiedad Importancia
    Nombre ctlFirstName
    Ubicación 12, 12
    Tamaño 191, 53
    Título First Name

  7. Seleccione el otro control y establezca las siguientes propiedades:

    Propiedad Importancia
    Nombre ctlLastName
    Ubicación 12, 71
    Tamaño 191, 53
    Título Last Name

  8. De nuevo en la ventana de herramientas , agregue un control de etiqueta al formulario y establezca las siguientes propiedades:

    Propiedad Importancia
    Nombre lblFullName
    Ubicación 12, 252

  9. Después, debe generar los controladores de eventos para los dos controles de usuario. En el diseñador, haga doble clic en el control ctlFirstName. Esta acción genera el controlador de eventos para el evento TextChanged y abre el editor de código.

  10. Cambie al diseñador y haga doble clic en el control ctlLastName para generar el segundo controlador de eventos.

  11. Cambie al diseñador y haga doble clic en la barra de título del formulario. Esta acción genera un controlador de eventos para el evento Load.

  12. En el editor de código, agregue un método denominado UpdateNameLabel. Este método combina ambos nombres para crear un mensaje y asigna el mensaje al control lblFullName.

    private void UpdateNameLabel()
{
    if (string.IsNullOrWhiteSpace(ctlFirstName.Text) || string.IsNullOrWhiteSpace(ctlLastName.Text))
        lblFullName.Text = "Please fill out both the first name and the last name.";
    else
        lblFullName.Text = $"Hello {ctlFirstName.Text} {ctlLastName.Text}, I hope you're having a good day.";
}

    Private Sub UpdateNameLabel()
    If String.IsNullOrWhiteSpace(ctlFirstName.Text) Or String.IsNullOrWhiteSpace(ctlLastName.Text) Then
        lblFullName.Text = "Please fill out both the first name and the last name."
    Else
        lblFullName.Text = $"Hello {ctlFirstName.Text} {ctlLastName.Text}, I hope you're having a good day."
    End If
End Sub

  13. Para ambos controladores de eventos TextChanged, llame al método UpdateNameLabel:

    private void ctlFirstName_TextChanged(object sender, EventArgs e) =>
    UpdateNameLabel();

private void ctlLastName_TextChanged(object sender, EventArgs e) =>
    UpdateNameLabel();

    Private Sub ctlFirstName_TextChanged(sender As Object, e As EventArgs) Handles ctlFirstName.TextChanged
    UpdateNameLabel()
End Sub

Private Sub ctlLastName_TextChanged(sender As Object, e As EventArgs) Handles ctlLastName.TextChanged
    UpdateNameLabel()
End Sub

  14. Por último, llame al método UpdateNameLabel desde el evento Load del formulario:

    private void Form1_Load(object sender, EventArgs e) =>
    UpdateNameLabel();

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    UpdateNameLabel()
End Sub

Ejecute el proyecto y escriba un nombre y un apellido:

una aplicación de Windows Forms con dos cuadros de texto creados a partir de controles de usuario y una etiqueta.

Intente presionar el botón ↻ para restablecer uno de los cuadros de texto.

  • Last updated on