✅ Contenitori e componenti Monodevelop C# e GTK

Sommario

GTK # tramite contenitori ci permette di controllare la posizione dei widget in una finestra per poter creare il disegno. Questi contenitori che hanno caratteristiche diverse e servono a guidare la progettazione e il posizionamento dei componenti o widget all'interno di una finestra.
Il contenitori principali sono:

Contenitori con scatole orizzontali o verticali
Contenitori con Tavoli
Contenitore fisso
Cornici o contenitore per cornici

Come utilizzare i contenitori in base alle esigenze o ai requisiti della nostra applicazione
Contenitori con scatole orizzontali o verticali
Se siamo abituati a programmare sotto Windows e alla sua metodologia di progettazione dell'interfaccia drag-and-drop, questo tipo di contenitore è probabilmente migliore poiché i widget o i componenti sono posizionati nella finestra utilizzando le coordinate x, e come in Windows e questo è apprezzato.
Sebbene ciò sia possibile con Gtk e monodevelop, il modo migliore per allineare i widget è con le caselle. Ci sono due tipi di scatole orizzontale o HBox e verticale o VBox. Questo tipo di contenitore non dipende dalle dimensioni dello schermo. I contenitori HBox e VBox si occupano del ridimensionamento automatico della zona che un componente occupa.
Vediamo un esempio con riquadri orizzontali o verticali. Creeremo un progetto C# e Gtk in Monodevelop.
Gli assegniamo un contenitore Vbox e nell'ultima riga aggiungiamo un contenitore Hbox.

Quindi aggiungeremo un pulsante nell'ultima cella dell'Hbox. Nelle proprietà assegniamo il nome bt Accettare e nell'etichetta il nome Accettare.

Se eseguiamo l'applicazione dal Menu Esegui> Avvia debug o con la chiave F5, vedremo che il pulsante è allineato nell'area in alto a sinistra dello schermo poiché le altre celle sono vuote quindi non vengono mostrate.

Per risolvere questo possiamo usare il contenitore Alignment e metterlo nei posti vuoti, per mantenere il design della finestra.

Eseguiamo nuovamente l'applicazione dal menu Esegui> Avvia debug oppure con il tasto F5, vedremo che il pulsante ora viene mostrato dove lo abbiamo inserito e rispetta il layout dello schermo. Ora possiamo continuare a inserire altri widget.

Aggiungiamo alcuni componenti come il Calendario nella cella centrale del VBox e il MenuBar nella cella superiore del Vbox, Il risultato è il seguente:

Contenitore con Tavoli
Questo tipo di contenitore è una griglia con righe e colonne che può essere utile quando abbiamo bisogno di creare una griglia dove possiamo posizionare dei widget, come una schermata di inserimento dati. Vediamo un esempio con una tabella. Creeremo un progetto C# e Gtk in Monodevelop, creeremo un modulo di inserimento dati.
Firmiamo un contenitore Vbox e nell'ultima riga aggiungiamo un contenitore Hbox, come nel progetto precedente aggiungiamo una barra dei menu e i pulsanti sottostanti, al centro aggiungiamo un contenitore di tabelle.

Il contenitore della tabella predefinito ha 3 righe e 3 colonne, ora aggiungeremo Widget tenendo conto che ogni cella della tabella viene ridimensionata all'oggetto che contiene. Per aggiungere o rimuovere righe o colonne facciamo clic con il tasto destro sulla riga e poi andiamo alla tabella delle opzioni elimina o inserisci righe o colonne.
Rimuoviamo l'ultima riga e quindi nella prima cella della prima riga aggiungeremo un contenitore Vox per le etichette. Quindi nella seconda cella della prima riga aggiungeremo un contenitore Vox per la voce o le caselle di testo.

Possiamo definire le proprietà per ogni controllo per posizionarlo al meglio, nel caso di Etichette, la proprietà dovrà essere ritoccata Imbottitura per adeguarlo al livello delle caselle di testo, sarà sufficiente un padding di 5px in ogni Label.

Aggiungeremo i componenti necessari per registrare e visualizzare la foto dell'utente, per loro nel primo Vbox, facendo clic con il tasto destro sulla cella dell'etichetta del telefono ci consente di inserire una cella nel vbox, aggiungeremo anche una cella al altro vbox.
Ora aggiungeremo a etichetta foto e un widget Scelta file Pulsante per selezionare il file, inoltre nella terza riga della tabella aggiungeremo un widget Immagine che sarà quello che mostrerà la foto, dobbiamo tenere conto che l'immagine si trova nella directory di compilazione dell'applicazione in questo caso Debug che viene generato automaticamente durante l'esecuzione. L'immagine selezionata è alta 100 pixel e larga 100 pixel.

Contenitore fisso
I contenitori fissi ci consentono di trascinare e rilasciare i widget in posizioni fisse e con dimensioni fisse. Questo contenitore non esegue alcuna gestione automatica del layout, né ridimensiona i widget. Sono utilizzati in alcune applicazioni in cui sono necessari widget che verranno successivamente gestiti da codice come giochi, applicazioni specializzate che funzionano con diagrammi o grafici come OpenGL o 3D.
Vediamo un esempio in cui metteremo un contenitore fisso e diverse immagini.

Abbiamo messo un widget immagine sullo sfondo, un altro widget immagine sullo sfondo con un aeroplano e un altro widget immagine sullo sfondo con l'immagine di un giocatore di golf. Ogni immagine è in una coordinata fissa che quindi potremmo gestire le coordinate tramite codice per ottenere l'effetto di movimento o animazione se fosse un gioco.
Cornici o contenitore per cornici
Frames o Frames come in Visual Studio viene utilizzato il controllo Groupbox, servono a contenere un gruppo di widget all'interno, Lo scopo di un frame è definire widget di gruppo per categorie o sezioni correlate, opzionalmente può avere un titolo. La posizione del titolo e lo stile del riquadro si configurano dalle proprietà.
L'etichetta del titolo appare nell'angolo in alto a sinistra della cornice. Se non viene inserito alcun titolo, sarà vuoto e il titolo non verrà visualizzato. Il testo dell'etichetta può essere modificato utilizzando il Proprietà etichetta.
In un Portafoto puoi combinare uno qualsiasi dei contenitori di cui sopra e viceversa.
Creiamo uno schermo Master/Dettaglio, utilizzando i frame. Creeremo un Progetto C# e Gtk in Monodevelop e firmiamo un contenitore Vbox con 4 righe e prima riga aggiungiamo a Barra dei menu,
Nella seconda riga aggiungiamo un contenitore di cornice, il titolo dell'etichetta sarà prodotti e gli assegniamo un bordo ombreggiato di tipo IN.

All'interno del frame aggiungiamo un contenitore Tabella con 4 righe e 3 colonne per creare un form di inserimento dati e nell'ultima riga centrale della tabella inseriamo un Hbox con due caselle per i pulsanti Incidere sì Annulla.
Nella terza riga del Vbox mettiamo una barra di separazione con il widget Separatore Orizzontale e nell'ultima riga del Vbox metteremo un altro frame e una Treeview.

Ricorda che affinché tutto sia correttamente allineato, dobbiamo toccare la proprietà padding di ciascun widget. Per riempire la Treeview che chiameremo tvwlista utilizzeremo il codice c# nella classe Mainwindows che sarà il seguente:

 public MainWindow (): base (Gtk.WindowType.Toplevel) {Build (); // creo le colonne e le intestazioni del treeview // creo la colonna prodotto Gtk.TreeViewColumn Product col = new Gtk.TreeViewColumn (); colProducto.Title = "Prodotto"; // creo la colonna stock Gtk.TreeViewColumn colStock = new Gtk.TreeViewColumn (); colStock.Title = "Azione"; // creo la colonna del prezzo Gtk.TreeViewColumn pricecol = new Gtk.TreeViewColumn (); colPrice.Title = "Prezzo"; // Aggiungo le colonne e le titolo alla treeview tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Creo un modello dati da memorizzare e dove aggiungo tre dati di tipo text Gtk.ListStore store = new Gtk.ListStore (typeof (stringa), typeof (stringa), typeof (stringa)); // assegno il modello al TreeView tvwlista.Model = store; // Aggiungo i dati all'archivio modelli.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Creiamo una cella che mostrerà il prodotto Gtk.CellRendererText productCell = new Gtk.CellRendererText (); // Aggiungiamo la cella dei dati del prodotto colProduct.PackStart (productCell, true); // Aggiungi la cella dei dati stock Gtk.CellRendererText cellStock = new Gtk.CellRendererText (); colStock.PackStart (cellStock, true); // Aggiungi la cella dei dati del prezzo Gtk.CellRendererText PriceCell = new Gtk.CellRendererText (); pricecol.PackStart (priceCell, true); // Aggiungiamo le celle di dati a ciascuna colonna e le righe verranno generate // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "testo", 1); priceCol.AddAttribute (priceCell, "testo", 2); }

Successivamente eseguiamo e il risultato sarà il seguente: