Toolbox, Properties és Solution Explorer – a Visual Studio legfontosabb ablakai
Amikor először megnyitsz egy Windows Forms projektet, a Visual Studio tele van ablakokkal, panelekkel és gombokkal. Ne ijedj meg: a felület építéséhez csak három ablak kell igazán. Megtanuljuk, melyik mire való, hogyan hozod vissza, ha eltűnik, és hogyan építesz velük gyorsan egy ablakot.
⏱ kb. 40 perc
🎯 kezdő szint
🧰 fejlesztőkörnyezet
A lecke végére
tudod, mire való a Toolbox, a Properties és a Solution Explorer;
vezérlőt helyezel el az ablakon a Toolboxból;
a Properties ablakban beállítod a vezérlők tulajdonságait;
megkülönbözteted a Properties és az Events nézetet;
ismered az Error List szerepét;
visszahozod az eltűnt ablakokat.
Mielőtt elkezded
Ehhez a leckéhez legyen egy megnyitott Windows Forms projekted, például az előző lecke gyakorlóprojektje. A tervezőben látnod kell az üres Form1 ablakot.
Ha valamelyik ablak nem jelenik meg
A Visual Studio View menüjéből bármikor visszahozhatod őket:
Toolbox: View → Toolbox Ctrl+Alt+X
Properties: View → Properties Window F4
Solution Explorer: View → Solution Explorer Ctrl+Alt+L
Error List: View → Error List Ctrl+\, E
Ha az egész elrendezés összekeveredett: Window → Reset Window Layout.
A Visual Studio ablakában a közepén a tervező (Designer) látszik, ahol az ablak felületét építed. Körülötte négy fontos panelt találsz:
ToolboxÁltalában bal oldalt. A vezérlők (gomb, felirat, beviteli mező) gyűjteménye, ezeket húzod az ablakra.
PropertiesÁltalában jobb alul. A kijelölt elem tulajdonságai (név, felirat, szín, méret) és eseményei.
Solution ExplorerÁltalában jobb felül. A solution és a projekt fájljainak listája.
Error ListÁltalában alul. A fordítási hibák és figyelmeztetések listája.
A Visual Studio legfontosabb ablakai Windows Forms projektben. A panelek helye nálad kissé eltérhet, de a nevük és a szerepük ugyanaz.
A paneleknek nem fix helyük van
Az ablakok pontos helye a beállításoktól és a Visual Studio verziójától függően eltérhet. Ha máshol látod őket, az sem baj. A neveik és a szerepük ugyanaz.
2
Toolbox: a vezérlők gyűjteménye
A Toolbox Common Controls csoportjából a Button vezérlőt az űrlapra helyezzük. A kijelölt gomb körül a méretezési fogópontok is látszanak.
A Toolbox a Visual Studio szerszámosládája. Itt vannak mindazok a vezérlők, amelyeket az ablakra helyezhetsz. Ha nem látod: View → Toolbox, vagy a Ctrl+Alt+X billentyűkombináció.
Nyisd ki a Common Controls csoportot. Itt találod a leggyakoribb vezérlőket: Button, Label, TextBox, CheckBox és a többit.
Húzd a Button elemet az ablakra, vagy kattints rá duplán. Ekkor az ablak bal felső sarkába kerül.
Ha egy vezérlőt nem találsz, használd a Toolbox tetején lévő keresőmezőt.
Az elhelyezett vezérlőt az egérrel mozgathatod, a szélein lévő fogópontokkal pedig átméretezheted.
Üres a Toolbox?
A Toolbox csak akkor mutatja a Windows Forms vezérlőit, ha a tervező van megnyitva és kijelölve. Ha a Form1.cs kódnézetét látod, a Toolbox üres lehet. Váltsd át a tervezőre (lásd a 0.7 leckét).
3
Properties: a kijelölt elem tulajdonságai
Ha kijelölöd a gombot a Formon, a Properties ablakban jelennek meg a tulajdonságai. Itt módosíthatod többek között a Text, Font és BackColor értékeket.
Kattints egy vezérlőre (vagy az ablak üres részére), és a Properties ablakban megjelennek a tulajdonságai. Ha nem látod: View → Properties Window, vagy az F4 billentyű.
A felső legördülő listaMegmutatja, melyik elem van kijelölve (például button1 System.Windows.Forms.Button). Itt másik elemet is kiválaszthatsz.
Properties nézetA tulajdonságok listája. Az érték módosítása azonnal látszik a tervezőben.
Events nézet (villám)Azokat az eseményeket mutatja, amelyek a kijelölt elemmel történhetnek. Például a Click azt jelenti, hogy a felhasználó rákattint az elemre. Később ezekhez kódot kapcsolunk.
RendezésA tulajdonságokat csoportosíthatod (Categorized) vagy ábécé szerint rendezheted (Alphabetical). Kezdetben az ábécé szerinti rendezés könnyebb.
A leggyakrabban használt tulajdonságok:
(Name)A vezérlő neve a kódban, például btnMentes. A kód ezen a néven hivatkozik rá.
TextA vezérlőn látható felirat. A gombon ez áll, például „Mentés”.
Size és LocationA méret és a hely az ablakon. Az egérrel húzva is módosíthatod.
BackColor és ForeColorA háttérszín és a betűszín.
FontA betűtípus, a méret és a stílus.
Enabled és VisibleHasználható-e a vezérlő, és látszik-e egyáltalán.
Jósolj!
Egy gombot a Toolboxból húztál az ablakra. Átírtad a Text tulajdonságát Mehet-re. Mi lett a gomb (Name) tulajdonsága?
Jóslat ellenőrzése
Továbbra is button1. A Text a felirat, amelyet a felhasználó lát, a (Name) pedig a kódban használt név. A kettő külön tulajdonság, ezért a Text átírása nem változtatja meg a nevet. Ha beszédes nevet szeretnél, külön át kell írnod, például btnMehet-re.
Gyorsítás: több elem egyszerre
Ha több vezérlőt jelölsz ki (a Ctrl billentyűt nyomva tartva kattints rájuk egymás után), a Properties ablakban a közös tulajdonságokat egyszerre állíthatod be mindegyiken. Így például három gomb betűméretét egyszerre változtathatod meg.
4
Solution Explorer és Error List
A Solution Explorer a projekted fájljait mutatja (lásd az előző leckét). Ha nem látod: View → Solution Explorer, vagy a Ctrl+Alt+L billentyűkombináció. Itt dupla kattintással megnyithatod a fájlokat, jobb gombbal pedig átnevezheted, törölheted vagy új elemet adhatsz a projekthez.
Az Error List (hibalista) a program fordításakor megjelenő hibákat és figyelmeztetéseket gyűjti. Ha nem látod: View → Error List. Egy hibára duplán kattintva a Visual Studio a kód megfelelő sorára ugrik.
Error (hiba)Piros jelzésű. A program nem fordítható le, amíg ki nem javítod.
Warning (figyelmeztetés)Sárga vagy zöld jelzésű. A program lefordul és lefut, de érdemes elolvasni.
Hol találod az Error Listet?
Nyisd meg a View → Error List menüponttal vagy a Ctrl+\, E billentyűkombinációval. Ha jelenleg nincs hiba a projektben, az Error List üres maradhat. Ez teljesen rendben van.
Később, amikor már kódot írunk, itt jelennek meg a fordítási hibák, figyelmeztetések és üzenetek. Egy hibára duplán kattintva a Visual Studio a problémás kódrészhez ugrik.
5
Mit tegyél, ha eltűnt egy ablak?
Gyakran előfordul, hogy véletlenül bezársz egy panelt, vagy átrendezed az ablakokat, és nem találod őket. Ilyenkor három megoldás van:
A View menüben keresd meg az eltűnt ablakot (Toolbox, Properties Window, Solution Explorer, Error List), és kattints rá.
Ha minden összekeveredett, a Window → Reset Window Layout parancs az eredeti elrendezést állítja vissza.
Ha egy panel elbújik a szélen, és csak ráállva nyílik ki, a rajta lévő tűzőgombbal (pin) rögzítheted.
Nem rontottad el
Az ablakok bezárása és visszahozása nem okoz kárt a projektben. Csak a Visual Studio megjelenését változtatja meg, a programodat nem.
!
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. Eltűnt a Properties ablak
Nem látod a Properties ablakot, nem tudod beállítani a gomb szövegét.Ok és javítás
Valószínűleg bezártad. Nyomd meg az F4 billentyűt, vagy válaszd a View → Properties Window pontot. Ha így sem jelenik meg, használd a Window → Reset Window Layout parancsot.
2. Üres a Toolbox
A Toolboxban nem látod a Button és a Label elemet.Ok és javítás
Valószínűleg kódnézetben vagy, vagy nincs kijelölve a tervező. Kattints a tervező ablakára (a Form1.cs [Design] fülre), és a Toolbox megjeleníti a vezérlőket.
3. A Properties ablak üres vagy nem azt mutatja
Átírnád a gomb szövegét, de a Properties ablak egy másik elem adatait mutatja.Ok és javítás
A Properties mindig a kijelölt elem tulajdonságait mutatja. Kattints a gombra a tervezőben, vagy válaszd ki a felső legördülő listából. Ellenőrizd a felső lista nevét, mielőtt írsz.
4. Véletlenül duplán kattintottál
Egy gombra duplán kattintottál a tervezőben, és megnyílt a kódnézet egy üres metódussal.Ok és javítás
A dupla kattintás létrehozta a gomb Click eseménykezelőjét. Ha nem kell, ne töröld kézzel, mert a Designer fájl hivatkozik rá. Az Events nézetben (villám) töröld a Click sor tartalmát, így a Visual Studio is eltávolítja a kapcsolatot. Ha hagyod, nem árt.
5. Nem találom a gombom nevét a kódban
A kódban a btnMehet nevet használod, de a Visual Studio nem ismeri.Ok és javítás
Valószínűleg a (Name) tulajdonságot nem írtad át, a vezérlő neve még button1. Nyisd meg a Properties ablakot, jelöld ki a gombot, és írd át a (Name) sort. A kódban szereplő név és a (Name) pontosan egyezzen.
Mini feladat: építs egy névjegyablakot
Most együtt összerakunk egy nagyon egyszerű ablakot. Nem írunk még kódot: csak a Toolbox, a Designer és a Properties ablakot használjuk. A cél az, hogy begyakorold, hogyan helyezel el vezérlőket és hogyan módosítod a tulajdonságaikat.
Hozd létre a projektet. Válaszd a File → New → Project menüpontot, majd a Windows Forms App sablont. A projekt neve legyen például NevjegyApp. A frameworknél használd ugyanazt a verziót, amellyel a tanfolyamban dolgozunk. A projekt megnyitása után várd meg, amíg megjelenik a Form1.cs [Design] tervezőnézet.
Nevezd át az ablak fejlécét. Kattints a Form1 üres részére, hogy maga az űrlap legyen kijelölve. Nyisd meg a Properties ablakot (F4), keresd meg a Text tulajdonságot, és írd át erre: Névjegy. A Text itt azt határozza meg, milyen felirat jelenik meg az ablak címsorában.A Form Text tulajdonsága Névjegy értékre állítva.
Helyezz el egy feliratot. A Toolbox ablakban nyisd ki a Common Controls csoportot, keresd meg a Label vezérlőt, majd húzd rá a Formra.A Label már az űrlapon van. A következő lépésben a Properties ablakban átírjuk a nevét és a feliratát.Kattints a Labelre, majd a Properties ablakban állítsd be:
(Name) → lblNev A Label programbeli neve most lblNev.
Text → Neved
A (Name) a vezérlő programon belüli neve, a Text pedig az a felirat, amelyet a felhasználó lát.
Tegyél mellé egy beviteli mezőt. A Toolboxból húzz a Label mellé egy TextBox vezérlőt. Jelöld ki, majd a Properties ablakban a (Name) értékét állítsd txtNev-re. A Text mezőt most hagyd üresen, hiszen ide majd a felhasználó írja be a nevét.
Helyezz el egy gombot. A Toolboxból húzz a Label és a TextBox alá egy Button vezérlőt. Jelöld ki, majd állítsd be:
(Name) → btnKoszon
Text → Köszöntés
Figyeld meg, hogy a gombon látható button1 felirat azonnal Köszöntés-re változik.
Formázd meg a gombot. A gomb maradjon kijelölve. A Properties ablakban keresd meg a BackColor tulajdonságot, és válassz egy tetszőleges háttérszínt. Ezután keresd meg a Font sort, nyisd meg a beállításait, és válassz nagyobb betűméretet, például 12 vagy 14 pt-ot.
Rendezd el az elemeket. Az egérrel húzd a Labelt, a TextBoxot és a Buttont olyan helyre, hogy az ablak áttekinthető legyen. Ha egy vezérlő méretét szeretnéd módosítani, jelöld ki, majd húzd a szélén megjelenő méretező fogópontokat.
Ellenőrizd a kész felületet a Designerben. Nézd végig:
az ablak címe Névjegy;
a Label felirata Neved;
mellette van egy üres TextBox;
alattuk van egy Köszöntés feliratú, színes, nagyobb betűs gomb.
A gomb működését még nem programozzuk be. A következő leckében megtanuljuk a program futtatását, utána pedig azt is, hogyan reagáljon a gomb a kattintásra.
A lényeg ebben a feladatban
Most azt gyakorolod, hogy Toolboxból vezérlőt választasz → elhelyezed a Formon → kijelölöd → a Properties ablakban módosítod. Ha ez a mozdulatsor már magabiztosan megy, készen állsz a következő leckére.
A kész Névjegy felület a Designerben: Neved felirat, TextBox és Köszöntés gomb.
6×
Gyakorlótár: 6 további feladat
1. Melyik ablak mire való?
Párosítsd a három ablakot a megfelelő szereppel:
Toolbox
Properties
Solution Explorer
Szerepek:
a) a vezérlők gyűjteménye, amelyeket a Formra húzol;
b) a kijelölt elem beállításainak listája;
c) a projekt fájljainak fája.
Megoldás megnyitása
Toolbox → (a), Properties → (b), Solution Explorer → (c).
2. Hol állítod be?
Melyik ablakban állítod be egy gomb feliratát (Text) és a nevét ((Name))? Melyik ablakból veszel elő egy új gombot?Megoldás megnyitása
A Text és az (Name) tulajdonságot a Properties ablakban állítod be, miután kijelölted a gombot a tervezőben. Az új gombot a Toolbox-ból húzod a formra vagy kattintással helyezed el.
3. Eltűnt az ablak
Véletlenül bezártad a Properties ablakot. Hogyan hozod vissza?Megoldás megnyitása
A View menüből válaszd a Properties Window menüpontot, vagy nyomd meg az F4 billentyűt. A többi ablak is a View menüből hozható vissza. A Window → Reset Window Layout menüpont az egész elrendezést visszaállítja az alapértelmezettre.
4. Tulajdonságok és események
A Properties ablakban alapból a kijelölt elem tulajdonságait látod. A tetején lévő villám ikonra kattintva átválthatsz az Events, vagyis események nézetére.
Mit jelent itt az, hogy esemény, és mire szolgál ez a nézet?Megoldás megnyitása
Az esemény valami, ami a program használata közben történik egy vezérlővel.
Click → a felhasználó rákattint a gombra;
TextChanged → megváltozik egy szövegmező tartalma;
MouseEnter → az egérmutató a vezérlő fölé kerül.
A villám ikon tehát azt a listát mutatja meg, hogy a kijelölt elem milyen eseményekre tud reagálni. Később ezekhez eseménykezelő kódot kapcsolunk. Ebben a leckében egyelőre csak azt jegyezd meg, hogy:
Properties nézet → milyen az elem és milyen beállításai vannak;
Events nézet → mi történhet vele használat közben.
5. Tervezd meg az elrendezést
Egy ablakra egy címke, egy beviteli mező és egy gomb kerül. Írd le, milyen sorrendben csinálnád, és melyik ablakot használod az egyes lépéseknél.Megoldás megnyitása
Toolbox: húzd a Formra a Label, TextBox és Button vezérlőket.
Designer: rendezd el az elemeket az ablakon húzással és igazítással.
Properties: állítsd be minden elem (Name) és Text tulajdonságát. Például: lblNev, txtNev, btnKoszon.
Events: a Properties ablak villám ikonjánál választhatod ki, milyen eseményre reagáljon a vezérlő. Ezzel majd a későbbi leckékben foglalkozunk részletesen.
Solution Explorer: ha később kódot szeretnél írni, innen nyithatod meg a Form1.cs fájlt.
6. Billentyűparancsok Nehezebb
Írd fel a három ablak megnyitására szolgáló billentyűparancsot vagy menüt, és találj ki egy módszert a megjegyzésükre.Megoldás megnyitása
Properties:F4. Solution Explorer:Ctrl+Alt+L. Toolbox:Ctrl+Alt+X. Ha nem jutnak eszedbe, a View menüben mindig megtalálod őket, és a parancs mellett a billentyű is látszik. Megjegyzési módszer: az F4 a leggyakoribb (tulajdonságok), a másik kettő pedig a Ctrl+Alt kombinációra épül (L mint List a fájlokhoz, X mint a Toolbox eXtra eszközei).
Gyors önellenőrzés
Próbáld meg a választ fejben megadni, és csak utána nyisd le.1. Mire való a Toolbox?
A vezérlők gyűjteménye: innen húzod az ablakra a gombokat, feliratokat, beviteli mezőket.
2. Mire való a Properties ablak?
A kijelölt elem tulajdonságainak és eseményeinek megtekintésére és módosítására.
3. Miben különbözik a (Name) és a Text?
A (Name) a vezérlő neve a kódban, a Text a felhasználónak látható felirat.
4. Hogyan találod meg egy vezérlő eseményeit?
A Properties ablakban a villám (Events) ikonra kattintva.
5. Mit teszel, ha eltűnt egy ablak?
A View menüben visszahozod, vagy a Window → Reset Window Layout paranccsal visszaállítod az elrendezést.
6. Mi a különbség az Error és a Warning között az Error List ablakban?
Az Error fordítási hiba: addig nem fut a program, amíg ki nem javítod. A Warning figyelmeztetés: a program lefut, de érdemes elolvasni.
Mit tudsz már?
Ismered a Toolbox, a Properties és a Solution Explorer szerepét.
Vezérlőt helyezel el az ablakon és beállítod a tulajdonságait.
Megkülönbözteted a (Name) és a Text tulajdonságot.
A legjobb felhasználói élmény érdekében technológiákat, például sütiket használunk, hogy tároljuk és/vagy hozzáférjünk az eszköz információihoz. Ezek elfogadása lehetővé teszi az oldalon belüli viselkedésed vagy egyedi azonosítók adatainak feldolgozását. Ha nem fogadod el vagy vonod vissza a hozzájárulásodat, bizonyos funkciók korlátozottak lehetnek.
Funkcionális
Always active
A technikai tárolás vagy hozzáférés szigorúan szükséges az előfizető vagy felhasználó által kifejezetten kért konkrét szolgáltatás igénybevételének lehetővé tételéhez, vagy kizárólag az elektronikus hírközlő hálózaton keresztül történő kommunikáció továbbításához.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statisztika
A technikai tárolás vagy hozzáférés kizárólag statisztikai célokra történik.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
A technikai tárolás vagy hozzáférés szükséges a felhasználói profilok létrehozásához reklámküldés céljából, vagy a felhasználók követéséhez egy vagy több weboldalon marketing célokból.
