Vytvoření uživatelského ovládacího prvku

Tento článek vás naučí, jak do projektu přidat uživatelský ovládací prvek a pak ho přidat do formuláře. Vytvoříte opakovaně použitelný uživatelský ovládací prvek, který je vizuálně atraktivní i funkční. Nový ovládací prvek seskupí TextBox ovládací prvek s Button ovládacím prvkem. Když uživatel tlačítko vybere, text v textovém poli se vymaže. Další informace o uživatelských ovládacích prvcích naleznete v tématu Přehled uživatelských ovládacích prvků.

Uživatelé spravující uživatelské ovládací prvky

V tomto článku termín spotřebitel označuje jakýkoli kód, který používá váš uživatelský ovládací prvek. Sem patří:

Formuláře , které obsahují uživatelský ovládací prvek
Další ovládací prvky , které hostují uživatelský ovládací prvek.
Aplikace , které odkazují na knihovnu uživatelských ovládacích prvků.

Při vytváření uživatelského ovládacího prvku vytváříte opakovaně použitelnou komponentu. Uživatel je ten, kdo tuto komponentu používá tím, že ji umístí na formulář, nastaví její vlastnosti nebo reaguje na její události. Uživatel nemusí vědět o interních ovládacích prvcích (například TextBox a Button), které tvoří uživatelský ovládací prvek – komunikuje jenom s vlastnostmi a událostmi, které se rozhodnete zveřejnit.

Základní vzor kódu pro uživatelské ovládací prvky

Než přidáte podrobnou implementaci, je užitečné pochopit minimální funkční vzor kódu pro uživatelský ovládací prvek. V jádru potřebuje uživatelský ovládací prvek:

Předávání událostí – Předání událostí z interních ovládacích prvků příjemci.
Vystavení vlastností – Umožňuje uživateli přístup k vlastnostem interních ovládacích prvků.
Logické chování – Zpracování interakcí mezi interními ovládacími prvky

Následující kód ukazuje tyto vzory. Pro základní uživatelský ovládací prvek nepotřebujete veškerý tento kód, ale tyto vzory pomáhají vytvořit profesionální opakovaně použitelnou komponentu, která se dobře integruje s návrhářem a aplikacemi pro spotřebitele.

Přidání nového uživatelského ovládacího prvku

Po otevření projektu model Windows Forms v sadě Visual Studio pomocí šablon sady Visual Studio vytvořte uživatelský ovládací prvek:

V sadě Visual Studio vyhledejte okno Průzkumníka řešení . Klikněte pravým tlačítkem myši na projekt a zvolte Přidat>uživatelský ovládací prvek (model Windows Forms).
Nastavte název ovládacího prvku na ClearableTextBox a stiskněte Přidat.

Po vytvoření uživatelského ovládacího prvku visual Studio otevře návrháře:

Návrhář uživatelského ovládacího prvku v sadě Visual Studio pro Windows Forms

Návrh vyčistitelného textového pole

Uživatelský ovládací prvek se skládá z základních ovládacích prvků, což jsou ovládací prvky, které vytvořit na návrhové ploše, stejně jako při návrhu formuláře. Pokud chcete přidat a nakonfigurovat uživatelský ovládací prvek a jeho základní ovládací prvky, postupujte takto:

Při otevření návrháře by návrhová plocha uživatelského ovládacího prvku měla být vybraným objektem. Pokud tomu tak není, klikněte na návrhovou plochu, abyste ji vybrali. V okně Vlastnosti nastavte následující vlastnosti:

Vlastnictví Hodnota

Minimální velikost 84, 53

Velikost 191, 53
Přidejte ovládací prvek Label. Nastavte následující vlastnosti:

Vlastnictví Hodnota

Název lblTitle

Umístění 3, 5
Přidejte ovládací prvek TextBox. Nastavte následující vlastnosti:

Vlastnictví Hodnota

Název txtValue

kotva Top, Left, Right

Umístění 3, 23

Velikost 148, 23
Přidejte ovládací prvek Button. Nastavte následující vlastnosti:

Vlastnictví Hodnota

Název btnClear

kotva Top, Right

Umístění 157, 23

Velikost 31, 23

Text ↻

Ovládací prvek by měl vypadat jako na následujícím obrázku:
Stisknutím klávesy F7 otevřete editor kódu pro ClearableTextBox třídu.

Vlastnictví	Hodnota
Minimální velikost	`84, 53`
Velikost	`191, 53`

Vlastnictví	Hodnota
Název	`lblTitle`
Umístění	`3, 5`

Vlastnictví	Hodnota
Název	`txtValue`
kotva	`Top, Left, Right`
Umístění	`3, 23`
Velikost	`148, 23`

Vlastnictví	Hodnota
Název	`btnClear`
kotva	`Top, Right`
Umístění	`157, 23`
Velikost	`31, 23`
Text	`↻`

Proveďte následující změny kódu:

V horní části souboru kódu naimportujte System.ComponentModel obor názvů.
DefaultEvent Přidejte atribut do třídy. Tento atribut nastaví, která událost se vygeneruje, když příjemce (formulář nebo aplikace pomocí tohoto ovládacího prvku) dvakrát klikne na ovládací prvek v návrháři. Další informace o atributech najdete v tématu Atributy (C#) nebo Přehled atributů (Visual Basic).
```
using System.ComponentModel;

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

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox
```

Přidejte obslužnou rutinu, která předá událost TextBox.TextChanged příjemcům vašeho uživatelského ovládacího prvku:

[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

Všimněte si, že událost má Browsable atribut deklarovaný v ní. Browsable Při použití na událost nebo vlastnost určuje, zda je položka viditelná v okně Vlastnosti, když je ovládací prvek vybrán v návrháři. V tomto případě se true předává jako parametr atributu, který označuje, že událost by měla být viditelná.

Přidejte řetězcovou vlastnost s názvem Text, která zpřístupňuje TextBox.Text vlastnost uživatelům uživatelského ovládacího prvku:

[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

Přidejte řetězcovou vlastnost s názvem Title, která zpřístupňuje Label.Text vlastnost uživatelům uživatelského ovládacího prvku:

[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

Přepněte zpět do návrháře ClearableTextBox a poklikáním na ovládací prvek btnClear vygenerujte obslužnou rutinu pro událost Click. Přidejte následující kód pro obslužnou rutinu, který vymaže txtValue textové pole:
```
private void btnClear_Click(object sender, EventArgs e) =>
    Text = "";
```
```
Private Sub btnClear_Click(sender As Object, e As EventArgs)
    txtValue.Text = ""
End Sub
```
Nakonec projekt sestavíte tak, že v okně Průzkumník řešení kliknete pravým tlačítkem na projekt a vyberete Sestavit. Nemělo by dojít k žádným chybám a po dokončení ClearableTextBox sestavení se ovládací prvek zobrazí v sadě nástrojů pro použití.

Dalším krokem je použití ovládacího prvku ve formuláři.

Ukázková aplikace

Pokud jste v poslední části vytvořili nový projekt, máte prázdný Form s názvem Form1, jinak vytvořte nový formulář.

V okně Průzkumníka řešení poklikejte na formulář a otevřete návrháře. Měla by být vybrána návrhová plocha formuláře.
Nastavte vlastnost Size formuláře na 432, 315.
Otevřete okno Panel nástrojů a poklikejte na ovládací prvek ClearableTextBox. Tento ovládací prvek by měl být uvedený v oddílu pojmenovaném po projektu.
Znovu dvojklikněte na ovládací prvek ClearableTextBox pro vygenerování druhého ovládacího prvku.
Vraťte se k návrháři a oddělte ovládací prvky, abyste viděli oba ovládací prvky.
Vyberte jeden ovládací prvek a nastavte následující vlastnosti:

Vlastnictví Hodnota

Název ctlFirstName

Umístění 12, 12

Velikost 191, 53

Titulek First Name
Vyberte druhý ovládací prvek a nastavte následující vlastnosti:

Vlastnictví Hodnota

Název ctlLastName

Umístění 12, 71

Velikost 191, 53

Titulek Last Name
Zpět v okně Toolbox přidejte do formuláře ovládací prvek popisku a nastavte následující vlastnosti:

Vlastnictví Hodnota

Název lblFullName

Umístění 12, 252
Dále je potřeba vygenerovat obslužné rutiny událostí pro dva uživatelské ovládací prvky. V návrháři poklikejte na ctlFirstName ovládací prvek. Tato akce vygeneruje obslužnou rutinu události pro TextChanged událost a otevře editor kódu.
Přepněte zpět do Návrháře a dvojklikem na ctlLastName ovládací prvek vygenerujte druhou obslužnou rutinu události.
Přepněte zpět na návrháře a dvakrát klikněte na záhlaví formuláře. Tato akce vygeneruje obslužnou rutinu pro událost Load.

Vlastnictví	Hodnota
Název	`ctlFirstName`
Umístění	`12, 12`
Velikost	`191, 53`
Titulek	`First Name`

Vlastnictví	Hodnota
Název	`ctlLastName`
Umístění	`12, 71`
Velikost	`191, 53`
Titulek	`Last Name`

Vlastnictví	Hodnota
Název	`lblFullName`
Umístění	`12, 252`

V editoru kódu přidejte metodu s názvem UpdateNameLabel. Tato metoda kombinuje obě názvy k vytvoření zprávy a přiřadí zprávu ovládacímu lblFullName prvku.

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

Pro oba obslužné programy událostí volejte metodu TextChanged:

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

Nakonec volejte metodu UpdateNameLabel z události Load formuláře:

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

Spusťte projekt a zadejte jméno a příjmení:

aplikace Windows Forms se dvěma textovými poli vytvořenými z uživatelských ovládacích prvků a popiskem.

Zkuste resetovat jedno z textových polí stisknutím tlačítka ↻.

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-06-25