SVEUČILIŠTE U ZAGREBU
FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA
TIMSKI ZADATAK
Objektno i deklarativno programiranje u Silverlightu
Željko Tepšić (voditelj tima)
Nikša Marušić
Ivana Miković
Mario Mustapić
Zagreb, lipanj, 2008

Objektno i deklarativno programiranje u Silverlightu
Sadržaj
1. Uvod u Microsoft Silverlight ................................................................................. 3
1.1 Silverlight 1.0 ................................................................................................. 3
1.2 Silverlight 2.0 ................................................................................................. 4
2. Interaktivna aplikacija za crtanje .......................................................................... 5
2.1 Objektni model ............................................................................................... 5
2.1.1 Implementacija SilverlightRenderer klase .............................................. 7
2.2 Grafičko korisničko sučelje i interaktivnost ..................................................... 8
2.2.1 Tipke ...................................................................................................... 9
2.2.2 StrokeUserControl ............................................................................... 10
2.2.3 ColorPaletteUserControl ...................................................................... 10
2.2.4 PointInfoBox ........................................................................................ 12
2.2.5 DrawingEditorToolBar ......................................................................... 13
2.2.6 DrawingEditor ...................................................................................... 14
2.2.6.1 DrawingCanvas MouseEvents ..................................................... 15
2.2.6.2 Drawing Methods ......................................................................... 15
2.2.6.3 ActionButton Methods .................................................................. 15
3. Korisničko sučelje .............................................................................................. 16
3.1 Glavni izbornik (Drawing toolbar) ................................................................. 17
3.1.1 Izbornik akcija ..................................................................................... 17
3.1.2 Izbornik oblika..................................................................................... 18
3.1.3 Izbornik stilova .................................................................................... 19
3.2 Radna površina (Canvas) ............................................................................ 20
3.3 Info odjeljak (InfoBar) ................................................................................... 20
4. Literatura ........................................................................................................... 21
2

Uvod u Microsoft Silverlight
1. Uvod u Microsoft Silverlight
Microsoft Silverlight nova je tehnologija koja predstavlja dodatak za web preglednike.
Pruža podršku bogatim internet aplikacijama poput animacija, vektorske grafike i
audio – video sadržaja. Silverlight, razvijan pod kodnim imenom WPF/E 1 , konkurira
popularnim proizvodima namijenjenim web preglednicima koji su već neko vrijeme
prisutni na Internetu, poput dodataka Adobe Flash, Adobe Flex, JavaFX i Apple
Quick Time. Također se očekuje i podrška za mobilne uređaje
s operacijskim sustavima Windows Mobile 6 i Symbian.
Podrška za operacijske sustave otvorenog koda (GNU/Linux)
se razvija pod imenom Moonlight. Silverlight je dizajniran na
način da radi sporazumno s XAML-om 2 i pruža podršku za
JavaScript koji ujedno predstavlja programsku logiku koja se
koristi u verziji 1.0. XAML se koristi za označavanje vektorske
grafike i animacija. Također je omogućena i podrška za
dinamičko učitavanje XML sadržaja kojim se može upravljati
korištenjem DOM 3 sučelja. S verzijom 2.0 programska logika
može biti zapisana u bilo kojem .NET jeziku, uključujući Ruby i Python. Za
dizajniranje grafičkog korisničkog sučelja koristi se aplikacija Microsoft Expression
Blend. Visual Studio 2008 koristimo za razvijanje Silverlight aplikacija. Pritom
moramo imati instaliranu podršku za kreiranje projekata i CoreCLR koju nam pruža
dodatak Silverlight Tools for Visual Studio, trenutno u beta verziji.
1.1 Silverlight 1.0
Interaktivnost omogućava Silverlight, ali kontrole za unos su HTML kontrole koje se
nalaze iznad Silverlight sadržaja. Silverlight 1.0 sastoji se od temeljnog
prezentacijskog okružja, koje je odgovorno za korisničko sučelje, interaktivnost,
grafiku, animacije, prikaz multimedijskih sadržaja i DOM integraciju. Sastoji se od
sljedećih elemenata:
Input – manipuliranje unosom s tipkovnice, miša itd.
UI core – renderiranje slika, vektorske grafike, teksta i animacija.
Media – reproduciranje multimedijskih sadržaja.
XAML – podrška dizajniranju korisničkog sučelja korištenjem XAML jezika za
označavanje.
Pokretanje Silverlight aplikacije počinje pozivanjem Silverlight kontrole iz HTML
stranice, koja zatim učitava XAML datoteku. Navedena datoteka sadrži objekt
Canvas koji se ponaša kao držač mjesta ostalih elemenata. Programska
1
WPF/E – Windows Presentation Foundation/Everywhere
2
XAML - Extensible Application Markup Language
3
DOM – Document Object Model
3

Objektno i deklarativno programiranje u Silverlightu
manipulacija korisničkog sučelja, odnosno Canvas objekta je podržana skriptnim
jezikom JavaScript, koji koristimo za modificiranje DOM-a.
1.2 Silverlight 2.0
Ova verzija Silverlight-a uključuje .NET okružje, implementirajući potpunu CLR
verziju kao i .NET okruženje 3.0, što omogućuje izvršavanje bilo kojeg .NET jezika
uključujući VB.NET i C#. Višestruke instance CoreCLR-a uključene u Silverlight
mogu biti udomaćene u jednom procesu, što omogućuje XAML datoteci da sadrži
code-behind kod, zapisan u bilo kojem .NET jeziku. Na taj način možemo programski
upravljati Silverlight aplikacijom, ali i HTML stranicom koja sadrži Silverlight kontrolu.
XAML datoteka, kao i kod, su kompajlirani u .NET asemblije, koji su zatim
kompresirani korištenjem ZIP-a i pohranjeni u .xap datoteku. Silverlight se isporučuje
s olakšanom knjižnicom klasa koja sadrži podršku za XML web servise, mrežne
komponente i LINQ API. Ova knjižnica klasa je podskup i smanjena verzija .NET
BCL-a 4 . Verzija .NET okružja u Silverlightu sadrži podskup WPF programskog
modela, uključujući podršku za objekte, dokumente itd. Uključena osnovna knjižnica
klasa pruža podršku za kolekcije, regularne izraze, upravljanje stringovima i pristup
podacima. Silverlight može upravljati podacima u RSS, POX i JSON formatu, kao
dopuna XML-u. Mrežnu podršku mogu koristiti Silverlight aplikacije za komunikaciju
putem HTTP-a. Silverlight 2.0 uključuje DLR 5 , koji omogućava kompilaciju i
izvršavanje dinamičnih (skriptnih) jezika.
4
.NET BCL - .NET Framework Slika 1. Silverlight 2 arhitektura
Base Class Library
5
DLR – Dynamic Language Runtime
4

Interaktivna aplikacija za crtanje
2. Interaktivna aplikacija za crtanje
Tema timskog zadatka je bila pomoću objektnog modela DrawingEditora ostvariti
interaktivnu aplikaciju u Silverlight-u koja omogućuje crtanje grafičkih elemenata na
ekran.
Aplikacija je ostvarena pomoću programskog jezika C# za Silverlight 2.0 Beta. U
nastavku biti će objašnjena implementacija programske strane, dakle ideja izvornog
koda. Nećemo toliko ulaziti u samu implementaciju izvornog koda, jer
pretpostavljamo da je čitatelj upoznat sa programskim jezikom C# i integriranom
razvojnom okolinom Visual Studio 2008 Pro, a sam izvorni kod je dokumentiran
komentarima i kvalitetnim imenima razreda, metoda i varijabli.
Dizajnerski dio (XAML) nećemo objašnjavati, jer smo isti ostvarili korištenjem
aplikacije Microsoft Expression Blend 2.5 March 2008 Preview. Navedena aplikacija
je grafički alat pomoću kojeg je moguće ostvariti grafičko sučelje.
Napomena: za ostvarenje Silverlight 2.0 aplikacije u C# potrebno je koristiti zadnje
izdanje Expression Blend 2.5 March 2008 Preview, jer starije verzije ne podržavaju
Silverlight Application Project.
2.1 Objektni model
Ono što objektni model DrawingEditor sadržava su dvije knjižnice Shape i
Renderers. Shape knjižnica (Slika 2. Shape knjižnica) sadrži objektni model
primitivnih grafičkih elemenata, konkretno linija, pravokutnik, elipsa, polyline i tekst
pomoću kojih definiramo karakteristična svojstva pojedinih elemenata.
5

Objektno i deklarativno programiranje u Silverlightu
Slika 2. Shape knjižnica
Renderers knjižnica (Slika 3. Renderers knjižnica) između ostalih stvari sadrži sučelje
IRenderer koje je potrebno implementirati kako bi ostvarili iscrtavanje grafičkih
elemenata na neki medij, u nekakvom obliku. Iz tog razloga ostvarena je klasa
SilverlightRenderer koja omogućuje iscrtavanje na bilo koju Panel (layout) kontrolu
(npr. canvas, grid) u Silverlightu.
Slika 3. Renderers knjižnica
6

Interaktivna aplikacija za crtanje
2.1.1 Implementacija SilverlightRenderer klase
Silverlight podržava nekoliko layout komponenti na koje je moguće postaviti
komponente. Sve te komponente za smještaj i raspored kontrola naslijeđene su iz
Panel razreda (npr. Canvas, StackPanel, Grid).
Razred SilverlightRenderer može primiti bilo koji layout, dakle moguće je prikazivati
grafičke elemente na bilo kojem layout-u.
Silverlight podržava osnovnu vektorsku grafiku koja uključuje elemente: Ellipse
(elipsa), Rectangle (pravokutnik), Line (linija), Polyline (izlomljena linija), Polygon
(poligonalne površine) i Path (nepravilni linijski oblici). Sve te klase se mogu
samostalno iscrtavati.
Međutim Silverlight omogućuje primitivnije geometrijske razrede poput
LineGeometry, RectangleGeometry, EllipseGeometry. Ti razredi su naslijeđeni iz
Geometry razreda koji definira samo geometriju, tj. nema mogućnost direktnog
iscrtavanja. Takvi razredi su nam se više svidjeli jer su bliži našem objektnom modelu
pa je bilo lakše ostvariti preslikavanje našeg objektnog modela sa Silverlight-ovim.
Da bi smo iscrtali Geometry objekte na layout komponentu koristit ćemo Path razred
naslijeđenu iz Silverlight Shape razreda. Path razred prima Geometry objekt,
omogućuje postavljanje boje pozadine i boje obruba, te ostalih grafičkih obilježja, te
iscrtava definirani objekt.
Na sljedećem primjeru prikazat ćemo iscrtavanje linije na layout kontrolu.
// stvaranje geometrijskog lika
LineGeometry lineGeometry = new LineGeometry();
lineGeometry.StartPoint = start;
lineGeometry.EndPoint = end;
// stvaranje objekta koji služi za prikaz geometrijskog lika
Path path = new Path();
path.Stroke = new SolidColorBrush(borderColor);
path.StrokeThickness = penSize;
path.Data = lineGeometry; // objektu pridružjemo objekt koji treba prikazati
canvas.Children.Add(path); // postavlja liniju na layout kontrolu
Slične implementacije su za ostale grafičke elemente (pravokutnik, elipsa …).
Grafička obilježja ostvarili smo preko tri glavna svojstva grafičkih oblika u Silverlight-
u: boja linije (obruba), debljine linije i boja ispune (pozadine). Ove se osobine mogu
mijenjati odgovarajućim svojstvima: Stroke, StrokeThickness i Fill.
7

Objektno i deklarativno programiranje u Silverlightu
Slika 4. Pozadina (Fill) i obrub (stroke)
Ovo pravilo ne vrijede za sve oblike. Naime, Line (linija) ima samo svojstvo Stroke
(obruba), zato sama postavka ispune na liniji nema nikakav utjecaj.
Iscrtavanje teksta u Silverlight-u
U Silverlight-u ne postoji grafički element (Shape ili Geometry) kojim bi se iscrtao
željeni tekst. Zato se za tu svrhu koristi kontrola TextBlock kojoj je moguće zadavati
različita svojstva za oblikovanje samog teksta, kao što su visina (Height), širina
(Width), vertikalno poravnanje (VerticalAlignment), horizontalno poravnanje
(HorizontalAlignment) i drugo. Položaj upisanog teksta se određuje zadajući
koordinate točke koja predstavlja gornji lijevi rub tekstualnog okvira.
Primjer definiranja kontrole TextBlock:
<TextBlock Height=\"Auto\" x:Name=\"text\" Width=\"Auto\" TextWrapping=\"Wrap\"
HorizontalAlignment=\"Center\" VerticalAlignment=\"Bottom\">
</TextBlock>
2.2 Grafičko korisničko sučelje i interaktivnost
U zadatku se tražilo da se ostvari interaktivna Silverlight aplikacija. Interaktivno znači
da korisnik pomoću grafičkog korisničkog sučelja, te pripadajućih kontrola može
nacrtati grafički element proizvoljnih dimenzija i stila, odabrati element, mijenjati boju
pozadine, obruba, te ga obrisati sa ekrana.
Da bismo ostvarili interaktivnost aplikacije kreirali smo svoje korisničke kontrole
koristeći već postojeće Silverlight kontrole. Pomoću tako stvorenih kontrola
preglednost i održavanje samog koda je višestruko olakšana.
Ono na čemu se većina interaktivnih aplikacija temelji su tipke i obrada događaja
izazvanih korisnikovom interakcijom.
U nastavku biti će objašnjeni osnovni principi i kontrole od manje prema više
kompleksnijim.
8

Interaktivna aplikacija za crtanje
2.2.1 Tipke
U većem djelu naše aplikacije koristile su se ToggleButton tipke. To je tipka koja ima
dva stanja: uključena i isključena. Da bi aplikacija uspješno reagirala na te tipke bilo
je potrebno ostvariti metode koje bi obrađivale te događaje.
Tipke smo podijelili u nekoliko grupa, ovisno o njihovoj namjeni (npr. crtanje grafičkih
elemenata) što je jedan od bitnijih uvjeta.
Slika 5. Grupe tipaka
Međutim kako tipka sama po sebi ne može sadržavati identifikator, a pogotovo grupu
morali smo doskočiti tom problemu. Većina grafičkih kontrola u windows formama
ima svojstvo Tag koje je u većini slučajeva neiskorišteno, a prima tip podatka Object
pa može služiti kao svojevrstan spremnik. Upravo to svojstvo postoji i u Silverlight
kontrolama, te smo ga onda iskoristili za spremanje grupe tipke, te njezinu
identifikaciju unutar te grupe. Bitno je napomenuti da premda je Tag svojstvo
definirano kao tip podatka Object radi se zapravo o String podatku. Iz tog razloga
nismo mogli samo spremiti Enum objekt u to svojstvo, već smo Enum objekt morali
serijalizirati, odnosno spremiti ga u znakovni oblik i obratno.
U tu svrhu razvili smo ButtonEnumReflectionFactory klasu.
Slika 6. Pomoćna klasa za serijalizaciju i deserijalizaciju grupa tipaka
Navedena klasa omogućuje pretvaranje Enum objekta u znakovnu reprezentaciju
koja uključuje tip Enum objekta, te njegov element, preko Serialize metode. A
pretvaranje Enum znakovnog zapisa u stvarni Enum objekt koristili smo svojstvo
9

Objektno i deklarativno programiranje u Silverlightu
programskog jezika C# Reflection. Preko Reflection klasa možemo instancirati
objekte predajući samo ime klase, te pozivati pripadajuće metode, svojstva i članove
preko njihovih imena.
2.2.2 StrokeUserControl
StrokeUserControl je kontrola za odabir vrijednosti debljine obruba. Temelji se na
slider kontroli Silverlight-a. Ovisno o položaju klizača sadrži vrijednost debljine
obruba.
Slika 7 - Korisnička kontrola za odabir debljine obruba
Kontrola sadrži svojstvo CurrentValue preko kojeg možemo postaviti i dohvatiti
trenutnu vrijednost.
2.2.3 ColorPaletteUserControl
ColorPaletteUserControl je kontrola koja omogućuje odabir boje preko palete boja za
boju pozadine ili obruba.
10

Interaktivna aplikacija za crtanje
Slika 8 - Korisnička kontrola za odabir boje pozadine ili obruba
Kontrola sadrži dvije tipke za odabir primjene boje, dakle boja za pozadinu ili boja za
obrub. Ovisno o odabranoj tipki prikazuje se paleta sa bojama. Odabir tipke ostvaruje
se primjenom grupa tipaka (objašnjeno u poglavlju 2.2.1 Tipke).
Paleta boja automatski se generira iz podataka o bojama. To automatsko generiranje
se zasniva na tome da se stvori tipka (Button) koja sadrži vrijednost rgb zapisa o boji
oblika r,g,b koji je spremljen u Tag svojstvu, sama je te boje i sadrži pripadajuću
metodu za obradu događaja klika na tu tipku.
Podaci o bojama čitaju se iz xml datoteke. Xml datoteka mora biti sljedećeg oblika
<colorPalette>
<color Rgb=\"255, 255, 255\"/>
...
</colorPalette>
gdje RGB atribut sadrži rgb vrijednosti za svaku boju. Čitanje i obrada takve datoteke
vrši se pomoću pomoćne klase ColorPaletteHelper.
11

Objektno i deklarativno programiranje u Silverlightu
Slika 9 - Pomoćna klasa za obradu xml datoteke za generiranje palete boja
Pomoćna klasa zna pročitati xml datoteku, te na temelju pročitanih podataka stvoriti
listu Color objekata. Isto tako zna pretvarati rgb tekstualni zapis u Color objekt.
Da bi smo obavijestili neke druge kontrole o promjeni koja se desila kada je korisnik
odabrao boju definiran je delegat ChangedEventHandler Changed na koji se je
moguće pretplatiti kada se desi promjena boje.
2.2.4 PointInfoBox
PointInfoBox kontrola koja služi za prikaz podataka o točki. Prima Point objekt te
prikazuje njegove vrijednosti, odnosno X i Y koordinate.
Slika 10 - Korisnička kontrola za prikaz podataka o točki
12

Interaktivna aplikacija za crtanje
2.2.5 DrawingEditorToolBar
DrawingEditorToolBar je zapravo alatna traka sa svim dosad definiranim kontrolama.
Osim dosad definiranih kontrola sadrži i neke grupe tipaka (pogledaj Slika 5. Grupe
tipaka), konkretno ActionButtonsEnum i ShapeButtonsEnum.
Slika 11 - Korisnička kontrola sa alatima
Spremanje i dohvat grupe i identifikacija unutar grupe tipaka radi se kako je opisano
u poglavlju Tipke. U svakom trenutku je moguće dohvatiti odabranu/uključenu tipku
preko SelectedButton svojstva.
Osim tipki sadrži kontrolu za unos teksta. Kontrola se aktivira i deaktivira u ovisnosti
o stanju Text tipke, dakle da li je tipka uključena ili isključena. Dohvat vrijednosti koju
sadrži kontrola za unos teksta dohvaća se preko svojstva SelectedButton.
13

Objektno i deklarativno programiranje u Silverlightu
2.2.6 DrawingEditor
Glavna kontrola cijele aplikacije. Sastoji se od dva glavne kontrole:
DrawingEditorToolBar i Canvas. DrawingEditorToolBar je objašnjen u poglavlju
DrawingEditorToolBar. Canvas je kontrola na koju će se iscrtavati grafički elementi.
Slika 12 - DrawingEditor kontrola
Pomoću kontrola u DrawingEditorToolBar-u ostvaruje se crtanje, selektiranje,
brisanje i mijenjanje stilova nad grafičkim elementima.
U nastavku biti će objašnjene grupe metoda koje ostvaruju navedenu funkcionalnost.
Nazivi podnaslova prate region dijelove u source kodu.
14

Interaktivna aplikacija za crtanje
2.2.6.1DrawingCanvas MouseEvents
DrawingCanvas MouseEvens je grupa metoda koje obrađuju događaje miša nad
canvas kontrolom.
ShapeSelected_MouseLeftButtonDown – metoda koja postavlja početnu
točku kada je odabrana tipka iz grupe ShapeButtonsEnum.
DrawingCanvas_MouseLeftButtonUp – metoda koja postavlja završnu
točku kada je odabrana tipka iz grupe ShapeButtonsEnum i poziva pomoćnu
metodu draw() koja iscrtava odabrani lik.
DrawingCanvas_MouseMove – metoda koja reagira na svaku kretnju miša,
no međutim stvarni rad ostvaruje ukoliko je postavljena početna točka, u tom
slučaju iscrtava privremeni grafički element tako da postavlja privremenu
završnu točku i pozivom metode drawOnMove. Privremeno iscrtavanje
grafičkog elementa služi kako bi u trenutku crtanja grafičkih elemenata dobili
prikaz što zapravo crtamo.
drawOnMove – pomoćna metoda koju poziva DrawingCanvas_MouseMove,
služi za crtanje novog privremenog grafičkog elementa, te briše prethodni
ukoliko postoji
ShapeSelected_MouseLeftButtonDown – metoda koja se poziva kada se
selektira grafički element na canvasu. Ukoliko je uključena jedna od tipka iz
grupe ActionButtonsEnum poziva se odgovarajuća metoda, dakle metoda za
selektiranje ili brisanje.
2.2.6.2Drawing Methods
Drawing methods je grupa metoda koja je zadužena za instanciranje objekata i
poziva metoda za crtanje elemenata.
draw – metoda koja za odabranu tipku iz grupe ShapeButtonsEnum poziva
odgovarajuću metodu za crtanje.
drawLine, drawRectangle, drawEllipse, drawPolyline, drawText -
instanciraju odgovarajuće objekte iz Shape knjižnice i pokreću iscrtavanje.
Svakom iscrtanom objektu na canvas-u dodaje se metoda koja se pretplaćuje
na događaj klika na taj objekt. A navedeni postupak služi kao bi mogli
registrirati selektiranje objekta.
2.2.6.3ActionButton Methods
ActionButton methods je grupa metoda koja je zadužena za obradu događaja
vezanih za ActionButtonsEnum grupu tipka. Dakle, obrađuju selektiranje elementa i
brisanje.
EraseAllButton_Click - briše sve elemente sa canvasa, tako da isprazni listu
canvasa.
eraseShape - briše zadani grafički element
selectShape - sprema selektirani objekt, postavlja njegova grafička obilježja
na pomoćne kontrole za odabir boje i debljine obruba.
15

Objektno i deklarativno programiranje u Silverlightu
Korisničko sučelje
Nakon pokretanja aplikacije, otvara se prozor glavnog preglednika i pokreće se
Silverlight drawing editor (Slika 13. Korisničko sučelje Drawing editora). Korisničko
sučelje sastoji se od nekoliko elemenata. Na samom vrhu prikazano je ime aplikacije,
a svi izbornici i radna površina nalaze se ispod naziva aplikacije. S lijeve strane
nalazi se glavni izbornik koji je podijeljen na nekoliko podizbornika, o kojima će više
riječi biti u nastavku.
Glavni izbornik Radna površina
Info odjeljak
Slika 13. Korisničko sučelje Drawing editora
S desne strane nalazi se radna površina koju korisnik koristi za prikaz elemenata
koje želi nacrtati. Odmah ispod radne površine nalazi se info odjeljak koji pruža
korisniku osnovne informacije o korištenim oblicima, poziciji miša itd.
16

Korisničko sučelje
2.3 Glavni izbornik (Drawing toolbar)
Prilikom dodavanja novih elemenata koristimo glavni izbornik koji je smješten s lijeve
strane. Izbornik se sastoji od sljedećih podizbornika:
akcije (Actions),
oblici (Shapes),
stilovi (Style).
2.3.1 Izbornik akcija
Osnovne akcije koje nam omogućava aplikacija drawing editor prikazane su u ovom
izborniku (Slika 14. Izbornik akcija).
Slika 14. Izbornik akcija
Akcije koje možemo odabrati su:
selektiranje (Select),
brisanje objekta (Erase Shape),
brisanje svih objekata (Erase All Shapes).
Selektiranje - Ako želimo označiti neki od objekata, iz izbornika odabiremo alat za
selektiranje (Slika 14. Izbornik akcija) te selektiramo željeni objekt. U info odjeljku
prikazat će se informacija o objektu kojeg smo označili, a izbornik stilova (objašnjen u
poglavlju 2.3.3 Izbornik stilova) će se automatski prilagodit postavkama selektiranog
objekta. Na odabranom objektu moguće je mijenjati stilove korištenjem izbornika
stilova.
Brisanje objekata - Objekte brišemo tako da iz izbornika odabiremo alat za brisanje
i nakon toga kliknemo na objekt kojeg želimo obrisati.
Brisanje svih objekata - Ako želimo obrisati sve objekte koji se trenutno nalaze na
radnoj površini odabiremo ovu opciju.
17

Objektno i deklarativno programiranje u Silverlightu
2.3.2 Izbornik oblika
Izbornik oblika omogućava korisniku odabir objekata koje želi nacrtati na radnoj
površini.
Slika 15. Izbornik oblika
Izbornik oblika sastoji se od sljedećih elemenata:
Linija (engl. Line),
Pravokutnik (engl. Rectangle),
Elipsa (engl. Ellipse),
Izlomljena linija (engl. Polyline),
Tekst (engl. Text).
Linija - Za crtanje linije odabiremo Line alat. Zatim kliknemo na radnu površinu
lijevom tipkom miša i povlačimo pokazivač ovisno o veličini linije koju želimo nacrtati.
Kad postignemo željenu liniju, otpustimo tipku miša.
Pravokutnik - Ukoliko želimo nacrtati pravokutnik odabiremo alat Rectangle. Nakon
toga kliknemo na radnu površinu i povlačimo pokazivač dok ne postignemo željeni
oblik.
Elipsa - Odabirom Ellipse alata i klikom na radnu površinu, započinjemo crtanje
elipse. Kad postignemo željeni oblik, otpustimo tipku.
Izlomljena linija - Za crtanje izlomljene linije koristimo Polyline alat. Crtanje
započinjemo klikom na lijevu tipku miša, i za razliku od crtanja linije, ponovnim klikom
miša odlučujemo gdje će biti kraj linije. Ovu radnju ponavljamo sve dok ne dobijemo
oblik izlomljene linije koji želimo. Kada smo završili potrebno je opet kliknuti na tipku
Polyline kako bi smo je isključili i time završili crtanje izlomljene linije.
Tekst - Za prikaz teksta koristimo alat Text. Odabirom ovog alata pojavljuje nam se
polje za unos teksta (Slika 16. Polje za unos teksta), u glavnom izborniku, te u to
18

Korisničko sučelje
polje unosimo tekst koji želimo prikazati na radnoj površini. Nakon toga kliknemo na
radnu površinu na mjesto gdje želimo prikazati tekst.
Slika 16. Polje za unos teksta
2.3.3 Izbornik stilova
Odabir boja za prikaz objekata i debljine linije koja želimo koristiti nalaze se u Style
izborniku.
Slika 17. Izbornik stilova
Alati koji se nalaze u ovom izborniku su:
boja pozadine (engl. Fill Color),
boja ruba (engl. Stroke Color),
klizač za odabir debljine ruba i veličine slova (engl. Stroke Thickness
Slider).
Boja pozadine - Ovaj alat nam služi za odabir boje kojom želimo ispuniti objekt koji
želimo nacrtati.
Boja ruba - Ovim alatom odabiremo boju linije za objekt koji želimo nacrtati.
Klizač za odabir debljine ruba i veličine slova - Debljinu ruba ili veličinu slova
objekta kojeg želimo nacrtati određujemo pomicanjem klizača. Nakon pomicanja,
ispod klizača će se prikazati vrijednost debljine ruba objekta ili veličine slova.
19

Objektno i deklarativno programiranje u Silverlightu
2.4 Radna površina (Canvas)
Sve objekte koje želimo prikazati crtamo na radnoj površini (Slika 18. Radna
površina).
Slika 18. Radna površina
2.5 Info odjeljak (InfoBar)
Podaci vezani za objekte prikazani su u info odjeljku (Slika 19. Info odjeljak).
Slika 19. Info odjeljak
Odjeljak se sastoji od nekoliko elemenata:
trenutna pozicija pokazivača (oznake X i Y),
veličina objekta (oznake Width i Height),
broj objekata na radnoj površini (oznaka Shapes on canvas),
označen objekt (oznaka Selected shape).
Pomicanjem pokazivača po radnoj površini mijenjaju se vrijednosti X i Y. Ako
trenutno crtamo objekt istovremeno će se mijenjati i polja veličine objekta (Width i
Height). Nakon što nacrtamo objekt povećava se brojač objekata na radnoj površini
(Shapes on canvas). Odabirom alat Select iz Actions izbornika i nakon toga klikom
unutar nekog elementa smještenog na radnoj površini, u polju Selected shape
prikazuje se ime označenog objekta.
20

Literatura
3. Literatura
1. Silverlight Tips, Tricks, Tutorials and Links Page
URL: http://weblogs.asp.net/scottgu/pages/silverlight-posts.aspx
2. Silverlight: QuickStarts - drawing and painting
URL: http://www.silverlight.net/quickstarts/silverlight10/drawing.aspx
3. Little drawing with Silverlight in C#
URL: http://mikuam.wordpress.com/2008/05/09/little-drawing-with-silverlight-
in-c/
21