XAML (Extensible Application Markup Language) este limbajul din spatele prezentării vizuale a unei aplicații dezvoltată în Microsoft Expression Blend, la fel cum HTML este limbajul din spatele prezentării vizuale a unei pagini Web. Deși nu este scopul acestui site să explice XAML și deși programatorii pot dezvolta interfața unui program aproape în întregime fără a cunoaște XAML, în această lecție voi vorbi pe scurt despre ce este XAML, cum arată, ce face și cum putem să-l folosim.
Deci, ce este XAML? Definirea scurtă este că XAML este un limbaj declarativ bazat pe XML, în sensul că definește CE și CUM doriți să faceți. Principalul avantaj al XAML este separarea modului în care arată programul și modul în care acesta se comportă. Principalul dezavantaj al WinForms era faptul că atât codul funcțional, cât și interfața vizuală, erau ambele create în C# sau VB.NET de către programator, și nu erau interschimbabile. În plus, era nevoie de mai mult efort din partea programatorului, pentru a crea atât funcționalitatea aplicației, cât și designul acesteia, pe care mulți coderi îl displăceau, deoarece nu erau designeri.
Odată cu sosirea XAML, această problemă a fost în cele din urmă rezolvată. XAML decupla interfața vizuală de codul din fundal, făcându-le două procese separate. Acest lucru însemna că un designer calificat se putea ocupa de proiectarea GUI în același timp în care un coder dezvolta funcționalitatea, și că cele două componente vor interacționa între ele. O altă consecință benefică a acestui lucru a fost posibilitatea creării de diferite GUI-uri pentru același cod funcțional.
Ca schematică, acesta arată astfel:
În lecția precedentă, explicam că fișierul MainWindow.xaml este afișat ca un set de trei panouri principale, unul afișând reprezentarea vizuală a interfeței noastre grafice, al doilea reprezentarea XAML a aceleiași interfețe vizuale, iar cel de-al treilea panou indicând orice erori pe care le-am putea dezvolta în procesul de creare a interfeței noastre.
Dacă aruncați o privire în al doilea panou, veți observa câteva coduri similare cu acestea:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<Window x:Class="BunaLumeWPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:BunaLumeWPF" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid> </Window> |
Știu că rândurile de mai sus nu vă spun prea multe, și este de înțeles. În cea mai mare parte, voi, ca programatori, nici măcar nu veți avea nevoie să le înțelegeți. Deși, chiar dacă nu aveți nicio idee despre XML, ar trebui să recunoașteți un tipar similar codurilor C#: există structuri cu un început și un sfârșit, care conțin un corp, și sunt ușor de identificat prin indentare. Puteți observa în mod clar că avem un obiect Window cuprins între <Window>…</Window> și că acest obiect conține un alt obiect numit Grid, delimitat de un antet și un capăt: <Grid>…</Grid>. Pentru cei care au mai cochetat cu web design-ul, aceaste coduri par foarte asemănătoare cu un HTML mai ciudat.
XAML funcționează pe baza structurii părinte-copil. Există obiecte-părinte – Window în cazul nostru, care conțin elemente copil, precum Grid. În mod prestabilit, un Grid este setat ca primul element din fereastră. Făcând clic pe diferite elemente din XAML, veți observa schimbări în panoul de design vizual, indicând obiectul vizual selectat:
Din moment ce știm acum că Grid este un obiect care poate conține alte obiecte, să îi adăugăm un element copil, și anume un buton, deoarece acesta este cel mai familiar control în orice interfață. Așa cum am spus în lecțiile anterioare, există mai multe modalități prin care putem adăuga controale la GUI. Primul este prin Drag and Drop. În partea stângă a Visual Studio, dați clic pe Toolbox, apoi faceți clic și țineți apăsat butonul mouse-ului, după care trageți butonul deasupra suprafeței ferestrei noastre și eliberați, astfel:
Veți observa acum trei lucruri: fereastra noastră de design vizual conține un control de tip buton, codurile XAML au fost ușor modificate (o nouă linie a fost introdusă ca și copil al Grid-ului), iar selecția din editorul XAML a fost modificată pentru a indica faptul că Butonul nou creat este elementul selectat.
Asta a fost tot! Ați terminat de adăugat un control la interfața grafică a programului dvs.! De aceea am spus într-o lecție anterioară că nu este obligatoriu să învățați XAML, deoarece puteți să proiectați GUI-urile voastre în întregime prin drag and drop, fără a scrie o singură linie de XAML (deși nu recomand acest lucru și vom vedea mai târziu de ce).
Acum, hai să vorbim despre o a doua modalitate de a adăuga un control la fereastra noastră. Poziționați cursorul în interiorul editorului XAML, chiar sub rândul în care a fost creat butonul, și tastați această linie:
|
1 |
<Label Content="Am adaugat un nou Label!" Height="30" Margin="185, 177, 201, 112" /> |
astfel:
Când ați terminat, veți observa că un nou control a fost adăugat la interfața noastră, de data aceasta, o etichetă de text (Label). Nu vă faceți griji în legătură cu codurile implicate pentru moment, le vom explica pe scurt în lecțiile viitoare.
Un ultim lucru care ar trebui menționat. Ar trebui să acordați atenție barei de instrumente care separă Designerul Vizual de Editorul XAML.
Există câteva butoane care vă permit să modificați nivelul de zoom al designerului dvs. GUI, să interschimbați zona vizuală și cea de editor, și multe alte opțiuni care vă vor ajuta prin accelerarea procesului de proiectare.
Tags: GUI, interfață grafică cu utilizatorul, XAML
