Grafikus C# – Windows Forms tanfolyam › 0.7 lecke Windows Forms · 0.7 lecke 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.Tervezőnézet és kódnézet – az első Windows Forms program futtatása

A lecke végére
- váltasz a tervezőnézet és a kódnézet között;
- futtatod a programot az
F5billentyű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.
Tervezőnézet és kódnézet
Ugyanazt az ablakot kétféleképpen láthatod:
Form1.cs [Design].Form1.cs.Hogyan váltasz a kettő között?
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:
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. 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?
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.
- A tervezőben tegyél az ablakra egy
Label-t:(Name):lblUzenet,Text:Még nem kattintottál. - Tegyél alá egy
Button-t:(Name):btnKattint,Text:Kattints! - Kattints duplán a gombra. A Visual Studio kódnézetben megnyitja az eseménykezelőt, amelyben már ott áll a kurzor.
- Írd be a metódus belsejébe az alábbi sort.
- Nyomd meg az
F5billentyűt, és kattints a gombra.
private void btnKattint_Click(object sender, EventArgs e)
{
lblUzenet.Text = "Szia, világ! Működik!";
}Text tulajdonsága, vagyis az, amit a felhasználó lát az ablakon.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.
- Nyisd meg az Error List ablakot (View → Error List).
- Olvasd el az első hibát, mert a többi gyakran ennek a következménye.
- Kattints duplán a hibára: a Visual Studio a kód megfelelő sorára ugrik.
- 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: ; expectedOk é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. 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.Ok és javítás
4. Nem a legújabb változat fut
Átírtad a szöveget a kódban, de a program a régit mutatja. 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.Ok és javítás
5. Nem lehet újrafordítani
A fordító azt jelzi, hogy a program fájlját másik folyamat használja. 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.Ok és javítás
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.
- Az ablak
Texttulajdonsága legyenÜdvözlő. - Tegyél az ablakra egy
TextBox-ot:(Name):txtNev. - Tegyél alá egy
Button-t:(Name):btnKoszon,Text:Köszöntés. - Tegyél alá egy
Label-t:(Name):lblEredmeny,Text: üres. - Kattints duplán a gombra, és írd meg a kódot:
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. 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! A Egy lehetséges megoldás
private void btnKattint_Click(object sender, EventArgs e)
{
lblUzenet.Text = "Szia, világ! Működik!";
this.Text = "Megnyomtad!";
}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. Az Egy lehetséges megoldás
btnKattint.Enabled = false;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. (a) tervezőnézet (Design), (b) kódnézet (Code), (c) tervezőnézet.Megoldás megnyitása
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). Kódnézet: Megoldás megnyitása
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 Az F5 és a Ctrl+F5 között? Mikor melyiket használnád?Megoldás megnyitása
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? 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.Megoldás megnyitása
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ő? 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 Megoldás megnyitása
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. Tervező: egy Button elhelyezése a formon, a Megoldás megnyitása
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. F7-tel a kódnézetre, Shift+F7-tel a tervezőnézetre. A Solution Explorerben jobb gombbal is választhatsz. Lefordítja a programot, majd elindítja hibakereső módban. Bezárod a program ablakát, vagy a Visual Studióban a Shift+F5 billentyűt nyomod meg (Stop gomb). 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. Mert a Yes az utolsó sikeres változatot indítaná el, nem az aktuálisat. A hibákat ki kell javítani. A gombra duplán kattintasz a tervezőben. A Visual Studio létrehozza a Click eseménykezelőt, és megnyitja a kódnézetet.1. Hogyan váltasz a tervezőnézet és a kódnézet között?
2. Mit csinál az F5?
3. Hogyan állítod le a futó programot?
4. Mit jelent a fordítás?
5. Miért kell mindig No-t válaszolni a „build errors” kérdésre?
6. Hogyan hozol létre eseménykezelőt egy gombhoz a legegyszerűbben?
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.





