Sunday, October 20, 2019 13:53

XAML: Crearea interfeței grafice de utilizator a unei aplicații

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

Crearea unui proiect WPF C#

Crearea unui proiect WPF C#

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:

XAML GUI

XAML GUI

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

Logica C# a unei ferestre XAML

Logica C# a unei ferestre XAML

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

Fereastra conectare XAML

Fereastra conectare XAML

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

Visual Studio - Adăugare fereastră nouă

Visual Studio – Adăugare fereastră nouă

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

Visual Studio - fișier nou

Visual Studio – fișier nou

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

XAML - Fereastră Înregistrare

XAML – Fereastră Înregistrare

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:

XAML - Fereastra recuperare parolă

XAML – Fereastra recuperare parolă

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:

XAML - Fereastră opțiuni

XAML – Fereastră opțiuni

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

Fereastra principală Jurnal Personal

Fereastra principală Jurnal Personal

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

Comments

comments

Tags: , , , ,

2 Responses to “XAML: Crearea interfeței grafice de utilizator a unei aplicații”

  1. Si Eu spune:

    Exista undeva tot programul: Grafica+Cod C#? Nu inteleg partea de calendar in esenta lui? Nu se poate imprumuta calendarul din windows? Este un calendar propriu? Fenomenologic functioneaza independent,tine secunda cu taktul de sistem? Se poate da raspunsuri la astfel de intrebari, privind portabilitatea si evenimentele de rutina? Este numai un calendar care primeste date intr0un camp si el nu stie data curenta?

    Ce se intampla daca cineva schimba data si ora acidental din Windows?
    Ce se intampla daca scriu in jurnal ceva si apoi inchid calculatrorul pt 2 ani de zile si apoi reiau ?
    Apicatia se salveaza pe cloud, de unde se actualizeaza ora? de pe un site?

    Daca Visual Studio salveaza niste evenimente si le salveaza cu denumire si le si dateaza in timp. Cum se poate face ca daca cineva schimba ceasul in Windows, aplicatia s anu tina cont de asta si nu se salveaza datele gresit

    • rusoaica spune:

      Nu, nu există încă, am probleme mari cu gestionarea timpului în ultima perioadă. Nu știu când voi reuși să găsesc o fărâmă de timp liber să continui lecțiile.
      Evident că se poate folosi calendarul din windows, există și un control în Visual Studio ToolBox pentru el, însă scopul folosirii unui control calendar propriu era acela de a dezvălui modalitatea în care putem crea propriile noastre controale, sau să modificăm pe cele deja existente, după gusturile noastre.
      Calendarul nu afișează ora curentă. În schimb, afișează doar data, zilele, etc. Prin urmare, nu ține cont de clock-ul sistemului. În cod, C# oferă o clasă numită DateTime, care furnizează în mod automat diverse valori, cum ar fi proprietatea DateTime.Now, care furnizează data curentă a sistemului. În cazul în care data computerului este schimbată, această properitate va fi, evident, greșită.
      Evident că există modalități de a prelua data curentă de pe un server de timp de pe internet.
      Nu înțeleg la ce anume te-ai referit cu „visual studio salvează niște evenimente”. Visual Studio nu salvează nimic. Tot ce putem face noi este să salvăm într-o bază de date (sau într-un alt mod) informații despre „evenimentele” noastre, iar mai apoi să populăm zilele ce conțin respectivele evenimente, pe baza datelor preluate din mediul unde le-am salvat.

Leave a Reply