Grafikus C# – Windows Forms tanfolyam › 1.11 lecke

Windows Forms · 1.11 lecke

ErrorProvider, ToolTip és beviteli segítség

Egy jó űrlap megmondja a felhasználónak, hol hibázott, és előre segít kitölteni. Ebben a leckében a hibás mező mellé piros jelzést (ErrorProvider) és a vezérlőkhöz súgószöveget (ToolTip) teszünk. Közben megtanulunk egy olyan metódust írni, amely választ ad: igen vagy nem.

  • kb. 70 perc
  • kezdő–közepes szint
  • hibajelzés és súgó
Diák C# programozást gyakorol egy tanulósarokban

A lecke végére

  • az ErrorProvider segítségével hibajelzést teszel a hibás mező mellé (SetError);
  • a hibajelzést helyes bevitelnél eltünteted;
  • saját, logikai értéket visszaadó metódust írsz (bool, return);
  • a ToolTip komponenssel súgószöveget adsz a vezérlőkhöz;
  • élő ellenőrzést készítesz a TextChanged eseménnyel;
  • felismered a leggyakoribb hibákat.

Mielőtt elkezded

Ehhez a leckéhez kell az 1.10 és az 1.9 lecke, a TextBox, a TextChanged és az if–else ismerete.

1.10 Label, LinkLabel, visszajelzések →

Az ErrorProvider: piros jelzés a mező mellett

Az ErrorProvider egy komponens, amely a hibás mező mellett egy kis piros felkiáltójelet mutat. Ha az egérrel rámutatsz, megjelenik a hibaüzenet. Nem kell hozzá felugró ablak, nem zavarja a munkát.

  1. A Toolbox Components csoportjából húzd az ablakra az ErrorProvider elemet. Az ablak alatti komponenssávban jelenik meg.
  2. A neve legyen epHiba (az előtag ep).
  3. Tegyél az ablakra egy txtNev beviteli mezőt és egy btnKuldes gombot.
Form1.csC#
private void btnKuldes_Click(object sender, EventArgs e)
{
if (txtNev.Text.Trim().Length == 0)
{
epHiba.SetError(txtNev, "A név megadása kötelező.");
}
else
{
epHiba.SetError(txtNev, "");
}
}
SetError(vezérlő, szöveg)A megadott vezérlő mellé hibajelzést tesz a megadott üzenettel.
SetError(vezérlő, "")Üres szöveggel törli a hibajelzést. Ezt a helyes bevitelnél mindig meg kell tenni.
GetError(vezérlő)Visszaadja a vezérlőhöz tartozó hibaüzenetet (üres szöveg, ha nincs hiba).
BlinkStyleA jelzés villogása. Ha zavar, állítsd NeverBlink értékre.

Jósolj!

Üres névvel megnyomod a gombot (megjelenik a piros jelzés), majd beírsz egy nevet, és újra megnyomod a gombot. Eltűnik a jelzés?

Jóslat ellenőrzése

Igen, mert a második kattintásnál az else ág SetError(txtNev, "") hívása törli a jelzést. Ha az else ág hiányozna, a jelzés ott maradna.

📷 Képernyőkép helye

Mit tegyél ide: az űrlap üres névmezővel, a mező mellett a piros ErrorProvider ikonnal, és a felirata megjelenik, ha az egeret a jelzés fölé viszed.Javasolt fájlnév: winforms-1-11-errorprovider.webp · Alt szöveg: Az ErrorProvider piros jelzése az üres beviteli mező mellett

Egy metódus, amely választ ad

Több mezőnél kényelmes egyetlen Ellenoriz() metódusba tenni az összes ellenőrzést. A metódus választ ad vissza: true, ha minden rendben van, false, ha hibát talált. Ehhez a void (nem ad vissza semmit) helyett a bool típus áll a metódus előtt, a végén pedig a return adja meg az értéket.

Form1.csC#
private bool Ellenoriz()
{
bool jo = true;

if (txtNev.Text.Trim().Length == 0)
{
epHiba.SetError(txtNev, "A név megadása kötelező.");
jo = false;
}
else
{
epHiba.SetError(txtNev, "");
}

string email = txtEmail.Text.Trim();

if (!email.Contains("@") || !email.Contains("."))
{
epHiba.SetError(txtEmail, "Adj meg érvényes e-mail címet.");
jo = false;
}
else
{
epHiba.SetError(txtEmail, "");
}

if (txtJelszo.Text.Length < 6)
{
epHiba.SetError(txtJelszo, "A jelszó legalább 6 karakter legyen.");
jo = false;
}
else
{
epHiba.SetError(txtJelszo, "");
}

return jo;
}

private void btnKuldes_Click(object sender, EventArgs e)
{
if (Ellenoriz())
{
MessageBox.Show("Az adatok rendben vannak, elküldve.");
}
}
private bool Ellenoriz()Az ellenőrző metódus. A bool azt jelzi, hogy igaz/hamis értéket ad vissza.
bool jo = true;Induláskor feltételezzük, hogy minden jó. Bármelyik hibánál hamisra állítjuk.
return jo;A metódus végén visszaadjuk az eredményt: true, ha egyetlen hibát sem találtunk.
if (Ellenoriz())A metódus meghívása feltételként: a belseje csak akkor fut, ha minden mező jó.

Miért nem áll meg az első hibánál?

Az Ellenoriz() minden mezőt megvizsgál, akkor is, ha már talált hibát. Így a felhasználó egyszerre látja az összes hibás mezőt, és nem kell sokszor próbálkoznia.

Az e-mail-ellenőrzés csak egyszerű

A Contains("@") és Contains(".") vizsgálat nem tökéletes: az @. szöveget is elfogadja. Egyszerű gyakorláshoz elég. Az igazi, részletes ellenőrzéshez mintaillesztés (regex) kell, amelyet később tanulunk.

Élő ellenőrzés gépelés közben

Ha a mezők TextChanged eseményében is meghívod az Ellenoriz() metódust, a hibajelzések gépelés közben frissülnek, és nem kell a gombra kattintani. A Küldés gombot pedig letilthatod, amíg valami hibás:

Form1.csC#
private void Mezo_TextChanged(object sender, EventArgs e)
{
btnKuldes.Enabled = Ellenoriz();
}
Mezo_TextChangedEgyetlen eseménykezelő, amelyet mindhárom mező TextChanged eseményéhez hozzárendelsz: az Events nézetben a legördülő listából válaszd ki ezt a metódust mindhárom mezőnél.
btnKuldes.Enabled = Ellenoriz();A gomb csak akkor használható, ha az Ellenoriz() igazat ad vissza.

Jósolj!

A program frissen elindult, még semmit nem gépeltél. Látszik hibajelzés a mezők mellett? Használható a Küldés gomb?

Jóslat ellenőrzése

Induláskor nincs hibajelzés, mert az Ellenoriz() még nem futott. Az első betű beírásakor viszont mindhárom mezőre lefut, ezért egyszerre megjelenik mindegyik hiba. Hogy a gomb induláskor is le legyen tiltva, állítsd a btnKuldes.Enabled tulajdonságot a tervezőben False-ra.

A ToolTip: súgó a vezérlőkhöz

A ToolTip komponens kis súgóbuborékot mutat, amikor az egérrel egy vezérlő fölé állsz. Húzd az ablakra a Toolbox Components csoportjából, és nevezd el ttSugo-nak. Ezután minden vezérlő Properties ablakában megjelenik egy új sor: ToolTip on ttSugo. Ide írd be a súgószöveget. Kódból így adhatod meg:

Form1.csC#
private void Form1_Load(object sender, EventArgs e)
{
ttSugo.SetToolTip(txtNev, "Írd be a teljes neved.");
ttSugo.SetToolTip(txtEmail, "Például: nev@example.com");
ttSugo.SetToolTip(txtJelszo, "Legalább 6 karakter.");
}
SetToolTip(vezérlő, szöveg)A vezérlőhöz súgószöveget rendel.
ToolTipTitle és ToolTipIconA buborék címe és ikonja (például Info). A ToolTip tulajdonságai közt állíthatók.
IsBalloonHa True, a súgó felhő alakú.
InitialDelayMennyi idő (ezredmásodpercben) után jelenjen meg a súgó, ha az egér megáll a vezérlőn.

Letiltott vezérlőn nincs súgó

A letiltott (Enabled = False) vezérlőkön a ToolTip általában nem jelenik meg. Ha egy gombot letiltasz, a miértet is írd ki valahol, például egy feliratra.

📷 Képernyőkép helye

Mit tegyél ide: az űrlap egy ToolTip-buborékkal, amely a névmező fölött áll („Írd be a teljes neved.”). A Properties ablakban látszik a „ToolTip on ttSugo” sor.Javasolt fájlnév: winforms-1-11-tooltip.webp · Alt szöveg: Egy ToolTip súgóbuborék a beviteli mező fölött

Hibakeresés: te vagy a hibadetektív

Mi a baj, és hogyan javítod?

Gondold végig az okot, és csak utána nyisd le a megoldást.

1. A hibajelzés nem tűnik el

if (txtNev.Text.Trim().Length == 0)
{
epHiba.SetError(txtNev, "A név megadása kötelező.");
}
Hiba és javítás

Rossz működés: a hibás bevitel után a jelzés ott marad akkor is, ha később jó adatot írnak be. Az else ágban törölni kell: epHiba.SetError(txtNev, "");

2. Kevés paraméter

epHiba.SetError("A név kötelező.");
// CS1501: No overload for method 'SetError' takes 1 arguments
Hiba és javítás

Fordítási hiba (CS1501): a SetError két paramétert vár: azt a vezérlőt, amely mellé a jelzés kerül, és az üzenetet. Helyesen: epHiba.SetError(txtNev, "A név kötelező.");

3. Hiányzik a return

private bool Ellenoriz()
{
bool jo = true;
// ... ellenőrzések ...
}
// CS0161: 'Ellenoriz()': not all code paths return a value
Hiba és javítás

Fordítási hiba (CS0161): a bool típusú metódusnak vissza kell adnia egy értéket. Írd a metódus végére: return jo;

4. Nem jelenik meg a súgó

A vezérlő fölé állsz az egérrel, de nem jelenik meg súgószöveg.

Ok és javítás

Lehetséges okok: nem adtál súgószöveget (nem írtad be a „ToolTip on ttSugo” sorba, vagy nem hívtad a SetToolTip metódust), vagy a vezérlő le van tiltva (Enabled = False). Ellenőrizd mindkettőt.

5. A hibajelző ikon takarásban van

A hibajelző ikon nem látszik, vagy kilóg az ablakból.

Ok és javítás

Az ikon alapból a mező jobb oldalán jelenik meg, ezért ott legyen hely az ablakban. Az ikon helyét a SetIconAlignment metódussal változtathatod, például balra: epHiba.SetIconAlignment(txtNev, ErrorIconAlignment.MiddleLeft);

Mini projekt: regisztrációs űrlap hibajelzéssel

Fejleszd tovább az 1.9 lecke regisztrációs űrlapját:

  1. Mezők: txtNev, txtEmail, txtJelszo (UseSystemPasswordChar: True) és txtJelszo2 a jelszó megerősítéséhez, valamint btnKuldes.
  2. Komponensek: epHiba (ErrorProvider) és ttSugo (ToolTip).
  3. Az Ellenoriz() metódus mindegyik mezőt vizsgálja, a második jelszónál pedig az egyezést is: txtJelszo.Text != txtJelszo2.Text (a != azt jelenti: nem egyenlő).
  4. Az élő ellenőrzés a TextChanged eseményeken keresztül frissíti a hibajelzéseket és a Küldés gombot.
  5. Minden mezőhöz tartozzon ToolTip súgó.
A kód új része az Ellenoriz() metódusbanC#
if (txtJelszo.Text != txtJelszo2.Text)
{
epHiba.SetError(txtJelszo2, "A két jelszó nem egyezik.");
jo = false;
}
else
{
epHiba.SetError(txtJelszo2, "");
}
📷 Képernyőkép helye

Mit tegyél ide: a kész űrlap néhány mezőjénél hibajelzéssel (piros ikon), a kitöltött mezők mellett nincs ikon, a Küldés gomb szürke (letiltott), és az egyik mező fölött látszik a ToolTip.Javasolt fájlnév: winforms-1-11-regisztracio-hibajelzes.webp · Alt szöveg: Regisztrációs űrlap hibajelzésekkel és súgóbuborékkal

Három önálló gyakorlófeladat

Egyszerre csak egyet csinálj: tervezd meg, írd meg, futtasd, ellenőrizd, és csak utána nyisd ki a megoldást.

1. Súgó kódból

Adj kódból súgót a Küldés gombnak: Akkor aktív, ha minden mező helyes.

Egy lehetséges megoldás
ttSugo.SetToolTip(btnKuldes, "Akkor aktív, ha minden mező helyes.");

Figyelem: a letiltott gombon a súgó nem látszik, ezért ez a szöveg inkább az engedélyezett állapotra jó. Ha szeretnéd, tegyél egy feliratot a gomb mellé.

2. Életkor ellenőrzése

Tegyél az űrlapra egy nudKor mezőt (NumericUpDown, 0–120). Ha az érték 14 alatt van, jelezz hibát: 14 év alatt nem lehet regisztrálni.

Egy lehetséges megoldás
if (nudKor.Value < 14)
{
epHiba.SetError(nudKor, "14 év alatt nem lehet regisztrálni.");
jo = false;
}
else
{
epHiba.SetError(nudKor, "");
}

3. Nem villog

Állítsd be, hogy a hibajelzés ne villogjon, és az ikon a mező bal oldalán jelenjen meg.

Egy lehetséges megoldás
private void Form1_Load(object sender, EventArgs e)
{
epHiba.BlinkStyle = ErrorBlinkStyle.NeverBlink;
epHiba.SetIconAlignment(txtNev, ErrorIconAlignment.MiddleLeft);
}

A BlinkStyle és az ikon helye a Properties ablakban is beállítható (a BlinkStyle az ErrorProvideren).

Gyakorlótár: 6 további feladat

Három szinten gyakorolhatsz: alap, közepes és kihívás. Az epHiba ErrorProvider és a ttSugo ToolTip komponenst a Toolbox Components csoportjából húzd az ablakra. Csak a próbálkozás után nyisd le a megoldást.

Alap szint

1. Hibajel az üres névnél

A gomb nyomásakor az üres txtNev mező mellett jelenjen meg a hibajel: Add meg a neved!

Megoldás megnyitása

Az ErrorProvider.SetError(vezérlő, szöveg) a vezérlő mellett piros jelet mutat, amelyre ráállva a szöveg is látszik. Üres szöveggel törölhető a jel.

Form1.csC#
private void btnKuld_Click(object sender, EventArgs e)
{
if (txtNev.Text.Trim().Length == 0)
{
epHiba.SetError(txtNev, "Add meg a neved!");
}
else
{
epHiba.SetError(txtNev, "");
}
}

2. Súgó a gombon

A btnKuld gomb fölé állva jelenjen meg a súgó: Elküldi az űrlapot.

Megoldás megnyitása

A ToolTip komponens a vezérlőkhöz rendel súgószöveget. Beállíthatod kódból (például a Form1_Load eseményben) is. A Properties ablakban az egyes vezérlőknél megjelenik a ToolTip on ttSugo tulajdonság is.

Form1.csC#
private void Form1_Load(object sender, EventArgs e)
{
ttSugo.SetToolTip(btnKuld, "Elküldi az űrlapot.");
ttSugo.SetToolTip(txtNev, "Írd be a teljes neved.");
}

Közepes szint

3. A hibajel eltűnik javításkor

Ha a felhasználó elkezd gépelni a txtNev mezőbe, a hibajel tűnjön el.

Megoldás megnyitása

A TextChanged esemény minden módosításkor lefut. Ha a mező már nem üres, töröljük a hibát. Így a hibajel nem marad a javítás után is a képernyőn.

Form1.csC#
private void txtNev_TextChanged(object sender, EventArgs e)
{
if (txtNev.Text.Trim().Length > 0)
{
epHiba.SetError(txtNev, "");
}
}

4. Mindent egyszerre ellenőrző metódus

Az űrlap három mezőt tartalmaz: txtNev, txtEmail, nudKor (14–120). Írj egy bool UrlapEllenorzes() metódust, amely minden hibás mezőnél hibajelet tesz, és csak akkor ad igaz értéket, ha minden rendben van.

Megoldás megnyitása

A bool ervenyes változó igaz értékről indul, és bármelyik hiba hamisra állítja. Fontos, hogy a metódus mindig az összes mezőt ellenőrzi, nem áll meg az első hibánál: így egyszerre minden hibajel látszik.

Form1.csC#
private bool UrlapEllenorzes()
{
bool ervenyes = true;

if (txtNev.Text.Trim().Length == 0)
{
epHiba.SetError(txtNev, "A név kötelező.");
ervenyes = false;
}
else
{
epHiba.SetError(txtNev, "");
}

if (txtEmail.Text.Trim().Length == 0)
{
epHiba.SetError(txtEmail, "Az e-mail cím kötelező.");
ervenyes = false;
}
else
{
epHiba.SetError(txtEmail, "");
}

if (nudKor.Value < 14)
{
epHiba.SetError(nudKor, "Legalább 14 évesnek kell lenned.");
ervenyes = false;
}
else
{
epHiba.SetError(nudKor, "");
}

return ervenyes;
}

private void btnKuld_Click(object sender, EventArgs e)
{
if (UrlapEllenorzes())
{
MessageBox.Show("Az űrlap rendben van.");
}
}

Kihívás szint

5. E-mail cím alapellenőrzése

Egészítsd ki az ellenőrzést: az e-mail cím tartalmazzon @ jelet, és a @ után legalább egy pontot, amely nem közvetlenül a @ mellett áll. Hibás cím esetén hibajelet kapjon a txtEmail.

Megoldás megnyitása

Az IndexOf('@') a kukac helyét adja (-1, ha nincs). A pont keresését a kukac utáni helytől kezdjük: IndexOf('.', kukac). Ez nem teljes ellenőrzés (az e-mail címek szabályai bonyolultabbak), de a gyakori elírásokat kiszűri.

Form1.csC#
private bool EmailJo(string email)
{
int kukac = email.IndexOf('@');

if (kukac <= 0)
{
return false;
}

int pont = email.IndexOf('.', kukac);

return pont > kukac + 1 && pont < email.Length - 1;
}

private void btnKuld_Click(object sender, EventArgs e)
{
if (EmailJo(txtEmail.Text.Trim()))
{
epHiba.SetError(txtEmail, "");
}
else
{
epHiba.SetError(txtEmail, "Adj meg érvényes e-mail címet!");
}
}

6. Súgó és hibajel együtt

Az űrlap minden mezőjéhez adj ToolTip súgót, amely a szabályt mondja el (például: Legalább 14 évesnek kell lenned.). Ha hiba van, a hibajel ugyanezt az üzenetet mutassa. Hogyan kerülöd el, hogy ugyanazt a szöveget többször kelljen leírnod?

Megoldás megnyitása

A szabályok szövegét állandókba tesszük, és mind a ToolTip, mind az ErrorProvider ugyanazt használja. Így ha módosítani kell a szöveget, egy helyen teszed.

Form1.csC#
private const string KorSzabaly = "Legalább 14 évesnek kell lenned.";
private const string NevSzabaly = "A név kötelező.";

private void Form1_Load(object sender, EventArgs e)
{
ttSugo.SetToolTip(nudKor, KorSzabaly);
ttSugo.SetToolTip(txtNev, NevSzabaly);
}

private void btnKuld_Click(object sender, EventArgs e)
{
epHiba.SetError(nudKor, nudKor.Value < 14 ? KorSzabaly : "");
epHiba.SetError(txtNev, txtNev.Text.Trim().Length == 0 ? NevSzabaly : "");
}

Gyors önellenőrzés

Válaszolj fejben, és csak utána nyisd le a választ.

1. Mit csinál az ErrorProvider.SetError?

A megadott vezérlő mellé hibajelzést tesz az üzenettel. Üres szöveggel törli a jelzést.

2. Miért kell a hibajelzést törölni helyes bevitelnél?

Mert a jelzés magától nem tűnik el: a program törli, ha a hiba megszűnt.

3. Mit jelent a bool típusú metódus?

Olyan metódus, amely igaz/hamis választ ad vissza a return utasítással.

4. Miért nem áll meg az Ellenoriz az első hibánál?

Hogy az összes hibás mezőt egyszerre jelezze a felhasználónak.

5. Hogyan adsz súgót egy vezérlőhöz?

A Properties ablak „ToolTip on ttSugo” soránál, vagy kódból a SetToolTip metódussal.

6. Mit jelent a != jel?

„Nem egyenlő”: igaz, ha a két érték különbözik.

Mit tudsz már?

  • ErrorProviderrel hibajelzést teszel a mezők mellé.
  • Logikai értéket visszaadó metódust írsz.
  • Élő ellenőrzést készítesz a TextChanged eseménnyel.
  • ToolTipekkel súgót adsz a vezérlőkhöz.
  • Felismered a hibajelzés és a súgó tipikus hibáit.

Következő lecke: PictureBox, ImageList és képek

Az űrlap használhatóbb lett. A következő leckében képeket jelenítünk meg az ablakban.