Do sada smo vidjeli kako raditi sa C # za stvaranje konzolastih aplikacija. No, u scenariju iz stvarnog života tim obično koristi Visual Studio i C # za izradu Windows obrazaca ili web-aplikacija.
Aplikacija Windows obrazac je aplikacija koja je dizajnirana za pokretanje na računalu. Neće se pokretati u web pregledniku, jer tada postaje web aplikacija.
Ovaj će se vodič usredotočiti na to kako možemo stvoriti aplikacije temeljene na sustavu Windows. Također ćemo naučiti neke osnove o radu s različitim elementima aplikacije C # Windows.
U ovom vodiču za Windows naučit ćete-
- Osnove Windows obrazaca
- Pozdrav svijetu u Windows obrascima
- Dodavanje kontrola u obrazac
- Rukovanje događajima za kontrole
- Stablo i PictureBox kontrola
Osnove Windows obrazaca
Aplikacija za Windows obrasce je ona koja se izvodi na stolnom računalu. Aplikacija za Windows obrasce obično će imati zbirku kontrola poput oznaka, tekstualnih okvira, okvira s popisima itd.
Ispod je primjer jednostavne aplikacije za Windows obrazac C #. Prikazuje jednostavan zaslon za prijavu kojem korisnik može pristupiti. Korisnik će unijeti potrebne vjerodajnice, a zatim će kliknuti gumb Prijava za nastavak.
Dakle, primjer kontrola dostupnih u gornjoj aplikaciji
- Ovo je zbirka kontrola naljepnica koje se obično koriste za opis susjednih kontrola. Dakle, u našem slučaju imamo 2 okvira za tekst, a oznake se koriste da poruče korisniku da je jedan okvir za unos korisničkog imena, a drugi za lozinku.
- Dva okvira za tekst koriste se za korisničko ime i lozinku koje će korisnik unijeti.
- Konačno, imamo kontrolu gumba. Kontrola gumba obično će imati neki kôd za izvođenje određenog skupa radnji. Tako bismo, na primjer, u gornjem slučaju, mogli pritisnuti gumb da izvrši radnju provjere valjanosti korisničkog imena i lozinke koje korisnik unese.
C # Pozdrav svijetu
Pogledajmo sada primjer kako u Visual Studio možemo implementirati jednostavnu aplikaciju 'hello world'. Za to bismo trebali provesti dolje navedene korake
Korak 1) Prvi korak uključuje stvaranje novog projekta u Visual Studiju. Nakon pokretanja Visual Studija, morate odabrati opciju izbornika Novo-> Projekt.
Korak 2) Sljedeći je korak odabir vrste projekta kao aplikacije Windows Forms. Ovdje također moramo spomenuti naziv i mjesto našeg projekta.
- U dijaloškom okviru projekta možemo vidjeti razne mogućnosti za stvaranje različitih vrsta projekata u Visual Studiju. Kliknite opciju Windows s lijeve strane.
- Kada u prethodnom koraku kliknemo opcije Windows, moći ćemo vidjeti opciju za Windows Forms Application. Kliknite ovu opciju.
- Dati ćemo naziv za prijavu. U našem slučaju to je DemoApplication. Također ćemo osigurati mjesto za pohranu naše aplikacije.
- Na kraju, kliknemo gumb "U redu" kako bismo Visual Studiou omogućili stvaranje našeg projekta.
Ako se slijede gornji koraci, dobit ćete donji izlaz u Visual Studiju.
Izlaz:-
Vidjet ćete dizajner obrazaca prikazan u Visual Studiju. Upravo u ovom dizajneru obrazaca započet ćete graditi svoju aplikaciju Windows Forms.
U Exploreru rješenja moći ćete vidjeti i rješenje DemoApplication. Ovo rješenje sadržavat će dolje navedene 2 projektne datoteke
- Aplikacija za obrazac pod nazivom Forms1.cs. Ova će datoteka sadržavati sav kôd za Windows obrazac.
- Glavni program pod nazivom Program.cs zadana je kodna datoteka koja se kreira kada se u Visual Studio kreira nova aplikacija. Ovaj će kôd sadržavati početni kôd za aplikaciju u cjelini.
Na lijevoj strani Visual Studija vidjet ćete i ToolBox. Okvir alata sadrži sve kontrole koje se mogu dodati u Windows obrasce. Kontrole poput okvira za tekst ili naljepnice samo su neke od kontrola koje se mogu dodati u Windows obrasce.
Ispod je snimka zaslona kako izgleda Toolbox.
Korak 3) U ovom ćemo koraku obrascu dodati oznaku koja će prikazivati "Hello World". Iz okvira s alatima morat ćete odabrati kontrolu oznake i jednostavno je povući na obrazac.
Nakon što povučete naljepnicu u obrazac, možete vidjeti naljepnicu ugrađenu u obrazac kao što je prikazano dolje.
Korak 4) Sljedeći korak je prijeći na svojstva kontrole i promijeniti tekst u 'Hello World'.
Da biste prešli na svojstva kontrole, morate desnom tipkom miša kliknuti na kontrolu i odabrati opciju izbornika Svojstva
- Ploča svojstava također se prikazuje u Visual Studiju. Dakle, za kontrolu naljepnica, u kontroli svojstava idite na odjeljak Tekst i unesite "Hello World".
- Svaka kontrola ima skup svojstava koja opisuju kontrolu.
Ako slijedite sve gornje korake i pokrenete svoj program u Visual Studiju, dobit ćete sljedeći izlaz
Izlaz:-
U izlazu možete vidjeti da se prikazuje Windows obrazac. Također možete vidjeti da je 'Hello World' prikazan na obrascu.
Dodavanje kontrola u obrazac
Već smo vidjeli kako dodati kontrolu u obrazac kad smo u prethodnom odjeljku dodali kontrolu oznake za prikaz "Hello World".
Pogledajmo ostale kontrole dostupne za Windows obrasce i vidjet ćemo neka njihova uobičajena svojstva.
U našoj aplikaciji za Windows obrasce u primjerima C # stvorit ćemo jedan obrazac koji će imati sljedeće funkcije.
- Sposobnost korisnika da unese ime i adresu.
- Opcija za odabir grada u kojem korisnik boravi
- Sposobnost korisnika da unese opciju za spol.
- Mogućnost odabira tečaja koji korisnik želi naučiti. Omogućit će odabir i za C # i za ASP.Net
Pa pogledajmo pojedine kontrole detaljno i dodajte ih za izgradnju obrasca sa gore spomenutom funkcionalnošću.
Grupna kutija
Okvir grupe koristi se za logičko grupiranje kontrola u odjeljak. Uzmimo primjer ako ste imali zbirku kontrola za unos detalja poput imena i adrese osobe. U idealnom slučaju, ovo su detalji o osobi, pa biste te detalje željeli imati u zasebnom odjeljku na obrascu. U tu svrhu možete imati grupni okvir. Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku
Korak 1) Prvi korak je povlačenje kontrole Groupbox na Windows obrazac iz okvira s alatima kao što je prikazano u nastavku
Korak 2) Nakon dodavanja grupnog okvira, idite na prozor svojstava klikom na kontrolu grupnog okvira. U prozoru svojstava idite na svojstvo Tekst i promijenite ga u "Korisnički detalji".
Jednom kada napravite gore navedene promjene, vidjet ćete sljedeći izlaz
Izlaz:-
U izlazu možete jasno vidjeti da je Groupbox dodan u obrazac. Također možete vidjeti da je tekst grupnog okvira promijenjen u "Korisnički detalji".
Kontrola naljepnica
Sljedeća dolazi Label Control. Kontrola oznake koristi se za prikaz teksta ili poruke korisniku na obrascu. Kontrola naljepnica obično se koristi zajedno s ostalim kontrolama. Uobičajeni primjeri su kada se oznaka dodaje zajedno s kontrolom tekstualnog okvira.
Oznaka korisniku pokazuje što se očekuje popuniti u okviru za tekst. Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku. Dodati ćemo dvije oznake, jednu koja će se zvati "ime", a drugu "adresa". Oni će se koristiti zajedno s kontrolama tekstualnog okvira koje će biti dodane u kasnijem odjeljku.
Korak 1) Prvi korak je povlačenje kontrole oznaka na Windows obrazac iz okvira s alatima kao što je prikazano u nastavku. Obavezno povucite kontrolu naljepnice 2 puta kako biste mogli imati jednu za "ime", a drugu za "adresu".
Korak 2) Nakon dodavanja naljepnice, idite na prozor svojstava klikom na kontrolu naljepnice. U prozoru svojstava idite na svojstvo Tekst svake kontrole oznake.
Jednom kada napravite gore navedene promjene, vidjet ćete sljedeći izlaz
Izlaz:-
Možete vidjeti kontrole oznaka dodane u obrazac.
Tekstualni okvir
Okvir za tekst koristi se za dopuštanje korisniku da unese neki tekst u Windows aplikaciju u C #. Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku. U obrazac ćemo dodati 2 tekstualna okvira, jedan za Ime, a drugi za adresu koju će korisnik unijeti
Korak 1) Prvi je korak povući kontrolu okvira za tekst na Windows obrazac iz okvira s alatima kao što je prikazano u nastavku
Korak 2) Nakon dodavanja tekstualnih okvira, idite na prozor svojstava klikom na kontrolu tekstualnog okvira. U prozoru svojstava idite na svojstvo Name i dodajte smisleno ime u svaki okvir za tekst. Na primjer, tekstni okvir za korisnika nazovite txtUser, a za adresu txtAddress. Za kontrole treba napraviti konvenciju i standard imenovanja, jer tim kontrolama postaje lakše dodati dodatnu funkcionalnost, što ćemo vidjeti kasnije.
Jednom kada napravite gore navedene promjene, vidjet ćete sljedeći izlaz
Izlaz:-
U izlazu možete jasno vidjeti da su okviri za tekst dodani u obrazac.
Okvir s popisom
Okvir popisa koristi se za prikaz popisa stavki na Windows obrascu. Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku. U obrazac ćemo dodati okvir s popisom za pohranu nekih gradskih lokacija.
Korak 1) Prvi korak je povlačenje kontrole okvira s popisom na Windows obrazac iz okvira s alatima kao što je prikazano u nastavku
Korak 2) Jednom kad je okvir s popisom dodan, idite na prozor svojstava klikom na kontrolu okvira s popisom.
- Prvo promijenite svojstvo kontrole okvira s popisom, u našem smo slučaju to promijenili u lstCity
- Kliknite svojstvo Predmeti. To će vam omogućiti dodavanje različitih stavki koje se mogu prikazati u okviru s popisom. U našem smo slučaju odabrali stavke "kolekcija".
- U uređivač zbirke nizova, koji će se pojaviti, unesite imena gradova. U našem slučaju ušli smo u "Mumbai", "Bangalore" i "Hyderabad".
- Na kraju kliknite gumb "U redu".
Jednom kada napravite gore navedene promjene, vidjet ćete sljedeći izlaz
Izlaz:-
U izlazu možete vidjeti da je Listbox dodan u obrazac. Također možete vidjeti da je okvir s popisom popunjen vrijednostima grada.
Radio gumb
Gumb za odabir koristi se za prikaz popisa predmeta od kojih ih korisnik može odabrati. Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku. Dodati ćemo radio gumb za mušku / žensku opciju.
Korak 1) Prvi je korak povući kontrolu 'radio gumba' na Windows obrazac iz okvira s alatima kao što je prikazano dolje.
Korak 2) Jednom kad je radio gumb dodan, idite na prozor svojstava klikom na kontrolu gumba Radio.
- Prvo morate promijeniti svojstvo teksta obje radio kontrole. Idite na prozore svojstava i promijenite tekst u muški jedan radio gumb, a tekst drugog u ženski.
- Slično tome, promijenite svojstvo imena obje radio kontrole. Idite na prozore svojstava i promijenite ime u 'rdMale' jednog radio gumba, a u 'rdfemale' za drugi.
Ako napravite gornje promjene, vidjet ćete sljedeći izlaz
Izlaz:-
Vidjet ćete radio gumbe dodane u obrazac za Windows.
Potvrdni okvir
Potvrdni okvir koristi se za popis opcija u kojima korisnik može odabrati više izbora. Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku. Dodati ćemo 2 potvrdna okvira u naše Windows obrasce. Ovi će okviri pružiti korisniku mogućnost da li želi naučiti C # ili ASP.Net.
Korak 1) Prvi korak je povlačenje kontrole potvrdnog okvira na Windows obrazac iz okvira s alatima kao što je prikazano u nastavku
Korak 2) Nakon dodavanja potvrdnog okvira, idite na prozor svojstava klikom na kontrolu potvrdnog okvira.
U prozoru svojstava,
- Prvo morate promijeniti svojstvo teksta obje kontrole okvira za potvrdu. Idite na prozore svojstava i promijenite tekst u C # i ASP.Net.
- Slično tome, promijenite svojstvo imena obje radio kontrole. Idite na prozore svojstava i promijenite ime u chkC jednog potvrdnog okvira, a u chkASP drugog.
Jednom kada napravite gore navedene promjene, vidjet ćete sljedeći izlaz
Izlaz:-
Dugme
Gumb se koristi da bi se korisniku omogućilo da klikne na gumb koji bi zatim započeo obradu obrasca. Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku. Dodati ćemo jednostavan gumb pod nazivom "Pošalji" koji će se koristiti za slanje svih podataka na obrascu.
Korak 1) Prvi je korak povući kontrolu gumba na Windows obrazac iz okvira s alatima kao što je prikazano u nastavku
Korak 2) Jednom kad je gumb dodan, idite na prozor svojstava klikom na kontrolu gumba.
- Prvo morate promijeniti svojstvo teksta kontrole gumba. Idite na prozore svojstava i promijenite tekst u 'submit'.
- Slično tome, promijenite svojstvo imena kontrole. Idite na prozor svojstava i promijenite ime u 'btnSubmit'.
Jednom kada napravite gore navedene promjene, vidjet ćete sljedeći izlaz
Izlaz:-
Čestitamo, sada imate svoj prvi osnovni Windows obrazac. Idemo sada na sljedeću temu kako bismo vidjeli kako možemo upravljati događajima za kontrole.
C # Rukovanje događajima za kontrole
Kada radite s Windows obrascem, možete dodavati događaje u kontrole. Događaj je nešto što se događa kada se izvrši neka radnja. Vjerojatno najčešća radnja je klikanje gumba na obrascu. U C # Windows Forms možete dodati kod koji se može koristiti za izvršavanje određenih radnji kada se na obrascu pritisne gumb.
Obično kada se na obrascu pritisne gumb, to znači da bi se trebala izvršiti neka obrada.
Pogledajmo jedan od događaja i kako se s njim može postupati prije nego što prijeđemo na scenarij događaja s gumbima.
U donjem primjeru prikazat će se događaj za kontrolu Listbox. Dakle, kad god je stavka odabrana u kontroli popisa, trebao bi se pojaviti okvir s porukom koji prikazuje odabranu stavku. Izvršimo sljedeće korake da bismo to postigli.
Korak 1) Dvaput kliknite na okvir s popisom u dizajneru obrazaca . Na taj način Visual Studio će automatski otvoriti datoteku koda za obrazac. I automatski će dodati metodu događaja kodu. Ova metoda događaja aktivirat će se kad god se odabere bilo koja stavka na popisu.
Iznad je isječak koda koji Visual Studio automatski dodaje kada dvokliknete kontrolu okvira s popisom na obrascu. Sada dodamo donji odjeljak koda ovom isječku koda, kako bismo dodali potrebnu funkcionalnost događaju u popisu.
- Ovo je metoda obrade događaja koju Visual Studio automatski kreira kada dvokliknete kontrolu okvira popisa. Ne trebate brinuti o složenosti naziva metode ili parametara proslijeđenih metodi.
- Ovdje dobivamo SelectedItem kroz svojstvo lstCity.SelectedItem. Ne zaboravite da je lstCity naziv naše kontrole popisa. Zatim koristimo metodu GetItemText da bismo dobili stvarnu vrijednost odabrane stavke. Zatim ovu vrijednost dodjeljujemo tekstualnoj varijabli.
- Konačno, koristimo metodu MessageBox da bismo korisniku prikazali vrijednost tekstualne varijable.
Kada napravite gornje promjene i pokrenete program u Visual Studiju, vidjet ćete sljedeći izlaz
Izlaz:-
Iz izlaza možete vidjeti da će se kad se odabere bilo koja stavka s popisa pojaviti okvir s porukom. Ovo će prikazati odabranu stavku s popisa.
Pogledajmo sada konačnu kontrolu koja je metoda klika na gumb. Opet ovo slijedi istu filozofiju. Samo dvaput kliknite gumb u Dizajneru obrazaca i automatski će se dodati metoda za obradu događaja gumba. Tada samo trebate dodati donji kod.
- Ovo je metoda obrade događaja koju Visual Studio automatski kreira kada dvaput kliknete kontrolu gumba. Ne trebate brinuti o složenosti naziva metode ili parametara proslijeđenih metodi.
- Ovdje dobivamo vrijednosti unesene u okvir za ime i adresu. Vrijednosti se mogu preuzeti iz svojstva teksta tekstnog okvira. Zatim vrijednosti dodjeljujemo 2 varijablama, imenu i adresi.
- Konačno, koristimo metodu MessageBox da bismo korisniku prikazali vrijednosti imena i adrese.
Kada napravite gornje promjene i pokrenete program u Visual Studiju, vidjet ćete sljedeći izlaz
Izlaz:-
- Prvo unesite vrijednost u polje za ime i adresu.
- Zatim kliknite gumb Pošalji
Nakon što kliknete gumb Pošalji, otvorit će se okvir s porukom i ispravno će vam pokazati što ste unijeli u odjeljak s korisničkim podacima.
Stablo i PictureBox kontrola
Postoje još dvije kontrole koje možemo pogledati, jedna je „Kontrola stabla“, a druga „Kontrola slike“. Pogledajmo primjere kako možemo primijeniti ove kontrole
Kontrola stabla
- Kontrola stabla koristi se za popis stavki na drvetu poput načina. Vjerojatno je najbolji primjer kada vidimo sam Windows Explorer. Struktura mapa u programu Windows Explorer slična je strukturi nalik stablu.
Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku.
Korak 1) Prvi korak je povlačenje kontrole stabla na Windows obrazac iz okvira s alatima kao što je prikazano dolje
Korak 2) Sljedeći je korak započeti dodavanje čvorova u kolekciju stabala kako bi se mogla pojaviti u stablu u skladu s tim. Prvo, slijedimo donje potkorake za dodavanje korijenskog čvora u zbirku stabala.
- Idite na alatni okvir svojstava za kontrolu prikaza stabla. Kliknite svojstvo Čvora. Ovo će otvoriti TreeNode Editor
- U programu TreeNode Editor kliknite gumb Dodaj korijen da biste dodali korijenski čvor u kolekciju stabala.
- Zatim promijenite tekst korijenskog čvora i navedite ga kao korijenski i kliknite gumb "U redu". To će dodati korijenski čvor.
Korak 3) Sljedeći je korak započeti dodavanje podređenih čvorova u zbirku stabala. Slijedimo donje potkorake za dodavanje podređenog čvora korijenu u kolekciju stabala.
- Prvo kliknite gumb Dodaj dijete. To će vam omogućiti dodavanje podređenih čvorova u kolekciju Tree.
- Za svaki podređeni čvor promijenite svojstvo teksta. Nastavite ponavljati prethodni korak i ovaj korak te dodajte 2 dodatna čvora. Na kraju ćete imati 3 čvora, kao što je prikazano gore, s tekstom kao Oznaka, Gumb i Potvrdni okvir.
- Kliknite gumb U redu
Nakon što napravite gore navedene promjene, vidjet ćete sljedeći izlaz.
Izlaz:-
Moći ćete vidjeti prikaz stabla dodan u obrazac. Kada pokrenete aplikaciju Windows obrazac, možete proširiti korijenski čvor i vidjeti podređene čvorove na popisu.
Kontrola PictureBox-a
Ova se kontrola koristi za dodavanje slika u Winforms C #. Pogledajmo kako to možemo primijeniti na primjeru prikazanom u nastavku.
Korak 1) Prvi korak je povlačenje kontrole PictureBox na obrazac C # Windows iz okvira s alatima kao što je prikazano u nastavku
Korak 2) Sljedeći je korak zapravo dodavanje slike na kontrolu slike. To se može učiniti slijedeći korake u nastavku.
- Prvo kliknite svojstvo Image za kontrolu PictureBox. Otvorit će se novi prozor.
- U ovom prozoru kliknite gumb Uvezi. Ovo će se koristiti za pričvršćivanje slike na kontrolu okvira slika.
- Otvorit će se dijaloški okvir u kojem ćete moći odabrati sliku za pričvršćivanje okvira sa slikama
- Kliknite gumb U redu
Ako napravite gornje promjene, vidjet ćete sljedeći izlaz
Izlaz:-
Iz izlaza možete vidjeti da se slika prikazuje na obrascu.
Sažetak
- Windows obrazac u aplikaciji C # je onaj koji se izvodi na radnoj površini računala. Visual Studio obrazac zajedno s C # može se koristiti za stvaranje aplikacije Windows Forms.
- Kontrole se mogu dodati u Windows obrasce C # putem Alata u Visual Studiju. Kontrole poput oznaka, potvrdnih okvira, radio gumba itd. Mogu se dodati u obrazac putem okvira s alatima.
- Također se mogu koristiti napredne kontrole poput kontrole prikaza stabla i kontrole PictureBox.
- Obrađivači događaja koriste se za odgovaranje na događaje generirane iz kontrola. Najčešći je onaj dodan za događaj klikom na gumb.