01.05 Stvaranje Graficke Aplikacije

Stvaranje grafike aplikacijeJedinica: 5 od 41

U prethodnoj lekciji kreirali smo i testirali jednostavnu konzolnu aplikaciju putem Visual Studija 2010. Ovaj program u stanju je da kreira i grafike aplikacije i to razliitih tipova.Dva najee koriena tipa grafikih aplikacija koje se kreiraju u programu C# su: Windows Forms Applications i Windows Presentation Foundation Applications. U nastavkulekcija opisaemo osnovne karakteristike Windows Presentation Foundationa.

ta je WPFWindows Presentation Foundation je grafika biblioteka koja omoguava kreiranje bogatih grafikih aplikacija baziranih na .NET jezicima.

Osnovna karakteristika ove biblioteke (i ovog pristupa kreiranju grafikih Windows aplikacija) jeste razdvojenost poslovne programske logike (programskog koda) od grafikereprezentacije aplikacije (grafikog koda). Na ovaj nain omoguava se kreiranje kvalitetnog grafikog okruenja, sa mogunou naknadne implementacije poslovne logikeaplikacije, odnosno, sa mogunou jednostavne potpune izmene logike. ta ovo znai? Znai da moemo u potpunosti prepustiti kreiranje grafike reprezentacije dizajneru,koji ne mora da ima nikakve veze sa samim programom. Sa druge strane, moemo kreirati programsku logiku bez ikakve veze sa dizajnerom. Ova dva dela (prezentacioni deo iposlovna logika) uvek se mogu spojiti u celinu i na taj nain se moe finalizirati aplikacija. Odvojene celine realizuju se kroz XAML i cs dokumente. Dok je cs standardan C#dokument, koji sadri iskljuivo C# kod, XAML (Extensible Application Markup Language) je taj koji sadri grafiku reprezentaciju, prikazanu kroz jezik tagova (poput html). Ovedve komponente nazivaju se Markup (XAML) i Code Behind (C#).

Kreiranje WPF projektaKada kreiramo novi projekat u Visual Studiju 2010 trebalo bi da odaberemo WPF Application ablon:

Slika 1 kreiranje WPF aplikacije

Nakon kreiranja projekta, okruenje kreira .csproj dokument, koji sadri listu svih njegovih komponenata. Pre svega, sadri reference za biblioteke PresentationCore,PresentationFramework, System.Xaml i ostale podrazumevane reference za sve projekte (System, System.Data...).

Sistem, takoe, kreira dokumente neophodne za projekat App.xaml i App.xaml.cs. Ovo su dokumenti koji predstavljaju aplikaciju.

Pored ova dva dokumenta, okruenje generie jo dva dokumenta: MainWindow.xaml i MainWindow.xaml.cs. MainWindow.xaml predstavlja prozor, odnosno radnu povrinuaplikacije, dok MainWindow.xaml.cs predstavlja pozadinski deo tog prozora. Ako pristupimo dokumentu App.xaml, primetiemo atribut StartupUri="MainWindow.xaml". Ovajatribut govori aplikaciji da e prvo to e biti prikazano, odnosno, ulazna taka aplikacije, biti - dokument MainWindow.xaml.

Sve ove dokumente (osim csproj, koji nije vidljiv) vidimo unutar Solution Explorer palete. Pored ove, Visual Studio e otvoriti jo dve palete u glavnom delu prozora. Te dvepalete su: Design i XAML palete. Design prikazuje grafiki odabrani xaml dokument, dok XAML prikazuje xaml kod kojim se taj grafiki prikaz reprezentuje:

Slika 2 izgled prozora Visual Studija nakon pokretanja novog WPF projekta

Main WindowMainWindow je poetna taka grafikog dela WPF aplikacije. Ovo je deo koji e se prvi pojaviti kada korisnik otvori aplikaciju i unutar xaml dokumenta okruenje je za naskreiralo sledei sadraj koji reprezentuje ovu komponentu:

Ovaj kod se sastoji od dva taga. Jedan je Window (

Na primer, ako hoemo da u postojeu aplikaciju dodamo jedan taster, dovoljno je da u postojei Grid tag dodamo sledei tag:

Slika 5 kreiranje tastera putem xaml taga

Na isti nain mogue je dodati i ostale tipove kontrola.

U sledeim tabelama moete videti osnovne WPF kontrole prikazane kroz XAML tagove:

Naziv kontrole: Button

Opis kontrole: Taster - osnovni nain da damo korisniku mogunost da izazove neku akciju unutar aplikacije

XAML kod kontrole: Izgled kontrole dizajn: Izgled kontrole aplikacija:

Naziv kontrole: Canvas

Opis kontrole: Kontejner koji je u stanju da prihvati druge kontrole i pozicionira ih apsolutno unutar sebe


Naziv kontrole: ComboBox

Opis kontrole: Standardni padajui meni


1 Click Me!

123456789

10111213

Click Me

1234567

12345678

Item a

Item b

Naziv kontrole: Grid

Opis kontrole: Kontrola koja omoguava prihvatanje drugih kontrola rasporeenih tabelarno


Naziv kontrole: Label

Opis kontrole: Kontrola za prikaz teksta


Naziv kontrole: StackPanel

Opis kontrole: Prikaz razliitih kontrola, poreenih vertikalno jedna za drugom


Naziv kontrole: TextBox

Opis kontrole: Kontrola za korisniki unos teksta


Pored opisanog naina, kontrole je mogue kreirati na jo dva naina: putem GUIja i programabilno.

123456789

1011

12345

Hello

123456789

10111213

Item 1 Item 2 Item 3

1 Hello

Dodavanje kontrola putem GUI-jaDa bismo dodali kontrolu u prozor (ili neki drugi kontejner), moemo, takoe, upotrebiti i Toolbox paletu. Ova paleta se nalazi sa leve strane Visual Studija i, ukoliko nije vidljiva,mogue je prikazati je opcijom glavnog menija: View > Other Windows > Toolbox

Slika 6 aktivacija Toolbox palete

Kada je Toolbox prikazan, kontrole je mogue dodavati u prozor jednostavnim prevlaenjem:

Slika 7 dodavanje WPF kontrole u prozor prevlaenjem

Primer 1

Recimo da hoemo da kreiramo set kontrola za prozor koji preuzima korisnike podatke (korisniko ime i ifru.

Konani izgled prozora trebalo bi da bude kao na sledeoj slici:

Slika 8 prikaz prozora za unos korisnikih podataka

Ovaj posao moemo uraditi na tri naina. Prvi i najjednostavniji je prevlaenjem odgovarajuih kontrola na

odgovarajua mesta na strani:

Slika 9 prikaz reenja za kreiranje prozora za unos korisnikih podataka.

Pored korienja GUI-ja, isti zadatak moemo uraditi i direktno putem xaml koda:

Nakon zavrenog iscrtavanja kontrola, izvrite pokretanje programa opcijom Start Debugging, ili skraenicama F5 ili

Ctrl+F5.

Svojstva WPF kontrolaSvaka WPF kontrola sadri svojstva kojima se moe modifikovati njen izgled i ponaanje. Na primer, kontrolama Button, TextBox i Label, svojstvom Content, podesili smo natpiskoji se nalazio na njima. Takoe, podeavali smo Width i Height svojstva prozora. Ova svojstva mogue je podeavati putem direktnog unosa u xaml kod, putem Propertiespalete i programabilno - kroz cs kod. Ukoliko bismo menjali svojstva putem cs koda, ona ne bi automatski bila promenjena i u xaml kodu.

Slika 10 Properties paleta

WPF dogaajiWPF kontrole su neupotrebljive bez mogunosti da im se doda odgovarajua funkcionalnost. Na primer, u prethodnom primeru, taster Button, koji bi trebalo da izvri logovanjekorisnika, ne izaziva nikakvu reakciju kada se pritisne levim tasterom mia. Sistem koji omoguava da odreena kontrola reaguje na odreenu pojavu naziva se - dogaaj.

WPF je Event-driven tip aplikacije. Ovo znai da se svaka pojava unutar aplikacije registruje, i na osnovu nje, izaziva dogaaj. Svaka ugraena WPF kontrola (a poredugraenih, moemo, naravno, kreirati i sopstvene), sadri predefinisani set dogaaja. Svakom od dogaaja iz ove predefinisane liste mogue je pridruiti odreenufunkcionalnost, tako da, kada kontrola identifikuje da je dolo do nekog dogaaja - automatski startuje ovu funkcionalnost. Ova funkcionalnost naziva se Event handler(rukovalac dogaajima), a proces se naziva Event handling.

Kada hoemo da obradimo neki dogaaj kontrole, unutar taga za tu kontrolu kreiramo odgovarajui atribut koji reprezentuje dogaaj, a zatim moramo kreirati i odgovarajui kodunutar Code Behind dela. Ovaj kod mora se zvati onako kako smo ga nazvali i u xaml atributu.

Na primer, ako bismo tasteru iz prethodnog primera eleli da dodelimo dogaaj koji bi identifikovao aktivaciju tastera, dodali bismo mu atribut Click. Zatim bismo tom atributudodelili neku vrednost. Na primer, button1_Click. Zatim, moramo unutar Code Behind dela kreirati metod koji e se zvati, takoe, button1_Click.

Izgled xaml opisa tastera:

Izgled code behind dela:

Isti kod bie generisan ukoliko izvrimo dvoklik za koji elimo da kreiramo dogaaj.

Primer 2

Kreiraemo jednostavnu aplikaciju koja sadri jedan taster. Kada korisnik aktivira taster, pojavljuje se prozor sa

porukom: You clicked me!

Kreiraemo prvo jednu WPF aplikaciju, smanjiti format prozora na 100x100 i na nju smestiti jednu Button kontrolu:

Slika 11 kreiranje projekta, prozora i Buttoon kontrole

Dvoklikom na Button kontrolu otvaramo rukovaoca dogaaja za tu kontrolu:

1

Slika 12 prikaz Code Behind dela prozora

Unutar rukovaoca dogaaja unosimo liniju:

Slika 13 prikaz aplikacije

Izvrite pokretanje programa opcijom Start debugging, ili skraenicama F5 ili Ctrl+F5.

VebaProblem:

Potrebno je kreirati WPF aplikaciju koja prikazuje listu gradova u padajuem meniju. Kada korisnik odabere neki od gradova iz liste, potrebno je prikazati poruku unutar novogprozora sa nazivom odabranog grada.

Reenje:

Kreirajte novu WPF aplikaciju putem stavke menija File-New Project i dodelite joj naziv CitiesWpf:

Slika 14 kreiranje novog projekta

123456789

MessageBox.Show("You clicked me"); private void button1_Click(object sender, RoutedEventArgs e) { MessageBox.Show("You clicked me!"); }

Slika 15 Definisanje naziva projekta i odabir ablona

Unosom xaml koda, ili prevlaenjem, kreirajte Combo Box kontrolu unutar prozora:

Slika 16 prevlaenje ComboBox kontrole na prozor

Desnim tasterom mia nad ComboBox kontrolom aktivirajte njen Properties panel (ukoliko ve nije aktivan), a zatim iz liste svojstava aktivirajte ekspander za svojstvo Items. Ovosvojstvo predstavlja kolekciju svih stavki padajueg menija:

Slika 17 aktivacija arobnjaka za dodavanje stavki u ComboBox kontrolu

Aktivirajte opciju Add i dodajte naziv grada. Zatim, po istom principu, dodajte i ostale gradove i na kraju, aktivirajte taster OK:

Reference:

http://msdn.microsoft.com/en-us/library/aa970268.aspx#Programming_with_WPF

http://msdn.microsoft.com/en-us/library/ms752324%28VS.100%29.aspx

Slika 18 dodavanje stavki menija

Izvrite dvoklik na ComboBox kontrolu, kako bi se aktivirao rukovalac dogaajem za tu kontrolu. Obratite panju na to da podrazumevani dogaaj ComboBox kontrole nije Click,ve Selection Changed. To znai da e se dogaaj odigrati prilikom izmene odabrane stavke.

Slika 19 generisanje dogaaja za izmenu selektovane stavke ComboBox kontrole

Dodajte kod kojom e biti prikazan sadraj selektovane stavke liste unutar rukovaoca dogaajem Selection Changed:

Izvrite pokretanje programa opcijom Start Debugging, ili skraenicama F5 ili Ctrl+F5

Najvanije iz lekcije:

Windows Presentation Foundation je grafika biblioteka koja omoguava kreiranje bogatih grafikih aplikacija baziranih na .NET jezicima.1.Odvojene celine realizuju se kroz xaml i cs dokumente.2.MainWindow je poetna taka grafikog dela WPF aplikacije.3.Kontrole je mogue kreirati na tri naina: uz pomo biblioteka, GUIja i programabilno.4.WPF je Event-driven tip aplikacije; funkcionalnost dogaaja se naziva Event handler (rukovalac dogaajima), a proces se naziva Event handling.5.

1 MessageBox.Show(((ComboBoxItem)comboBox1.SelectedItem).Content.ToString());

Documents

01.05 Stvaranje Graficke Aplikacije