Microsoft Expression Blend je dizajnerski alat namenjen izgradnji vizuelno razvijenih grafičkih interfejsa za web i desktop aplikacije koje sadrže 2D i 3D grafiku i animacije. Napisan je pomoću .NET Framework 3.0 i WPF-a. Expression Blend je interaktivan, WYSIWYG alat za dizajniranje interfejsa zasnovanih na XAML-u za WPF i Silverlight (od Blend verzije 2.0). Poslednja verzija (2.0.1523.0) se pojavila 1. Maja 2008.
Link: http://www.microsoft.com/expression/products/overview.aspx?key=blend
Expression Blend okruženje:
Default postavke okruženja se vraćaju izborom opcije Window>Reset Active Workspace:
Projekat se build-uje izborom opcije Project>Build Project:
Projekat se pokreće (testira) izborom opcije: Project>Test Poject, ili pritiskom na F5:
Kada je novi projekat kreiran, vidimo sadržaj korenog elementa Window1. Kada dodajemo nove elemente, dodajemo ih u onaj element koji je u odeljku „Objects and Timeline" uokviren žutom bojom, na slici je to LayoutRoot . LayoutRoot je Grid panel koji se kreira po defaultu u okviru Window1 elementa.
Nove elemente dodajemo dvoklikom na željeni element iz ToolBox-a koji se nalazi sa leve strane:
Ako kliknemo jednom na element koji ima malu belu stelicu dole levo i zadržimo, prikazaće se i ostali elementi koji pripadaju toj grupi elemenata, npr. kao na donjoj slici, prikazani su paneli:
Ako želimo da dodamo element koga trenutno nema u ToolBox-u, odaberemo poslednju stavku u ToolBox-u: , pri čemu se otvara Assets Library:
Pogled na projekat može biti iz Dizanjer-a ili iz XAML-a, a menja se izborom opcije View Design (ili XAML), ili pritiskom na F11 (za Dizajner) i F12 (za XAML).
Do sada smo uglavnom radili u Xaml-u. Sada ćemo videti kako možemo da kreiramo sadržaj u Expression Blendu i uvezemo ga u našu aplikaciju. Bez obzira da li ste developer ili dizajner, postoje određene vizulene stvari koje ima više smisla raditi u alatu (kao što je Expression Blend).
Pogledajmo oblike u ToolBox-u:
Izaberimo Pravougaonik (Rectangle) i nacrtajmo ga, zatim odaberimo elipsu (Ellipse), i na kraju - liniju (Line).
Dobićemo izgled kao na sledećoj slici:
Pogledajmo Xaml koji smo kreirali (pritiskom na taster F12 na tastaturi):
<Window <Grid x:Name="LayoutRoot"> |
Prvi element je Window, a njegovo dete je Grid, tj. LayoutRoot. U Gridu vidimo tri oblika koja smo kreirali. Prvo je to pravougaonik, zatim elipsa i na kraju je očekivano da to bude Line element, ali je Blend kreirao Path objekat. Ovo su tri osnovna oblika u WPF platformi. Path je višenamenski oblik. Možete ga koristiti za bilo kakvu geometriju. Važan property na ovom elementu je Data i on definiše tu geometriju. Data property za Line u ovom slučaju deluje jednostavno, ali hajde da se vratimo u Design View i da odaberemo Pencil Tool.
Prethodno obrišimo postojeće oblike. Nacrtajmo proizvoljnu liniju slobodnom rukom:
Pogledajmo sada Data property Path elementa u Xaml-u:
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Margin="54.973,156.613,111.824,111.498" |
Primetili ste da je Data property za ovakvu jednu liniju iscrtanu slobodnom rukom veoma složen, što predstavlja odličan primer situacije kada ima smisla kreirati vizuelni element uz pomoć alata a ne kucanjem Xaml-a. Vratimo se na Design View i obrišimo liniju. Sad ćemo koristiti Pen Tool.
Napomena: Zoom menjamo promenom sadržaja ikonice .
1. Uključimo opciju „Show Snap Grid"
2. Odaberemo Pen alatku iz ToolBox-a
3. Iscrtamo pomoću Pen alatke oblik kao na slici:
4. Da bismo nacrtani oblik linije popunili bojom odaberemo Properties>Brushes:
Kad smo odabrali boju, dobijamo isto kao na slici:
5. Odaberemo XAML pogled na projekat:
6. Oblik koji smo kreirali je smešten u Grid - LayoutRoot, a definisan kao Path element (Path je linija koja se kreira kada se radi sa alatkama Pen ili Pencil).
7. Path element se može kopirati (importovati) u WPF aplikaciju kreiranu u Visual Studiu 2008 kao sadžaj nekog elementa, u ovom slučaju kao sadržaj ToogleButtona:
<ToggleButton> |
8. Pokrenuti MusicPlayer aplikaciju (pritiskom na F5).