La un moment dat în lecțiile mele, discutam despre modul în care o clasă (obiect) poate avea proprietăți și metode. De asemenea, am spus și că de fapt controalele pe care le adăugăm la GUI-urile noastre sunt și ele obiecte (clase). Prin urmare, după cum probabil ați ghicit, controalele grafice ale interfețelor noastre au proprietăți de control, prin care le putem personaliza parametrii.
În lecția anterioară, am scris această linie de XAML:
|
1 |
<Label Content="Am adaugat un nou Label!" Height="30" Margin="185, 177, 201, 112"/> |
Este posibil să nu fi știut la acel moment, dar fiecare parametru urmat de operatorul de atribuire = este de fapt o proprietate a controlului nostru Label. Cu alte cuvinte, putem spune că de fapt, controlul Label are câteva proprietăți de control, cum ar fi Height (înălțime), Margin (margine) sau Content (conținut). Putem seta aceste proprietăți în codul XAML, așa cum am făcut ieri, sau le putem seta folosind panoul Properties din Visual Studio, situat în partea dreaptă (asigurați-vă că selectați mai întâi controlul în designerul vizual!):
Puteți observa faptul că navigând prin diferite categorii extensibile ale panoului de proprietăți, puteți seta o selecție vastă de proprietăți de control. Acesta este unul dintre motivele pentru care am spus că WPF/XAML vă permite să creați interfețe mult mai personalizabile decât Windows Forms. Și vestea bună? Puteți personaliza controalele chiar mai mult, prin coduri avansate de XAML, dacă doriți!
Probabil ar trebui să știți că fiind un obiect, orice control grafic poate fi creat și în cod, nu numai vizual. Acest lucru înseamnă și că putem seta proprietățile controalelor vizuale prin intermediul codului C#, dar acest lucru ar necesita fie un control creat în timpul execuției, fie o modalitate de identificare a controlului în cod, folosind o instrucțiune XAML x:Name.
Iată un exemplu de control creat în cod, la care am setat și câteva proprietăți, tot în cod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace BunaLumeWPF { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); Button butonNou = new Button(); //va reamintiti instantierea claselor? butonNou.Height = 100; //seteaza proprietatile de control butonNou.Width = 300; butonNou.Margin = new Thickness(189, 195, 0, 0); butonNou.Background = Brushes.Red; butonNou.Foreground = Brushes.White; butonNou.BorderBrush = Brushes.Pink; butonNou.HorizontalAlignment = HorizontalAlignment.Left; butonNou.VerticalAlignment = VerticalAlignment.Top; butonNou.Content = "Click!"; containerNou.Children.Add(butonNou); //adauga butonul ca si copil al containerNou } } } |
În afara faptului evident al creării unui nou control în codul de mai sus, puteți observa două lucruri: în primul rând, folosim linia using System.Windows.Controls;. Acest lucru ar trebui să ne indice faptul că și controalele XAML pe care le-am adăugat designerului nostru vizual, sau cele pe care le adăugăm acum prin cod, sunt toate declarate în namespace-ul System.Windows.Controls. De asemenea, ar trebui să observați și că după crearea controlului nostru, folosim linia containerNou.Children.Add(butonNou);. Ce înseamna asta?
Asta înseamnă că atunci când instanțiem o nouă copie a clasei Button și stabilim proprietățile sale (cum ar fi Height, Content etc.), vom crea acea instanță DOAR în memorie. Nu este încă adăugată niciunei ierarhii vizuale, așa cum explicam într-o lecție anterioară că XAML necesită un stil de design ierarhic părinte-copil. Cu alte cuvinte, creăm un nou buton, dar după ce îl creăm, trebuie să ne asigurăm că îl adăugăm la designul nostru XAML, în calitate de copil al unui control. În cazul nostru, îl adăugăm în calitate de copil al Grid-ului nostru. Dar, deoarece ar putea exista mai multe Grid-uri, cum spunem compilatorului pe care din ele ne-am propus să-l specificăm ca și părinte?
În astfel de cazuri, așa cum am explicat mai devreme, trebuie să specificăm un atribut XAML x: Name controlului pe care trebuie să-l identificăm în cod. Cu alte cuvinte, XAML-ul nostru ar trebui să fie schimbat în felul următor:
|
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" WindowStartupLocation="CenterScreen"> <Grid x:Name="containerNou"> </Grid> </Window> |
Pe scurt, avem o fereastră și un Grid. Nimic nou. Singura diferență vizibilă este că am folosit x:Name="containerNou" în Gridul nostru, ceea ce înseamnă că am denumit Grid-ul containerNou. Acesta este motivul pentru care în C# am putea scrie această linie:
|
1 |
containerNou.Children.Add(butonNou); |
Deoarece am denumit Gridul nostru, putem folosi numele respectiv în codurile noastre C#, pentru a specifica Grid-ul respectiv.
Când rulați programul de mai sus, chiar dacă Gridul nu conține copii în codurile XAML, veți fi surprinși să vedeți că atunci când îl executați, programul va afișa un buton în interiorul Grid-ului. Acest buton este instanța butonului pe care am creat-o și am adăugat-o Grid-ului nostru, în cod.
Pentru a rezuma, putem edita proprietățile controalelor noastre în trei moduri: în panoul Proprietăți din Visual Studio, în codul XAML sau în codul C#, după ce dăm controlului un nume specific, astfel încât să îl putem identifica în cod.
O proprietate importantă a controalelor este ceea ce se numește ancorare. Ancorarea este conceptul care descrie comportamentul unui control atunci când îi redimensionăm controlul părinte. Cu alte cuvinte, dacă avem un buton cu o lățime de 100 de pixeli, dar redimensionăm fereastra care îl conține, cum ar trebui să se comporte acest buton? Ar trebui să rămână la 100 de pixeli? Ar trebui să se redimensioneze împreună cu fereastra? Ancorele descriu marginile unui control care trebuiesc „ancorate” la marginile controlului părinte. În designerul Visual Studio, ancorele de control sunt simboluri grafice speciale care arată astfel:
Acum, să vedem comportamentul diferit al controalelor, cu diferite tipuri de ancorări:
După cum puteți vedea, ancorarea unei margini a unui control la marginea părintelui său va face ca acest control să păstreze distanța dintre marginea sa și marginea ancorată, redimensionându-se.
Tags: controale, GUI, interfață grafică cu utilizatorul, proprietăți, XAML
Poti modifica putin layout-ul site-ului si sa-l faci mai lat. Nu arata prea bine si nici nu e prea usor de citit. Poti sa scapi si de culorile astea si de fundal…e dragut el asa dar nu pentru un tutorial de C# (stii ca nu prea il foloseste nimeni pentru chestii care depasesc putin limitele).
Bună! Am ținut cont de sugestia ta referitoare la lățimea conținutului. De fapt, ne propusesem acest lucru de mai de mult, însă niciodată nu s-a ivit momentul potrivit 🙂
Cât despre schema de culori ori fundalul, au fost alese după interogarea unui numar de utilizatori, și au suferit numeroase modificări de-a lungul timpului. Poate la un moment dat vom reveni din nou asupra design-ului.
Mulțumim pentru feedback! 😉
Am si eu o intrebare cu privire la dimienionari, ceva gen ancorari.
Ancorari la un buton se refera la faptul ca tragem de fereastra cu mousul iar dimenisunea butonului trebuie sa se modifice.
Dar ce facem cand am creeat o aplicatie W form, un programel care l-am creat pe un PC , pe un monitor cu o anume rezolutie grafica si dorim sa instalam aplicatia pe un monitor la o alta rezolutie grafica sa zicem un full HD, unde ecranul este mai turtit si mai lung si nu este patratos, este un dreptunghi. Atunci totul se misca si se vede aiurea..
De obicei, atunci când creez o interfață grafică, o proiectez pentru cea mai mică rezoluție posibilă pe care va rula respectivul soft. De acolo, pot ancora controalele astfel încât să păstreze o proporție, un raport unul față de celălalt, bazat pe redimensionarea ferestrei pe un display cu o rezoluție mai mare. Atunci când respectiva rezoluție nu are aceeași rată de aspect (e mai lat, mai îngust, etc), atunci.. ghinion. Nu poți face altceva decât fie să ancorezi unul din controale de ambele margini, și să îl alungești proporțional cu fereatra, fie să ancorezi toate controalele la marginea stângă a ferestrei, lăsând efectiv tot spațiul redimensionat din dreapta nefolosit (caz în care mie mi-ar părea și mai urât).