Создание пользовательского элемента управления (Windows Forms .NET)

Статья
11/24/2024

В этой статье описано, как добавить элемент управления пользователем в проект, а затем добавить этот элемент управления в форму. Вы создадите повторно используемый пользовательский элемент управления, который визуально привлекательным и функциональным. Новый элемент управления группит TextBox элемент управления с элементом Button управления. Когда пользователь выбирает кнопку, текст в текстовом поле очищается. Дополнительные сведения о пользовательских элементах управления см. в обзоре пользовательского элемента управления.

Добавление пользовательского элемента управления в проект

После открытия проекта Windows Forms в Visual Studio используйте шаблоны Visual Studio для создания пользовательского элемента управления:

В Visual Studio найдите окно обозревателя проектов. Щелкните проект правой кнопкой мыши и выберите пункт "Добавить>элемент управления пользователем" (Windows Forms).
Задайте для элемента управления Имя элемента управления ClearableTextBox и нажмите клавишу Add.

После создания пользовательского элемента управления Visual Studio открывает конструктор:

Конструктор элементов управления пользователем в Visual Studio для Windows Forms

Проектирование понятного текстового поля

Пользовательский элемент управления состоит из составных элементов управления, которые являются элементами управления, которые вы создавать наобласти конструктора, точно так же, как вы разрабатываете форму. Выполните следующие действия, чтобы добавить и настроить элемент управления пользователем и его составляющие элементы управления:

При открытии конструктора область конструктора пользовательского элемента управления должна быть выбранным объектом. Если это не так, щелкните область конструктора, чтобы выбрать ее. Задайте следующие свойства в окне свойств :

Свойство Значение

MinimumSize 84, 53

Размер 191, 53
Label Добавьте элемент управления. Задайте следующие свойства:

Свойство Значение

Имя. lblTitle

Расположение 3, 5
TextBox Добавьте элемент управления. Задайте следующие свойства:

Свойство Значение

Имя. txtValue

Привязка Top, Left, Right

Расположение 3, 23

Размер 148, 23
Button Добавьте элемент управления. Задайте следующие свойства:

Свойство Значение

Имя. btnClear

Привязка Top, Right

Расположение 157, 23

Размер 31, 23

Текст ↻

Элемент управления должен выглядеть следующим образом:
Нажмите клавишу F7 , чтобы открыть редактор кода для ClearableTextBox класса.
Внесите следующие изменения кода:
1. В верхней части файла кода импортируйте System.ComponentModel пространство имен.
2. Добавьте к классу атрибут DefaultEvent . Этот атрибут задает событие, создаваемое потребителем при двойном щелчке элемента управления в конструкторе. Потребитель, объявляющий объект и использующий этот элемент управления. Дополнительные сведения об атрибутах см. в разделе "Атрибуты" (C#) или "Атрибуты" (Visual Basic).
```
using System.ComponentModel;

namespace UserControlProject
{
    [DefaultEvent(nameof(TextChanged))]
    public partial class ClearableTextBox : UserControl
```
```
Imports System.ComponentModel

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox
```
3. Добавьте обработчик событий, который перенаправит TextBox.TextChanged событие потребителю:
```
[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
```
  Обратите внимание, что событие имеет атрибут, Browsable объявленный на нем. Browsable При применении к событию или свойству элемент определяет, отображается ли элемент в окне свойств при выборе элемента в конструкторе. В этом случае передается в качестве параметра атрибуту, true показывающий, что событие должно быть видимым.
4. Добавьте строковое свойство с именем Text, которое перенаправит TextBox.Text свойство потребителю:
```
[Browsable(true)]
public new string Text
{
    get => txtValue.Text;
    set => txtValue.Text = value;
}
```
```
<Browsable(True)>
Public Shadows Property Text() As String
    Get
        Return txtValue.Text
    End Get
    Set(value As String)
        txtValue.Text = value
    End Set
End Property
```
5. Добавьте строковое свойство с именем Title, которое перенаправит Label.Text свойство потребителю:
```
[Browsable(true)]
public string Title
{
    get => lblTitle.Text;
    set => lblTitle.Text = value;
}
```
```
<Browsable(True)>
Public Property Title() As String
    Get
        Return lblTitle.Text
    End Get
    Set(value As String)
        lblTitle.Text = value
    End Set
End Property
```
Вернитесь к ClearableTextBox конструктору и дважды щелкните btnClear элемент управления, чтобы создать обработчик события Click . Добавьте следующий код для обработчика, который очищает текстовое txtValue поле:
```
private void btnClear_Click(object sender, EventArgs e) =>
    Text = "";
```
```
Private Sub btnClear_Click(sender As Object, e As EventArgs)
    txtValue.Text = ""
End Sub
```
Наконец, создайте проект, щелкнув проект правой кнопкой мыши в окне Обозреватель решений и выбрав "Сборка". Не должно быть никаких ошибок, и после завершения ClearableTextBox сборки элемент управления появится на панели элементов для использования.

Свойство	Значение
MinimumSize	`84, 53`
Размер	`191, 53`

Свойство	Значение
Имя.	`lblTitle`
Расположение	`3, 5`

Свойство	Значение
Имя.	`txtValue`
Привязка	`Top, Left, Right`
Расположение	`3, 23`
Размер	`148, 23`

Свойство	Значение
Имя.	`btnClear`
Привязка	`Top, Right`
Расположение	`157, 23`
Размер	`31, 23`
Текст	`↻`

Следующий шаг — использование элемента управления в форме.

Пример приложения

Если вы создали новый проект в последнем разделе, у вас есть пустая форма Form с именем Form1, в противном случае создайте новую форму.

В окне обозревателя решений дважды щелкните форму, чтобы открыть конструктор. Область конструктора формы должна быть выбрана.
Задайте для свойства Size формы значение 432, 315.
Откройте окно панели элементов и дважды щелкните элемент управления ClearableTextBox. Этот элемент управления должен быть указан в разделе с именем проекта.
Снова дважды щелкните элемент управления ClearableTextBox , чтобы создать второй элемент управления.
Вернитесь к конструктору и разделите элементы управления, чтобы их можно было увидеть.
Выберите один элемент управления и задайте следующие свойства:

Свойство Значение

Имя. ctlFirstName

Расположение 12, 12

Размер 191, 53

Заголовок First Name
Выберите другой элемент управления и задайте следующие свойства:

Свойство Значение

Имя. ctlLastName

Расположение 12, 71

Размер 191, 53

Заголовок Last Name
Вернитесь в окно панели элементов , добавьте элемент управления меткой в форму и задайте следующие свойства:

Свойство Значение

Имя. lblFullName

Расположение 12, 252
Затем необходимо создать обработчики событий для двух пользовательских элементов управления. В конструкторе дважды щелкните ctlFirstName элемент управления. Это действие создает обработчик событий для TextChanged события и открывает редактор кода.
Переключите обратно в конструктор и дважды щелкните ctlLastName элемент управления, чтобы создать второй обработчик событий.
Переключитесь обратно на конструктор и дважды щелкните на строке заголовка формы. Это действие создает обработчик событий для Load события.

Свойство	Значение
Имя.	`ctlFirstName`
Расположение	`12, 12`
Размер	`191, 53`
Заголовок	`First Name`

Свойство	Значение
Имя.	`ctlLastName`
Расположение	`12, 71`
Размер	`191, 53`
Заголовок	`Last Name`

Свойство	Значение
Имя.	`lblFullName`
Расположение	`12, 252`

В редакторе кода добавьте метод с именем UpdateNameLabel. Этот метод объединяет оба имени для создания сообщения и назначает сообщение элементу 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

Для обоих TextChanged обработчиков событий вызовите 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

Наконец, вызовите метод UpdateNameLabel из события Load формы:

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

Запустите проект и введите имя и фамилию:

приложение Windows Forms с двумя текстовыми полями, созданными из пользовательских элементов управления, и меткой.

Попробуйте нажать кнопку ↻, чтобы сбросить одно из текстовых полей.

Поделиться через

Создание пользовательского элемента управления (Windows Forms .NET)

Добавление пользовательского элемента управления в проект

Проектирование понятного текстового поля

Пример приложения

Дополнительные ресурсы