Microsoft Expression Blend

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).

Primer: Kreiranje RichContent-a za Play dugme

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):

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:

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:

8. Pokrenuti MusicPlayer aplikaciju (pritiskom na F5).

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

Ime Nick Email Title Sigurnosni kod

CommentText

• Upoznavanje sa okruženjem, kreiranje i import sadržaja kao RichContent-a 1

• Upoznavanje sa okruženjem, kreiranje i import sadržaja kao RichContent-a 2

• Upoznavanje sa okruženjem, kreiranje i import sadržaja kao RichContent-a 3
• Upoznavanje sa okruženjem, kreiranje i import sadržaja kao RichContent-a 4

• Upoznavanje sa okruženjem, kreiranje i import sadržaja kao RichContent-a 5