Megosztás a következőn keresztül:

Felhasználói vezérlő létrehozása

Ez a cikk bemutatja, hogyan vehet fel felhasználói vezérlőt a projektbe, majd hogyan adhat hozzá felhasználói vezérlőt egy űrlaphoz. Olyan újrafelhasználható felhasználói vezérlőt fog létrehozni, amely vizuálisan vonzó és funkcionális. Az új vezérlő egy TextBox vezérlőt egy Button vezérlővel csoportosít. Amikor a felhasználó kiválasztja a gombot, a szövegmezőben lévő szöveg törlődik. További információ a felhasználói vezérlőkről: Felhasználói vezérlők áttekintése.

A felhasználói vezérlés felhasználóinak megismerése

Ebben a cikkben a fogyasztó kifejezés minden olyan kódra hivatkozik, amely a felhasználói vezérlőt használja. Ez a következőket foglalja magában:

  • A felhasználói vezérlőt tartalmazó űrlapok.
  • Egyéb vezérlők , amelyek a felhasználói vezérlőt üzemeltetik.
  • A felhasználói vezérlőtárra hivatkozó alkalmazások.

Felhasználói vezérlő létrehozásakor újrahasználható összetevőt hoz létre. A fogyasztó az, aki ezt az összetevőt használja azáltal, hogy egy űrlapon helyezi el, beállítja annak tulajdonságait, vagy válaszol az eseményekre. A felhasználónak nem kell tudnia a felhasználói vezérlőt alkotó belső vezérlőkről (például az TextBox és Button) – csak az Ön által elérhetővé tenni kívánt tulajdonságokkal és eseményekkel kommunikálnak.

Alapvető kódminta a felhasználói vezérlőkhöz

A részletes implementáció hozzáadása előtt érdemes megismerni a felhasználói vezérlő minimálisan működőképes kódmintáját. A felhasználói vezérlőnek a lényege a következő:

  • Eseménytovábbítás – Események átadása belső vezérlőkről a fogyasztónak.
  • Tulajdonságexpozíció – Lehetővé teszi a fogyasztó számára a belső vezérlési tulajdonságok elérését.
  • Logikai viselkedés – A belső vezérlők közötti interakciók kezelése.

Az alábbi kód ezeket a mintákat mutatja be. Az alapszintű felhasználói vezérléshez nincs szüksége az összes kódra, de ezek a minták segítenek létrehozni egy professzionális, újrafelhasználható összetevőt, amely jól integrálható a tervezővel és a fogyasztói alkalmazásokkal.

Új felhasználói vezérlő hozzáadása

Miután megnyitotta a Windows Forms-projektet a Visual Studióban, a Visual Studio-sablonokkal létrehozhat egy felhasználói vezérlőt:

  1. A Visual Studióban keresse meg a Megoldáskezelő ablakot. Kattintson a jobb gombbal a projektre, és válassza a >Felhasználói vezérlő hozzáadása (Windows Forms)lehetőséget.

    Jobb gombbal a Visual Studio megoldáskezelőre kattintva felhasználói vezérlőt adhat hozzá egy Windows Forms-projekthez

  2. Állítsa a vezérlő nevétClearableTextBox-re, majd nyomja meg a Hozzáadás gombot.

    Elem hozzáadása párbeszédpanel a Visual Studio Windows Forms alkalmazásban

A felhasználói vezérlő létrehozása után a Visual Studio megnyitja a tervezőt:

A Windows Formshoz készült Visual Studio felhasználói vezérlőtervezője

A törölhető szövegdoboz tervezése

A felhasználói vezérlő összetevőkből áll, amelyek a tervezőfelületen létrehozott vezérlők, ugyanúgy, mint az űrlapok tervezésekor. A felhasználói vezérlő és annak rendszerelem-vezérlőinek hozzáadásához és konfigurálásához kövesse az alábbi lépéseket:

  1. Ha a tervező meg van nyitva, a felhasználói vezérlő tervezőfelületének kell lennie a kijelölt objektumnak. Ha nem, kattintson a tervezőfelületre a kijelöléshez. Adja meg a következő tulajdonságokat a Tulajdonságok ablakban:

    Ingatlan Érték
    Minimumméret 84, 53
    Méret 191, 53

  2. Adjon hozzá egy Label vezérlőt. Adja meg a következő tulajdonságokat:

    Ingatlan Érték
    Név lblTitle
    Elhelyezkedés 3, 5

  3. Adjon hozzá egy TextBox vezérlőt. Adja meg a következő tulajdonságokat:

    Ingatlan Érték
    Név txtValue
    Horgony Top, Left, Right
    Elhelyezkedés 3, 23
    Méret 148, 23

  4. Adjon hozzá egy Button vezérlőt. Adja meg a következő tulajdonságokat:

    Ingatlan Érték
    Név btnClear
    Horgony Top, Right
    Elhelyezkedés 157, 23
    Méret 31, 23
    Szöveg ↻

    A vezérlőnek a következő képhez hasonlóan kell kinéznie:

    Visual Studio Windows Forms-szal, az imént megtervezett felhasználói vezérlővel.

  5. Nyomja le az F7 billentyűt az osztály kódszerkesztőjének ClearableTextBox megnyitásához.

  6. Végezze el a következő kódmódosításokat:

    1. A kódfájl tetején importálja a névteret System.ComponentModel .

    2. Adja hozzá az DefaultEvent attribútumot az osztályhoz. Ez az attribútum beállítja, hogy melyik esemény jön létre, amikor a fogyasztó (a vezérlőt használó űrlap vagy alkalmazás) duplán kattint a vezérlőre a tervezőben. További információ az attribútumokról: Attribútumok (C#) vagy attribútumok áttekintése (Visual Basic).

      using System.ComponentModel;

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

      Imports System.ComponentModel

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox

    3. Adjon hozzá egy eseménykezelőt, amely továbbítja az TextBox.TextChanged eseményt a felhasználói vezérlő felhasználóinak:

      [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

      Figyelje meg, hogy az eseményen deklarált Browsable attribútum található. Amikor a Browsable rendszer egy eseményre vagy tulajdonságra alkalmazza, azt szabályozza, hogy az elem látható-e a Tulajdonságok ablakban, amikor a vezérlő ki van jelölve a tervezőben. Ebben az esetben true a rendszer paraméterként adja át az attribútumnak, amely azt jelzi, hogy az eseménynek láthatónak kell lennie.

    4. Adjon hozzá egy karakterlánctulajdonságot, Text, amely elérhetővé teszi a TextBox.Text tulajdonságot a vezérlőfelület használói számára.

      [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. Adjon hozzá egy karakterlánctulajdonságot, Title, amely elérhetővé teszi a Label.Text tulajdonságot a vezérlőfelület használói számára.

      [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. Váltson vissza a ClearableTextBox tervezőre, és kattintson duplán a btnClear vezérlőre, hogy létrehozza az Click esemény kezelőjét. Adja hozzá a következő kódot a kezelőhöz, amely törli a szövegmezőt 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. Végül a projekt létrehozásához kattintson a jobb gombbal a projektre a Megoldáskezelő ablakban, és válassza a Build lehetőséget. Nem lehetnek hibák, és a build befejezése után a ClearableTextBox vezérlő megjelenik az eszközkészletben.

A következő lépés a vezérlő használata egy űrlapon.

Mintaalkalmazás

Ha az utolsó szakaszban létrehozott egy új projektet, akkor van egy Form nevű Űrlap1, ha nem, akkor hozzon létre egy új űrlapot.

  1. A Megoldáskezelő ablakban kattintson duplán az űrlapra a tervező megnyitásához. Ki kell jelölni az űrlap tervezési felületét.

  2. Állítsa be az űrlap tulajdonságát Size a következőre 432, 315: .

  3. Nyissa meg az Eszközkészlet ablakot, és kattintson duplán a ClearableTextBox vezérlőre. Ennek a vezérlőnek a projektről elnevezett szakasz alatt kell szerepelnie.

  4. Ismét kattintson duplán a ClearableTextBox vezérlőre egy második vezérlő létrehozásához.

  5. Térjen vissza a tervezőhöz, és válassza el egymástól a vezérlőket, hogy mindkettő látható legyen.

  6. Válasszon ki egy vezérlőt, és adja meg a következő tulajdonságokat:

    Ingatlan Érték
    Név ctlFirstName
    Elhelyezkedés 12, 12
    Méret 191, 53
    Cím First Name

  7. Válassza ki a másik vezérlőt, és állítsa be a következő tulajdonságokat:

    Ingatlan Érték
    Név ctlLastName
    Elhelyezkedés 12, 71
    Méret 191, 53
    Cím Last Name

  8. Az Eszközkészlet ablakban adjon hozzá egy címkevezérlőt az űrlaphoz, és állítsa be a következő tulajdonságokat:

    Ingatlan Érték
    Név lblFullName
    Elhelyezkedés 12, 252

  9. Ezután létre kell hoznia az eseménykezelőket a két felhasználói vezérlőhöz. A tervezőben kattintson duplán a ctlFirstName vezérlőre. Ez a művelet létrehozza az esemény eseménykezelőt TextChanged , és megnyitja a kódszerkesztőt.

  10. Váltson vissza a tervezőre, és kattintson duplán a ctlLastName vezérlőre, hogy létrehozza a második eseménykezelőt.

  11. Váltson vissza a tervezőre, és végezzen dupla kattintást az űrlap címsorára. Ez a művelet létrehoz egy eseménykezelőt az Load eseményhez.

  12. A kódszerkesztőben adjon hozzá egy metódust UpdateNameLabel. Ez a módszer egyesíti a két nevet egy üzenet létrehozásához, és hozzárendeli az üzenetet a lblFullName vezérlőhöz.

    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. Mindkét TextChanged eseménykezelő esetében hívja meg a metódust 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. Végül hívja meg az UpdateNameLabel metódust az űrlap Load eseményéből:

    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

Futtassa a projektet, és adjon meg egy utó- és vezetéknevet:

Egy Windows Forms-alkalmazás két, felhasználói vezérlőkből létrehozott szövegmezővel és egy címkével.

Próbálja meg lenyomni a ↻ gombot az egyik szövegdoboz alaphelyzetbe állításához.