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:



Novi projekat se kreira izborom opcije File>New Poject:


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

<Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="UntitledProject1.Window1"
     x:Name="Window"
     Title="Window1"
     Width="640" Height="480">

   <Grid x:Name="LayoutRoot">
   <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000"    
     HorizontalAlignment="Left" Margin="82,79,0,198" Width="196"/>
       
   <Ellipse Fill="#FFFFFFFF" Stroke="#FF000000" Margin="186,166,235,143"/>
               
   <Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" 
     Margin="123.5,197.5,30.5,56.5" Data="M124,387 L593,198"/>
            
   </Grid>
</Window>
 

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"
Data="M56,255 C61.778369,227.71326 38.645529,220 88,220 118.39156,220 147.64851,222.89191 177,218 189.75766,215.87372 196.08095,213.99127 203,199 208.36632,187.37296 206.01174,182.5953 220,177 235.19471,170.92212 247.98252,172 265,172 276.7646,172 283.69075,181.1409 294,182 319.35429,184.11286 332.29294,159.82362 356,158 384.08932,155.83928 405.98686,155.58424 428,182 435.70216,191.24259 435.48484,199.45451 439,210 441.02172,216.06516 441.72148,219.65185 446,225 448.88217,228.60272 458.24708,232.41569 463,234 478.52265,239.17422 490.44164,244.70137 504,256 513.95553,264.29627 516.97639,271.01574 496,285 467.45015,304.03324 453.91892,313.95946 412,293 380.72107,277.36053 386.57642,271.75296 351,287 337.16159,292.93075 322.50272,297.16576 308,302 294.97106,306.34298 281.01351,306 267,306 252.3132,306 231.60505,301.80252 218,295 208.6528,290.3264 191.12569,307.43716 180,313 171.99369,317.00316 165.24193,321.86175 158,326 147.037,332.26457 140.07026,332 127,332 111.15471,332 74.995902,320.88115 65,302 54.58979,282.33627 68.836546,288.33076 88,273 101.9465,261.8428 116.45726,265.22731 89,243"/>
 

 

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>
   <Path Fill="#FF898686" Stretch="Fill" Width="14" Height="14"  Margin="4,0,0,0"
    Data="M239.88732,81.15493 L239.88732,241.01401 399.74681,161.43659 z"/>
</ToggleButton>
 

8. Pokrenuti MusicPlayer aplikaciju (pritiskom na F5).

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

  • 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