Stvaranje grafike aplikacije

Jedinica: 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 nastavku
lekcija opisaemo osnovne karakteristike Windows Presentation Foundationa.

ta je WPF
Windows 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 grafike
reprezentacije aplikacije (grafikog koda). Na ovaj nain omoguava se kreiranje kvalitetnog grafikog okruenja, sa mogunou naknadne implementacije poslovne logike
aplikacije, 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 i
poslovna 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). Ove
dve komponente nazivaju se Markup (XAML) i Code Behind (C#).

Kreiranje WPF projekta
Kada 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 povrinu
aplikacije, dok MainWindow.xaml.cs predstavlja pozadinski deo tog prozora. Ako pristupimo dokumentu App.xaml, primetiemo atribut StartupUri="MainWindow.xaml". Ovaj
atribut 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 dve
palete 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 Window
MainWindow 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 nas
kreiralo sledei sadraj koji reprezentuje ovu komponentu:
Ovaj kod se sastoji od dva taga. Jedan je Window (<Window ....</Window>) i unutar njega se nalazi set atributa vezanih za sam prozor, a drugi je Grid (<Grid ....</Grid>),
unutar koga e se nalaziti sve kontrole koje e biti izloene u prozoru.
Ono to, zapravo, pie u atributima ovog Window taga jeste:
Kreirati klasu MyWpfApplication.MainWindow koja e naslediti klasu Window i predstavljae prozor aplikacije (Window x:Class="MyWpfApplication.MainWindow"...).
Ova klasa e imati tri predefinisana atributa Title, Height i Width, koji e respektivno predstavljati naslov, visinu i irinu prozora (Title="MainWindow" Height="350"
Width="525")

Ukoliko bismo pokuali da izmenimo neke od ovih atributa, izmene bi bile momentalno prikazane u dizajn prozoru/paleti:
Sli ka 4 - izmene u XAML-u momentalno su vidljive na prikazu (u dizajnu)


Biblioteka kontrola
Pored osnovnog naina funkcionisanja, da bi se kreirala WPF aplikacija potrebno je poznavati i biblioteku WPF kontrola. Ova biblioteka sadri kontrole, uz pomo kojih moemo
dodavati funkcionalnost aplikaciji i to su kontrole karakteristine i za bilo koju drugu grafiku aplikaciju: tasteri, natpisi, tekst polja, paneli, padajui meniji...
Svaku od ovih kontrola moemo jednostavno dodati na stranu, postavljanjem njenog taga unutar xaml dokumenta.
1
2
3
4
5
6
7
8
9
<Window x:Class="MyWpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">

<Grid>

</Grid>
</Windows>
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
XAML kod kontrole: Izgled kontrole dizajn: Izgled kontrole aplikacija:







Naziv kontrole: ComboBox
Opis kontrole: Standardni padajui meni
XAML kod kontrole: Izgled kontrole dizajn: Izgled kontrole aplikacija:





1 <Button Name="button">Click Me!</Button>
1
2
3
4
5
6
7
8
9
10
11
12
13
<Button Name="myButton"

BorderBrush="Black"

BorderThickness="1"

Click="myButtonOnClick"

ClickMode="Press">

Click Me

</Button>
1
2
3
4
5
6
7
<Canvas Background="Black"

Height="100" Width="100">

<!-- Child controls -->

</Canvas>
1
2
3
4
5
6
7
8
<ComboBox Name="myComboBox" Margin="0,0,0,90">
<ComboBoxItem>
Item a
</ComboBoxItem>
<ComboBoxItem>
Item b
</ComboBoxItem>
</ComboBox>



Naziv kontrole: Grid
Opis kontrole: Kontrola koja omoguava prihvatanje drugih kontrola rasporeenih tabelarno
XAML kod kontrole: Izgled kontrole dizajn: Izgled kontrole aplikacija:







Naziv kontrole: Label
Opis kontrole: Kontrola za prikaz teksta
XAML kod kontrole: Izgled kontrole dizajn: Izgled kontrole aplikacija:







Naziv kontrole: StackPanel
Opis kontrole: Prikaz razliitih kontrola, poreenih vertikalno jedna za drugom
XAML kod kontrole: Izgled kontrole dizajn: Izgled kontrole aplikacija:







Naziv kontrole: TextBox
Opis kontrole: Kontrola za korisniki unos teksta
XAML kod kontrole: Izgled kontrole dizajn: Izgled kontrole aplikacija:






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

1
2
3
4
5
6
7
8
9
10
11
<Grid ShowGridLines="True"
Width="100" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<!-- Child controls -->
</Grid>
1
2
3
4
5
<Label Name="myLabel">

Hello

</Label>
1
2
3
4
5
6
7
8
9
10
11
12
13
<StackPanel

Name="myStackPanel"

Orientation="Vertical">

<Label>Item 1</Label>

<Label>Item 2</Label>

<Label>Item 3</Label>

</StackPanel>
1 <TextBox Name="myTextBox">Hello</TextBox>
Dodavanje kontrola putem GUI-ja
Da 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 aktivaci ja 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:

<Window x:Class="MyWpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="User Login" Height="133" Width="250">
<Grid Height="108" Name="grid1" Width="233">
<TextBox Height="23" HorizontalAlignment="Left" Margin="70,10,0,0" Name="textBox1"
VerticalAlignment="Top" Width="157" />
<Label Content="User name: " Height="28" HorizontalAlignment="Left" Margin="-2,8,0,0"
Name="label1" VerticalAlignment="Top" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="70,38,0,0" Name="textBox2"
VerticalAlignment="Top" Width="157" />
<Label Content="Password" Height="28" HorizontalAlignment="Left" Margin="1,38,0,0"
Name="label2" VerticalAlignment="Top" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="151,66,0,0"
Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>


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

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


WPF dogaaji
WPF kontrole su neupotrebljive bez mogunosti da im se doda odgovarajua funkcionalnost. Na primer, u prethodnom primeru, taster Button, koji bi trebalo da izvri logovanje
korisnika, 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 pored
ugraenih, moemo, naravno, kreirati i sopstvene), sadri predefinisani set dogaaja. Svakom od dogaaja iz ove predefinisane liste mogue je pridruiti odreenu
funkcionalnost, 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 kod
unutar 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 atributu
dodelili 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 <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="151,66,0,0" Name="button1" VerticalAlignment="Top" Width="75"
1
2
3
4
private void button1_Click(object sender, RoutedEventArgs e)
{

}

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.


Veba
Problem:
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 novog
prozora 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

1
2
3
4
5
6
7
8
9
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. Ovo
svojstvo 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());