✅ Monodevelop C # și GTK Containere și componente

Cuprins

GTK # prin intermediul containerelor ne permite să controlăm poziția widgeturilor într-o fereastră pentru a putea crea designul. Aceste containere care au caracteristici diferite și servesc pentru a ghida proiectarea și amplasarea componentelor sau widgetului într-o fereastră.
containere principale sunt:

Containere cu cutii orizontale sau verticale
Containere cu mese
Container fix
Rame sau Container de cadre

Cum se utilizează containerele în funcție de nevoile sau cerințele aplicației noastre
Containere cu cutii orizontale sau verticale
Dacă suntem obișnuiți să programăm sub Windows și metodologia de proiectare a interfeței drag-and-drop, acest tip de container este probabil mai bun, deoarece widgeturile sau componentele sunt poziționate în fereastră folosind coordonatele x și modul în care Windows este apreciat.
Deși acest lucru este posibil cu Gtk și monodevelop, cel mai bun mod de a alinia widgeturile este cu casetele. Există două tipuri de cutii orizontal sau HBox și vertical sau VBox. Acest tip de container nu depinde de dimensiunea ecranului. Containerele HBox și VBox se ocupă de redimensionarea automată a zonei pe care o ocupă o componentă.
Să vedem un exemplu cu casete orizontale sau verticale. Vom crea un proiect C # și Gtk în Monodevelop.
Îi atribuim un container Vbox și în ultimul rând adăugăm un container Hbox.

Apoi vom adăuga un buton în ultima celulă a Hbox. În proprietăți atribuim numele bt A accepta iar în etichetă numele A accepta.

Dacă rulăm aplicația din Meniul Run> Start Debug sau cu cheia F5, vom vedea că butonul este aliniat în zona din stânga sus a ecranului, deoarece celelalte celule sunt goale, deci nu sunt afișate.

Pentru a rezolva acest lucru putem folosi containerul Aligment și îl putem pune în locuri goale, pentru a menține designul ferestrei.

Executăm din nou aplicația din meniu Run> Start Debug sau cu tasta F5, vom vedea că butonul este acum afișat unde l-am inserat și respectă aspectul ecranului. Acum putem continua să inserăm alte widgeturi.

Să adăugăm câteva componente precum Calendar în celula centrală a VBox si Bară de meniu în celula superioară a Vbox, Rezultatul este după cum urmează:

Recipient cu mese
Acest tip de container este o grilă cu rânduri și coloane care poate fi utilă atunci când trebuie să creăm o grilă în care să putem plasa widgeturi, cum ar fi un ecran de introducere a datelor. Să vedem un exemplu cu o masă. Vom crea un proiect C # și Gtk în Monodevelop, vom crea un formular de introducere a datelor.
Semnăm un container Vbox și în ultimul rând adăugăm un container Hbox, ca în proiectul anterior adăugăm o Menubar și butoanele de mai jos, în centru adăugăm un container de masă.

Containerul tabelului implicit are 3 rânduri și 3 coloane, acum vom adăuga Widget ținând cont că fiecare celulă din tabel este redimensionată la obiectul pe care îl conține. Pentru a adăuga sau elimina rânduri sau coloane facem clic dreapta pe rând și apoi mergem la tabelul de opțiuni șterge sau inserăm rânduri sau coloane.
Să eliminăm ultimul rând și apoi în prima celulă a primului rând vom adăuga un container Vox pentru Etichete. Apoi, în a doua celulă a primului rând vom adăuga un container Vox pentru casetele de intrare sau text.

Putem defini proprietățile pentru fiecare control pentru a-l poziționa mai bine, în cazul etichetelor, proprietatea va trebui modificată Căptușeală pentru a-l regla la nivelul casetelor de text, va fi suficientă o umplere de 5 px în fiecare etichetă.

Vom adăuga componentele necesare pentru a înregistra și afișa fotografia utilizatorului, pentru ei în primul Vbox, făcând clic dreapta pe celula etichetei telefonului ne permite să introducem o celulă în vbox, vom adăuga și o celulă în alt vbox.
Acum vom adăuga un eticheta Foto și un widget Alegător de fișiere Buton pentru a selecta fișierul, De asemenea, în al treilea rând al tabelului vom adăuga un widget Imagine care va fi cel care va afișa fotografia, trebuie să ținem cont că imaginea se află în directorul de compilare al aplicației în acest caz Depanare care se generează automat la executare. Imaginea selectată are o înălțime de 100 px și o lățime de 100 px.

Container fix
Containerele fixe ne permit să tragem și să fixăm widgetul în poziții fixe și cu dimensiuni fixe. Acest container nu efectuează nicio gestionare automată a aspectului și nici nu redimensionează widgeturile. Acestea sunt utilizate în unele aplicații în care sunt necesare widget-uri care vor fi gestionate ulterior de cod, cum ar fi jocuri, aplicații specializate care funcționează cu diagrame sau grafică, cum ar fi OpenGL sau 3D.
Să vedem un exemplu în care vom pune un container fix și mai multe imagini.

Am pus un widget de imagine în fundal, un alt widget de imagine în fundal cu un avion și un alt widget de imagine în fundal cu o imagine a unui jucător de golf. Fiecare imagine este într-o coordonată fixă pe care apoi am putea să o gestionăm prin cod pentru a obține efectul mișcării sau al animației dacă ar fi un joc.
Rame sau Container de cadre
Rame sau Rame ca în Visual Studio este utilizat controlul Groupbox, acestea sunt utilizate pentru a conține un grup de widget în interior, Scopul unui cadru este de a defini grupul de widgeturi pe categorii sau secțiuni conexe, opțional poate avea un titlu. Poziția titlului și stilul casetei se configurează din proprietăți.
Eticheta titlului apare în colțul din stânga sus al cadrului. Dacă nu se pune niciun titlu, acesta va fi gol și titlul nu va fi afișat. Textul etichetei poate fi modificat folosind Etichetați proprietatea.
Într-o Cadru puteți combina oricare dintre containerele de mai sus și invers.
Să creăm un ecran Maestru / Detaliu, folosind cadre. Vom crea un Proiect C # și Gtk în Monodevelop și semnăm un container Vbox cu 4 rânduri și primul rând adăugăm un Bară de meniu,
În al doilea rând adăugăm un container cadru, titlul etichetei va fi produse și îi atribuim un tip de margine umbrit IN.

În interiorul cadrului adăugăm un container Table cu 4 rânduri și 3 coloane pentru a crea un formular de introducere a datelor și în ultimul rând central din tabel punem un Hbox cu două cutii pentru butoane Grava Da Anulare.
În al treilea rând al Vbox punem o bară separatoare cu widgetul Separator orizontal și în ultimul rând al Vbox vom pune un alt cadru și un Treeview.

Rețineți că, pentru ca totul să fie aliniat corect, trebuie să atingem proprietatea de umplere a fiecărui widget. Pentru a completa Treeview pe care îl vom numi tvwlista vom folosi codul c # în clasa Mainwindows care va fi următoarea:

 public MainWindow (): bază (Gtk.WindowType.Toplevel) {Build (); // Creez coloanele și antetele treeview // Creez coloana produs Gtk.TreeViewColumn Product col = new Gtk.TreeViewColumn (); colProducto.Title = "Produs"; // Creez coloana stoc Gtk.TreeViewColumn colStock = new Gtk.TreeViewColumn (); colStock.Title = "Stoc"; // Creez coloana de preț Gtk.TreeViewColumn pricecol = new Gtk.TreeViewColumn (); colPrice.Title = "Preț"; // adaug coloanele și le titlu în treeview tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Creez un model de date pentru stocare și unde adaug trei date de tip text Gtk.ListStore store = new Gtk.ListStore (typeof (șir), typeof (șir), typeof (șir)); // Aloc modelul TreeView tvwlista.Model = magazin; // adaug date în magazinul de modele.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Creăm o celulă care va afișa produsul Gtk.CellRendererText productCell = new Gtk.CellRendererText (); // Adăugăm celula de date despre produs colProduct.PackStart (productCell, true); // Adăugați celula de date stoc Gtk.CellRendererText cellStock = new Gtk.CellRendererText (); colStock.PackStart (cellStock, adevărat); // Adăugați celula de date despre preț Gtk.CellRendererText PriceCell = nou Gtk.CellRendererText (); pricecol.PackStart (priceCell, adevărat); // Adăugăm celulele de date la fiecare coloană și rândurile vor fi generate // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "text", 1); priceCol.AddAttribute (priceCell, "text", 2); }

Apoi executăm și rezultatul va fi următorul: