WinForms

WinForms

A technológia részleteiben az előadáson került bemutatásra. Gyakorlati szempontból: WinForms segítségével GUI-val rendelkező asztali alkalmazások készíthetők. Régóta létezik a .NET Framework-ben ez a megoldás, viszont elterjedtsége miatt a .NET Core is megkapta a támogatást. Könnyedsége (a gyakorlat szempontjából) abból adódik, hogy egy grafikus tervező segítségével lehet megalkotni a felhasználói felületet HTML, XML használata nélkül. Az implementáció publikusan elérhető GitHubon a dotnet projekt alatt winforms néven.

A .NET Core-os megvalósítás során történt néhány olyan változtatás, amely miatt nem kompatibilisek a .NET Framework-ös projektek a Core-ral. A portolás megkönnyítése érdekében írták ezt a blog posztot.

Komponensek

Ablak

Egy alkalmazás alapegysége a Form. Minden egyes ablak (fő-, dialógus-, stb) egy Form vagy annak valameny leszármazottja. A Form a System.Windows.Forms névtérben található és rendelkezik egy megszokott ablak funkcióival (átméretezés, teljes képernyő, jobb felül gombok).

Elrendezések

Alkalmazásfejlesztés-I kurzusból még talán megmaradt, hogy ha a felhasználói felületet kóddal állítottuk össze, akkor különböző elrendezések (layout-ok) voltak használva.

Az elrendezés segít az egyes komponensek elhelyezésében az ablakon, ezt a WinForms is támogatja.

• SplitContainer
• TabControl
• GroupBox
• TableLayoutPanel
• FlowLayoutPanel

A kódból összerakós móddal ellentétben a grafikus tervezőben ezek rikán használatosak (a gyakorlaton nem).

Vezérlők, menük

Ide tartozik minden GUI-n elhelyezhető elem - a JavaFX-ben látott elemek itteni megfelelői - gombok, beviteli mezők, menük.

WinForms alkalmazás létrehozása

Projekt létrehozása

Egy új projekt létrehozásakor válasszuk ki a Windows Forms App lehetőségt -- C# nyelv és nem .NET Framework.

Érdemes az új projekt ablak keresőjébe beírni a winforms mágikus kulcsszót.

Kezdőállapot

A fejlesztőkörnyezet létrehoz egy Form-ot a projekt létrehozásákor. Ez az üres ablak látható alapértelmezetten Form1 néven.

Jobb oldalon, a Solution Explorer mellett található a Properties ablak, mely tartalmazza a kiválasztott komponens (jelen esetben még a Form1) tulajdonságait. A kiemelt részen, a Text átírásával módosítható az ablak fejlécében található cím. Ezek a tulajdonságok mind kódból is módosíthatók.

Egy Form két fájlból áll, egyet a fejlesztőkörnyezet generál, a másikat pedig a programozó módosítja.

A ~.Designer.cs-t az IDE módosítja, a ~.resx-be pedig resourceok helyezhetők.

Az előző ábrán a Solution Explorerben kiemelt Form1 kattintva látható egy Form1.Designer.cs fájl. Azt megnyitva látható mit generált az IDE a Windows Form Designer generated code régió alatt. Ezt a fájlt nem életbiztosítás módosítani, az IDE újra fogja generálni, viszont néhány esetben kelleni fog.

Pl. A grafikus tervezőben az eseménykezelés részhez odaírunk egy eseménykezelő függvény nevet, amit az IDE legenerál a "programozó által módosítható fájlba". Ezután meggondoljuk magunkat és onnan kitöröljük, viszont az IDE által generált fájlba ott marad a hivatkozás, és emiatt nem fordul a projekt. Ilyen esetben nyugodtan ki lehet törölni a pirosan aláhúzott kódot.

Toolbox

Minden olyan komponens, ami elhelyezhető egy Formon, az a (alapértelmezetten) baloldali Toolbox-ban található. Ez a bal oldalon elrejtve található, kinyitva megjelenik a tartalma.

Példa - Bejelentkeztető ablak

1. Helyezzünk el két szöveges elemet (felhasználónév, jelszó) az ablakban.

Ez a Label vezérlővel valósítható meg. A vezérlő által megjelenített szöveg és a programbéli neve külön-külön tulajdonság, melyet a Properties ablakban lehet módosítani.

1. Helyezzünk el két beviteli mezőt.

Erre a TextBox alkalmas. A felhasználónév vezérlőjét nevezzük el userName-nek, esetleg userNameTextBox-nak. Kódból ezen a néven hivatkozható a vezérlő. A jelszóhoz tartozó vezérlő esetén járjunk el ugyanígy (persze azt ne userName-nek nevezzük el). Amennyiben az a cél, hogy a jelszó ne látszódjon beíráskor sem, akkor a PasswordChar tulajdonságát át kell állítani, milyen karakterek látszódjanak a helyén.

1. Készítsünk egy Cancel és egy Login gombot. Button

A Cancel gomb esetén állítsunk be viselkedést: DialogResult tulajdonság legyen Cancel, hogy a gomb úgy viselkedjen, ahogy a Cancel gombok szoktak.

A legenerált kódot a <formnév>.Designer.cs fájlban tudjuk megvizsgálni (partial class). A saját kódunkat pedig a partial class folytatásában tudjuk írogatni. Ezt a Form-on állva az F7 billentyűvel érhetjük el vagy a Solution Explorerben jobb kattintás a Form1.cs-re és View Code.

Nézzünk két példát:

Kattintsunk duplán a Login gombra: a Visual Studio átirányít a code behind-ba és generált egy metódust _Click néven. Itt végezhetjük el az esemény kezelését, természetesen minden vezérlő állapota elérhető a függvényből, hiszen partial az osztály.

A tervező módra visszanavigálva az események között (villám) megtalálható a Login_Click metódus hozzárendelve a gombhoz.

private void Login_Click(object sender, EventArgs e)
{
  string username = userNameTextBox.Text;
  string password = passwordTextBox.Text;

  MessageBox.Show($"{username} {password}");
}

Kattintsunk duplán egy szimpatikus komponensre, várjuk meg, hogy létrejöjjön a metódus, töröljük ki kézzel, mentsük el, és navigáljunk vissza a design nézetbe. Ebben az esetben egy hibaüzenetet fogunk látni.

Azért kaptuk ezt a hibaüzenetet, mert kitöröltünk egy metódust, amit már a rákötöttünk egy komponensre és nem találja a kitörölt metódust. Feloldásához a hivatkozást is ki kell törölni, melyet a <formnév>.Design.cs-ben tudjuk megtenni (egy vagy több pirossal aláhúzott sort kell keresni).

Heroes alkalmazás

Készítsünk egy hősnyilvántartó alkalmazást, amiben a Marvel univerzum hőseit vehetjük fel és listázhatjuk ki. Az alkalmazásban tárolt adatokat a memóriában tároljuk, a megvalósításhoz pedig az MVC tervezési mintát használjuk.

Egy hős a következő tulajdonságokkal rendelkezik

• ID
• Name: pl. Tony Stark
• HeroName: pl. Vasember
• Age
• Power, általánosan: maga által készített, szerzett, születetten meglévő

GUI

• Főablak, amiben egy menüsor szerepel felvétel és listázás menüpontokkal

• Felvétel: a menüpontra kattintva egy újabb ablak jelenjen meg, ebben egy form legyen a tulajdonságoknak megfelelően, Cancel és Add/OK gombokkal.
• A name és heroName mezők kitöltése kötelező, dobjunk üzenetet a felhasználónak, ha üresek.
• Az életkort állítsuk default 30-ra.
• Sikeres hozzáadás esetén zárjuk be az ablakot, Cancel gomb megnyomására zárjuk be az ablakot és ne mentsünk.

• Egy táblázat a főablakra, ahova kilistázhatjuk a felvett hőseinket

Modell és controller

Folytatódik...

Hivatkozások

WinForms

WinForms .NET Framework

How to port a Windows Forms desktop app to .NET Core

Windows Forms Designer for .NET Core Released

C# Windows Forms Application Tutorial with Example

Getting started with winforms

A Marvel-moziuniverzum szereplőinek listája

---

Utolsó frissítés: 2023-08-07 09:17:05