Grafikus C# – Windows Forms tanfolyam › 0.7 lecke

Windows Forms · 0.7 lecke

Tervezőnézet és kódnézet – az első Windows Forms program futtatása

Eddig a felületet néztük: ablakokat, panelekkel. Most életre keltjük a programot. Megtanuljuk, hogyan váltasz a tervező és a kód között, hogyan indítod el a programot az F5 billentyűvel, és hogyan készíted el az első olyan gombot, amely tényleg csinál valamit.

  • kb. 45 perc
  • kezdő szint
  • az első futtatás
Diák C# programozást gyakorol egy tanulósarokban

A lecke végére

  • váltasz a tervezőnézet és a kódnézet között;
  • futtatod a programot az F5 billentyűvel, és leállítod;
  • érted, mi történik a futtatáskor (fordítás, indítás);
  • létrehozol egy gombhoz tartozó eseménykezelőt, és megírod az első kódsorodat;
  • a hibalista alapján javítod a fordítási hibákat;
  • ismered a futtatás leggyakoribb hibáit.

Mielőtt elkezded

Ehhez a leckéhez kell egy Windows Forms projekt, és ismerned kell a Toolbox és a Properties ablak használatát. Az eseményekről a 0.2 lecke szólt.

0.6 Toolbox, Properties, Solution Explorer →

Tervezőnézet és kódnézet

Ugyanazt az ablakot kétféleképpen láthatod:

Tervezőnézet (Design)Az ablak grafikus képe, ahol a vezérlőket elhelyezed és a tulajdonságaikat beállítod. A fül neve Form1.cs [Design].
Kódnézet (Code)Az ablak C# kódja, ahol az eseménykezelőket és a saját kódodat írod. A fül neve Form1.cs.

Hogyan váltasz a kettő között?

F7Kódnézet megnyitása (View Code).
Shift+F7Tervezőnézet megnyitása (View Designer).
Jobb gomb a Form1.cs-enA Solution Explorerben a menüből választhatsz: View Code vagy View Designer.
Dupla kattintás a Form1.cs-enAz ablak tervezőnézetét nyitja meg.
📷 Képernyőkép helye

Mit tegyél ide: két egymás melletti kép. Bal oldalon a Form1.cs [Design] fül a tervező nézettel (üres ablak, egy gomb), jobb oldalon a Form1.cs fül ugyanazzal a projekttel, kódnézetben. A két fül nevét jelöld nyíllal.Javasolt fájlnév: winforms-0-7-tervezo-es-kodnezet.webp · Alt szöveg: A tervező és a kódnézet fülei a Visual Studio Form1.cs fájlján

Te jössz!

Nyisd meg a projekted Form1.cs fájlját dupla kattintással, majd váltogass az F7 és a Shift+F7 billentyűvel a két nézet között. Figyeld meg, melyik nézetben mit látsz, és mikor jelenik meg a Toolbox.

Az első futtatás

A programot a Visual Studióból indíthatod el. Három lehetőséged van:

F5 (Start)Lefordítja és elindítja a programot hibakereső módban. A Visual Studio felső részén a zöld háromszög gomb is ezt csinálja.
Ctrl+F5Hibakereső nélkül indítja el a programot. Windows Forms alkalmazásnál a lényegi működés ugyanaz.
Shift+F5 (Stop)Leállítja a futó programot. A programablak bezárásával is leáll.
Ctrl+Shift+B (Build)Csak lefordítja a programot, nem indítja el.

A tanfolyamon általában az F5 billentyűt használjuk. Nyomd meg, és az üres ablak megjelenik. Ha a Visual Studio azt kérdezi, hogy mentse-e a módosításokat, igennel válaszolj.

📷 Képernyőkép helye

Mit tegyél ide: a futó program ablaka és mellette (vagy mögötte) a Visual Studio. A Visual Studio felső eszköztárában jelöld meg a zöld Start gombot, és mutasd, hogy futás közben a Stop gomb (piros négyzet) aktív.Javasolt fájlnév: winforms-0-7-elso-futtatas.webp · Alt szöveg: Az első Windows Forms program futtatása a Visual Studio Start gombjával

Egyszerre egy példány

Új futtatás előtt zárd be a korábban elindított programablakot, vagy nyomd meg a Shift+F5 billentyűt. Ha az előző példány még fut, a fordító nem tudja felülírni a program fájlját, és hibát jelezhet.

Mi történik az F5 megnyomásakor?

Mentés→Fordítás (build)→Futtatható program készül→A program elindul

A számítógép nem érti közvetlenül a C# kódot. A fordító lefordítja egy olyan formára, amelyet a gép futtatni tud. Ennek eredménye egy .exe fájl, amely a projekt mappájában a bin alatt található (például bin\Debug). A Visual Studio ezt a fájlt azonnal el is indítja.

A program fut, a Visual Studio is figyel

F5-tel indított programnál a Visual Studio hibakereső módban van. Ez azt jelenti, hogy figyeli a programot, és ha hiba történik, segít megtalálni. A program ablaka a Visual Studiótól függetlenül működik. A hibakereső módról a 13. fejezetben részletesen tanulunk.

Az első saját kódod: egy gomb, amely csinál valamit

Építsünk egy olyan programot, amely a gombnyomásra megváltoztat egy feliratot. Ez a 0.2 leckében tanult esemény gyakorlati megvalósítása.

  1. A tervezőben tegyél az ablakra egy Label-t: (Name): lblUzenet, Text: Még nem kattintottál.
  2. Tegyél alá egy Button-t: (Name): btnKattint, Text: Kattints!
  3. Kattints duplán a gombra. A Visual Studio kódnézetben megnyitja az eseménykezelőt, amelyben már ott áll a kurzor.
  4. Írd be a metódus belsejébe az alábbi sort.
  5. Nyomd meg az F5 billentyűt, és kattints a gombra.
Form1.csC#
private void btnKattint_Click(object sender, EventArgs e)
{
lblUzenet.Text = "Szia, világ! Működik!";
}
btnKattint_ClickA metódus neve: a gomb neve, aláhúzás, majd az esemény neve (Click). Ez fut le, amikor a gombra kattintanak.
lblUzenet.TextA felirat Text tulajdonsága, vagyis az, amit a felhasználó lát az ablakon.
=Értékadás: az új szöveg bekerül a feliratba.
"Szia, világ! Működik!"A szöveg, amelyet kiírunk. Idézőjelben áll, mert szöveges érték.
📷 Képernyőkép helye

Mit tegyél ide: két egymás utáni kép. Az elsőn a futó program a gombnyomás előtt („Még nem kattintottál.”), a másodikon a gombnyomás után („Szia, világ! Működik!”).Javasolt fájlnév: winforms-0-7-elso-gomb.webp · Alt szöveg: Az első Windows Forms program a gombnyomás előtt és után

Jósolj!

Elindítod a programot, de nem kattintasz a gombra. Mit mutat a felirat? Mi történik, ha kétszer kattintasz egymás után a gombra?

Jóslat ellenőrzése

Kattintás nélkül a felirat az eredeti Még nem kattintottál. szöveget mutatja, mert az eseménykezelő csak a kattintáskor fut le. Kétszeri kattintásra ugyanaz látszik, mint az elsőre, mert a második kattintás is ugyanazt a szöveget állítja be a feliratra.

Mit tegyél, ha a futtatás hibára fut?

Ha a kódban hiba van, az F5 megnyomása után nem indul el a program. A Visual Studio ilyenkor egy figyelmeztető ablakot is mutathat, hogy There were build errors. Would you like to continue and run the last successful build? (Fordítási hibák voltak. Folytatod, és az utolsó sikeres változatot futtatod?)

Mindig a Nem (No) a jó válasz

Ha a Yes gombra kattintasz, a program az utolsó hibátlan változatot indítja el, tehát nem azt, amit éppen írtál. Ilyenkor azt hihetnéd, hogy a változtatásaid nem működnek. Mindig a No-ra kattints, és javítsd a hibákat.

  1. Nyisd meg az Error List ablakot (View → Error List).
  2. Olvasd el az első hibát, mert a többi gyakran ennek a következménye.
  3. Kattints duplán a hibára: a Visual Studio a kód megfelelő sorára ugrik.
  4. Javítsd, mentsd el, és próbáld újra az F5-tel.

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. Nem történik semmi a gombnyomásra

// A metódust kézzel gépelted be a Form1.cs-be
private void btnKattint_Click(object sender, EventArgs e)
{
lblUzenet.Text = "Szia!";
}
Ok és javítás

A metódus nincs összekötve a gomb eseményével. Kézzel begépelt metódus nem elég. Töröld, és generáltasd újra a gomb dupla kattintásával a tervezőben, vagy az Events nézetben (villám) válaszd ki a Click sorhoz.

2. Hibaüzenet a ponthoz

lblUzenet.Text = "Szia!"
// CS1002: ; expected
Ok és javítás

Fordítási hiba (CS1002): a sor végéről hiányzik a pontosvessző. Tedd ki a sor végére: lblUzenet.Text = "Szia!";

3. „The designer could not be shown”

A tervező nem tölti be az ablakot, hibaüzenetet mutat.

Ok és javítás

A tervező gyakran akkor sem működik, ha a kódban fordítási hiba van. Nézd meg az Error List ablakot, javítsd a hibákat, majd válaszd a Build → Rebuild Solution parancsot, és nyisd meg újra a tervezőt.

4. Nem a legújabb változat fut

Átírtad a szöveget a kódban, de a program a régit mutatja.

Ok és javítás

Valószínűleg fordítási hiba volt, és a figyelmeztetésre Yes-t választottál (az utolsó sikeres változat indult el). Válaszolj mindig No-val, javítsd a hibát, és futtasd újra.

5. Nem lehet újrafordítani

A fordító azt jelzi, hogy a program fájlját másik folyamat használja.

Ok és javítás

A programod előző példánya még fut. Zárd be az ablakát, vagy nyomd meg a Shift+F5 billentyűt, és futtasd újra.

Mini projekt: kattintós üdvözlő

Készítsd el a következő programot, kódírással együtt: az ablakban egy beviteli mező, egy gomb és egy felirat van. Beírod a nevedet, megnyomod a gombot, és a felirat köszönt.

  1. Az ablak Text tulajdonsága legyen Üdvözlő.
  2. Tegyél az ablakra egy TextBox-ot: (Name): txtNev.
  3. Tegyél alá egy Button-t: (Name): btnKoszon, Text: Köszöntés.
  4. Tegyél alá egy Label-t: (Name): lblEredmeny, Text: üres.
  5. Kattints duplán a gombra, és írd meg a kódot:
Form1.csC#
private void btnKoszon_Click(object sender, EventArgs e)
{
lblEredmeny.Text = $"Szia, {txtNev.Text}!";
}

Ugyanezt a feladatot a 0.1 és a 0.2 leckében már láttad papíron, most te építed meg.

📷 Képernyőkép helye

Mit tegyél ide: a kész Üdvözlő program futás közben: a TextBoxban „Anna”, a Label pedig „Szia, Anna!” szöveget mutat.Javasolt fájlnév: winforms-0-7-udvozlo.webp · Alt szöveg: A kész üdvözlő program, amely Annát köszönti

Önálló gyakorlófeladatok

Először készíts saját megoldást. A lenyitható rész csak ellenőrzéshez van.

1. Az ablak címe

A gombnyomásra az ablak címsora is változzon meg, például: Megnyomtad!

Egy lehetséges megoldás
private void btnKattint_Click(object sender, EventArgs e)
{
lblUzenet.Text = "Szia, világ! Működik!";
this.Text = "Megnyomtad!";
}

A this az ablakot jelenti, a this.Text az ablak címsora.

2. Tiltott gomb

A gomb az első megnyomás után legyen használhatatlan.

Egy lehetséges megoldás
btnKattint.Enabled = false;

Az Enabled tulajdonságot a Properties ablakban is látod. Ha hamis, a gombra nem lehet kattintani.

3. Másolás

Tegyél az ablakra egy txtBe nevű beviteli mezőt. A gombnyomásra a mezőbe írt szöveg jelenjen meg a feliraton.

Egy lehetséges megoldás
lblUzenet.Text = txtBe.Text;

Gyakorlótár: 6 további feladat

Három szinten gyakorolhatsz: alap, közepes és kihívás. Előbb gondolkodj, és csak utána nyisd le a megoldást.

Alap szint

1. Tervező vagy kód?

Melyik nézetben végzed az alábbiakat? (a) egy gomb elhelyezése a formon, (b) az eseménykezelő kódjának megírása, (c) a gomb méretének húzással való módosítása.

Megoldás megnyitása

(a) tervezőnézet (Design), (b) kódnézet (Code), (c) tervezőnézet.

2. Hogyan váltasz?

Írd fel, hogyan váltasz a tervezőnézetről a kódnézetre és vissza (legalább két módon).

Megoldás megnyitása

Kódnézet: F7 billentyű, vagy a Solution Explorerben jobb gomb a Form1.cs fájlon, majd View Code. Tervezőnézet: Shift+F7, vagy a View Designer menüpont, vagy a fájl neve melletti [Design] fül.

Közepes szint

3. F5 vagy Ctrl+F5?

Mi a különbség az F5 és a Ctrl+F5 között? Mikor melyiket használnád?

Megoldás megnyitása

Az F5 a programot hibakereséssel (debugging) indítja: megáll a töréspontoknál, és hiba esetén a Visual Studio megmutatja, hol történt. A Ctrl+F5 hibakeresés nélkül indítja, kicsit gyorsabb, de nem áll meg töréspontnál. Tanuláskor és hibakeresésnél az F5, egy kész program gyors kipróbálására a Ctrl+F5 kényelmes.

4. Az üres ablak

Az F5 megnyomása után megjelenik egy üres ablak. Mit jelent ez? Mit kell tenned, hogy a program leálljon?

Megoldás megnyitása

Ez azt jelenti, hogy a projekt lefordult, és elindult: a Form1 üres, mert még nem tettünk rá semmit. A program leállításához zárd be az ablakot az X gombbal, vagy a Visual Studióban a Stop Debugging (Shift+F5) gombbal. Amíg az ablak nyitva van, a program fut, és vár a felhasználóra.

Kihívás szint

5. A fordítás hibája

Az F5 megnyomása után megjelenik egy ablak, amely szerint a fordítás hibát talált. Hol nézed meg, mi a hiba, és mi a teendő?

Megoldás megnyitása

A Visual Studio az Error List ablakot (View → Error List) használja a hibák felsorolására: a hibaüzenetre duplán kattintva a kódnak arra a sorára ugrik. Olvasd el az üzenetet és a hibakódot (például CS0103), javítsd a legfelső hibát, és fordítsd újra. Gyakran egy hiba több követő hibát okoz, ezért az elsővel kezdd. A programot csak akkor indítja el a Visual Studio, ha a fordítás hibamentes.

6. Az első kis program

Tervezd meg, mit csinálnál az első ablakos programod elkészítéséhez a tervezőben, a kódnézetben és a futtatásnál: egy gombra kattintva jelenjen meg egy felugró üzenet.

Megoldás megnyitása

Tervező: egy Button elhelyezése a formon, a Text és az (Name) beállítása (btnUzenet). Esemény: dupla kattintás a gombra: létrejön a btnUzenet_Click metódus a kódnézetben. Kód: MessageBox.Show("Szia!"); a metódus belsejébe. Futtatás: F5, majd kattintás a gombra: megjelenik a felugró üzenet. Bezárás: az ablak X gombja.

Gyors önellenőrzés

Próbáld meg a választ fejben megadni, és csak utána nyisd le.

1. Hogyan váltasz a tervezőnézet és a kódnézet között?

F7-tel a kódnézetre, Shift+F7-tel a tervezőnézetre. A Solution Explorerben jobb gombbal is választhatsz.

2. Mit csinál az F5?

Lefordítja a programot, majd elindítja hibakereső módban.

3. Hogyan állítod le a futó programot?

Bezárod a program ablakát, vagy a Visual Studióban a Shift+F5 billentyűt nyomod meg (Stop gomb).

4. Mit jelent a fordítás?

A C# kód átalakítását olyan formára, amelyet a számítógép futtatni tud. Az eredmény egy .exe fájl.

5. Miért kell mindig No-t válaszolni a „build errors” kérdésre?

Mert a Yes az utolsó sikeres változatot indítaná el, nem az aktuálisat. A hibákat ki kell javítani.

6. Hogyan hozol létre eseménykezelőt egy gombhoz a legegyszerűbben?

A gombra duplán kattintasz a tervezőben. A Visual Studio létrehozza a Click eseménykezelőt, és megnyitja a kódnézetet.

Mit tudsz már?

  • Váltasz a tervezőnézet és a kódnézet között.
  • Futtatod és leállítod a programot.
  • Érted, mi történik az F5 megnyomásakor.
  • Megírod az első eseménykezelődet.
  • Az Error List alapján javítod a fordítási hibákat.
  • Felismered a futtatás leggyakoribb hibáit.

Szakmai forrás: Microsoft Learn – A Windows Forms áttekintése. A billentyűparancsok az alapértelmezett Visual Studio beállításokra vonatkoznak.

Következő lecke: Program.cs, Application.Run és a Form élete

A program már fut. A következő leckében megnézzük, hogyan indul el az ablak a Program.cs fájlból, és mi történik a Form létrehozásától a bezárásáig.