Follow the white rabbit

În lecțiile anterioare am abordat pașii necesari pentru planificarea, proiectarea și cercetarea tuturor elementelor primei noastre aplicații complexe, iar în această lecție trece la primul pas practic al acesteia: proiectarea interfeței de utilizator. Am spus deja că vom folosi XAML în acest scop, deoarece ne va permite să personalizăm lucrurile în mod extensiv și este și o formă modernă de flux de lucru care ne permite să separăm interfața de utilizator de logica din fundal. Așa cum am explicat în lecția în care am prezentat XAML-ul, aceasta nu va fi o lecție în care vă voi învăța XAML, scopul acestui blog este de a vă învăța programare în C#, și nu design grafic, prin urmare ar putea exista aspecte pe care nu le veți întelege pe deplin. Pentru început, hai să deschidem Visual Studio și să creăm o nouă aplicație C# WPF. O voi numi Jurnal. Acesta este șablonul pe care ar trebui să îl alegeți:

După crearea proiectului, vi se va afișa o fereastră goală și două fișiere vor fi deschise: MainWindow.xaml și MainWindow.xaml.cs; prima conține interfața grafică de utilizator, scrisă în XAML și afișată vizual:

Celălalt fișier este cel care conține logica de programare a acestei ferestre, scrisă în C#:

Există un alt fișier pe care proiectul nostru îl conține, App.xaml, și vă puteți gândi la acest fișier ca locul care vă va permite să setați opțiuni generale pentru aplicația voastră. De asemenea, această componentă este compusă din două fișiere: App.xaml și App.xaml.cs, la fel ca orice altă fereastră. Diferența este aceea că App.xaml nu este de fapt o fereastră și nu are o reprezentare grafică. Scopul său este de a găzdui evenimente centrale ale aplicației, resurse care pot fi utilizate de întreaga aplicație, cum ar fi pensule (brushes), etc. În fișierul App.xaml avem și coduri pe care le putem folosi pentru a specifica care este prima fereastră care trebuie afișată când aplicația pornește. În cazul nostru, fișierul conține următoarele coduri:

și este destul de evident că MainWindow este fereastra care va fi lansată atunci când vom rula programul nostru.

Din moment ce vom proiecta doar GUI-ul aplicației noastre în această lecție, nu ne vom ocupa de fișierele .cs, unde sunt scrise codurile C#. Pe de altă parte, trebuie să personalizăm aspectul primei noastre ferestre. Deoarece am stabilit că prima fereastră va fi una de logare, acesta este lucrul cu care vom începe. În acest moment, codurile XAML ale acestei ferestre ar trebui să arate cam așa:

Modificați șirul de caractere al titlului în ceea ce doriți să fie afișat în bara de titlu a acestei ferestre. În cazul meu, voi folosi „Jurnal Personal – Autentificare„. De asemenea, voi modifica dimensiunea acestei ferestre (lățime și înălțime), voi stabili locația de pornire în centrul ecranului și voi dezactiva redimensionarea sa. În acest moment, XAML va arăta astfel:

Puteți observa că modificările au fost făcute în interiorul etichetei XAML a elementului Window, care reprezintă exact fereastra noastră. În lecția despre XAML, explicam că XAML este într-un mod îndepărtat similar cu HTML sau XML, având o structură de elemente de tip părinte-copil și fiecare element are o etichetă de deschidere și una de închidere. Acest lucru poate fi observat și aici: elementul Window are o etichetă de început și o etichetă de închidere ( <Window ....> ... </ Window>) și este un element părinte, care conține un copil, un control de tip Grid, care are de asemenea etichete de deschidere și de închidere. Acest lucru poate fi înțeles ca Window fiind elementul vizual rădăcă al ferestrei noastre (părintele), cel care conține toate celelalte elemente (copiii săi).

În XAML, elementul Window poate conține doar un copil. Asta înseamnă că nu putem plasa butoanele, etichetele, imaginile și celelalte controale direct în interiorul acesteia. Dacă am încerca acest lucru, în momentul în care am adăuga un al doilea control copil, am primi o eroare: Proprietatea „Conținut” poate fi setată o singură dată (The property “Content” can only be set once) și Proprietatea „Conținut” este setată de mai multe ori (The property ‘Content’ is set more than once). Din acest motiv, XAML ne oferă așa-numitele controale-containere, cum ar fi Grid. Aceste controale sunt, în mod implicit, invizibile în fereastra vizuală, iar scopul lor este doar să ne permită să găzduim mai multe controale și copii în interiorul elementelor care în mod normal ar permite doar unul. Puteți afla mai multe despre tipurile de controale oferite de XAML în această lecție.

Următorul pas este plasarea tuturor controalelor de care avem nevoie în interiorul controlului-container Grid. Pentru fereastra de conectare, avem nevoie de 3 etichete (Label), un câmp de text (TextBox), un câmp de parolă (PasswordBox), două casete de selectare (CheckBox) și două butoane (Button), așa cum a fost planificat în lecția anterioară. Puteți să le adăugați prin glisarea și plasarea lor din panoul Visual Studio Casetă de Instrumente (Toolbox) din stânga, sau prin scrierea directă a codurilor XAML. După adăugarea acestora, vom avea următoarele coduri XAML:

Singura problemă acum este că toate controalele se suprapun, pentru că nu le-am stabilit nicio proprietate, cum ar fi dimensiunea, poziția, ancorarea etc. Să facem și asta:

Dacă executăm programul acum, ne va fi prezentată următoarea fereastră:

În același mod vom proiecta și ferestrele următoare ale programului nostru. Pentru a face acest lucru, faceți clic dreapta pe numele proiectului, în interiorul panoului Solution Explorer, din partea dreaptă a Visual Studio. Fiți atenți să efectuați click dreapta pe numele proiectului, nu pe soluția în sine. În meniul care apare, faceți clic pe Adăugare – Fereastră (Add – Window).

Numiți această fereastră nouă Inregistrare. Acum, veți observa că proiectul nostru conține un nou fișier numit Inregistrare.xaml:

Dacă extindem săgeata mică din partea stângă a numelui fișierului, vom vedea și fișierul Inregistrare.xaml.cs, cel care conține logica scrisă în C# a acestei ferestre noi. Cu alte cuvinte, aceasta este o altă metodă prin care putem accesa fișierele UI/logice ale oricărei ferestre a aplicației noastre.

Ca și înainte, vom adăuga controalele vizuale pe care această fereastră nouă le va conține:

Care vor produce această fereastră:

Adăugați o fereastră nouă și numiți-o RecuperareParola. Scopul său ar trebui să fie dedus destul de evident din acest nume. Această fereastră nouă este definită de următorul cod XAML:

și va arăta astfel:

Motivul pentru care nu am plasat niciun text în eticheta din mijlocul ferestrei este faptul că acest control va afișa de fapt întrebarea de securitate aleasă de utilizator.

Fereastra următoare va fi pur și simplu denumită Optiuni:

Fereastra finală pe care o vom adăuga aplicației noastre este, de fapt, fereastra principală care va fi afișată după autentificare, locul unde va avea loc toată acțiunea. Am denumit-o JurnalPersonal, iar codurile lui XAML sunt următoarele:

care vor produce următoarea reprezentare grafică:

Știu că în acest moment calendarul nu arată ca cel pe care l-am arătat în lecția în care am planificat proiectarea aplicației, dar asta se datorează doar faptului că mai întâi trebuie să creăm controlul XAML calendar, lucru ce se va întâmpla în următoarea lecție. Deocamdată, am folosit calendarul WPF prestabilit, ca înlocuitor.

Tags: GUI, interfață grafică cu utilizatorul, proiectare, scrierea primului program, XAML

This entry was posted on duminică, decembrie 23rd, 2018 at 03:53 and is filed under Prima Aplicație Practică. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.