✅ Monodevelop C # en GTK containers en componenten

Inhoudsopgave

GTK # door middel van containers stelt ons in staat om de positie van de widgets in een venster te controleren om het ontwerp te kunnen maken. Deze containers hebben verschillende kenmerken en dienen om het ontwerp en de plaatsing van de componenten of widget binnen een venster te begeleiden.
De hoofdcontainers zijn:

Containers met horizontale of verticale dozen
Containers met tafels
Vaste container
Frames of Framecontainer

Hoe de containers te gebruiken volgens de behoeften of vereisten van onze applicatie?
Containers met horizontale of verticale dozen
Als we gewend zijn te programmeren onder Windows en de ontwerpmethode voor het slepen en neerzetten van de interface, is dit type container waarschijnlijk beter omdat de widgets of componenten in het venster worden gepositioneerd met behulp van x-coördinaten, en hoe in Windows en dat wordt op prijs gesteld.
Hoewel dit mogelijk is met Gtk en monodevelop, is de beste manier om de widgets uit te lijnen met de vakken. Er zijn twee soorten dozen: horizontaal of HBox en verticaal of VBox. Dit type container is niet afhankelijk van de schermgrootte. De HBox- en VBox-containers zorgen voor het automatisch vergroten of verkleinen van de zone die een component inneemt.
Laten we een voorbeeld bekijken met horizontale of verticale vakken. We zullen een C # en Gtk-project maken in Monodevelop.
We wijzen het een Vbox-container toe en in de laatste rij voegen we een Hbox-container toe.

Dan voegen we een knop toe in de laatste cel van de Hbox. In de eigenschappen kennen we de naam bt . toe Accepteren en in het label de naam Accepteren.

Als we de applicatie uitvoeren vanuit de Menu Uitvoeren> Foutopsporing starten of met de sleutel F5, we zullen zien dat de knop is uitgelijnd in de linkerbovenhoek van het scherm, omdat de andere cellen leeg zijn en daarom niet worden weergegeven.

Om dit op te lossen, kunnen we de Aligment-container gebruiken en deze op de lege plaatsen plaatsen, om het ontwerp van het venster te behouden.

We voeren de applicatie opnieuw uit vanuit het menu Uitvoeren> Foutopsporing starten of met de F5-toets, we zullen zien dat de knop nu wordt weergegeven waar we hem hebben ingevoegd en de schermindeling respecteert. Nu kunnen we doorgaan met het invoegen van andere widgets.

Laten we wat componenten toevoegen, zoals de Kalender in de centrale cel van de VBox en de Menubalk in de bovenste cel van de Vbox, Het resultaat is als volgt:

Container met tafels
Dit type container is een raster met rijen en kolommen dat handig kan zijn wanneer we een raster moeten maken waarin we widgets kunnen plaatsen, zoals een gegevensinvoerscherm. Laten we een voorbeeld met een tabel bekijken. We zullen een C#- en Gtk-project maken in Monodevelop, we zullen een gegevensinvoerformulier maken.
We ondertekenen een Vbox-container en in de laatste rij voegen we een Hbox-container toe, net als in het vorige project voegen we een menubalk toe en de onderstaande knoppen, in het midden voegen we een tabelcontainer toe.

De standaard tabelcontainer heeft 3 rijen en 3 kolommen, nu zullen we Widget toevoegen, rekening houdend met het feit dat elke cel in de tabel wordt aangepast aan het object dat het bevat. Om rijen of kolommen toe te voegen of te verwijderen, klikken we met de rechtermuisknop op de rij en gaan we naar de optietabel verwijderen of rijen of kolommen invoegen.
Laten we de laatste rij verwijderen en dan zullen we in de eerste cel van de eerste rij een Vox-container voor de labels toevoegen. Vervolgens voegen we in de tweede cel van de eerste rij een Vox-container toe voor de invoer- of tekstvakken.

We kunnen de eigenschappen voor elk besturingselement definiëren om het beter te positioneren, in het geval van labels moet de eigenschap worden aangepast opvulling om het aan te passen aan het niveau van de tekstvakken, is een opvulling van 5px in elk label voldoende.

We gaan de nodige componenten toevoegen om de foto van de gebruiker te registreren en weer te geven, voor hen in de eerste Vbox, door met de rechtermuisknop op de cel van het telefoonlabel te klikken, kunnen we een cel invoegen in de vbox, we zullen ook een cel toevoegen aan de andere vbox.
Nu zullen we een . toevoegen label Foto en een widget Bestandskiezer Knop om het bestand te selecteren. Ook in de derde rij van de tabel zullen we een afbeeldingswidget toevoegen die de foto zal tonen, we moeten er rekening mee houden dat de afbeelding zich in dit geval in de compilatiemap van de applicatie bevindt Debuggen die automatisch wordt gegenereerd bij het uitvoeren. De geselecteerde afbeelding is 100px hoog bij 100px breed.

Vaste container
Met vaste containers kunnen we widgets slepen en neerzetten op vaste posities en met vaste afmetingen. Deze container voert geen automatisch lay-outbeheer uit en wijzigt ook het formaat van de widgets niet. Ze worden gebruikt in sommige toepassingen waar widgets nodig zijn die later door code zullen worden beheerd, zoals games, gespecialiseerde toepassingen die werken met diagrammen of afbeeldingen zoals OpenGL of 3D.
Laten we een voorbeeld bekijken waarin we een vaste container en verschillende afbeeldingen plaatsen.

We hebben een afbeeldingswidget op de achtergrond geplaatst, een andere afbeeldingswidget op de achtergrond met een vliegtuig en een andere afbeeldingswidget op de achtergrond met een afbeelding van een golfer. Elke afbeelding bevindt zich op een vaste coördinaat, zodat we de coördinaten per code kunnen beheren om het effect van beweging of animatie te bereiken als het een spel was.
Frames of Framecontainer
Frames of Frames zoals in Visual Studio het Groupbox-besturingselement wordt gebruikt, ze worden gebruikt om een groep widgets binnenin te bevatten. Het doel van een frame is om groepswidgets te definiëren op categorieën of gerelateerde secties, optioneel kan het een titel hebben. De positie van de titel en de stijl van het vak configureren vanuit de eigenschappen.
Het label van de titel verschijnt in de linkerbovenhoek van het frame. Als er geen titel is geplaatst, is deze leeg en wordt de titel niet weergegeven. De labeltekst kan worden gewijzigd met de Labeleigenschap.
In een Kader u kunt elk van de bovenstaande containers combineren en vice versa.
Laten we een scherm maken Meester / Detail, met behulp van kaders. We zullen een maken C # en Gtk-project in Monodevelop en we ondertekenen een Vbox-container met 4 rijen en de eerste rij voegen we a . toe Menubalk,
In de tweede rij voegen we een framecontainer toe, de titel van het label is producten en we wijzen het een gearceerd randtype IN toe.

Binnen het frame voegen we een tabelcontainer toe met 4 rijen en 3 kolommen om een gegevensinvoerformulier te maken en in de laatste centrale rij in de tabel plaatsen we een Hbox met twee vakken voor de knoppen Graveren Y Annuleren.
In de derde rij van de Vbox plaatsen we een scheidingsbalk met de Horizontal Separator-widget en in de laatste rij van de Vbox plaatsen we nog een frame en een Treeview.

Onthoud dat om alles goed uitgelijnd te krijgen, we de opvullingseigenschap van elke widget moeten aanraken. Om de Treeview te vullen die we tvwlista zullen noemen, gebruiken we c # code in de Mainwindows-klasse, die als volgt zal zijn:

 public MainWindow (): basis (Gtk.WindowType.Toplevel) {Build (); // Ik maak de kolommen en koppen van de treeview // Ik maak de productkolom Gtk.TreeViewColumn Product col = new Gtk.TreeViewColumn (); colProducto.Title = "Product"; // Ik maak de voorraadkolom Gtk.TreeViewColumn colStock = new Gtk.TreeViewColumn (); colStock.Title = "Voorraad"; // Ik maak de prijskolom Gtk.TreeViewColumn pricecol = new Gtk.TreeViewColumn (); colPrice.Title = "Prijs"; // Ik voeg de kolommen toe en geef ze een titel in de treeview tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (prijskolom); // Ik maak een gegevensmodel om op te slaan en waar ik drie gegevens van het type tekst toevoeg Gtk.ListStore store = new Gtk.ListStore (typeof (string), typeof (string), typeof (string)); // Ik wijs het model toe aan de TreeView tvwlista.Model = store; // Ik voeg gegevens toe aan de modelwinkel.AppendValues ("TABLET SAMSUNG", "5", "175"); winkel.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE SCHIJF 1 TB", "10", "85"); // We maken een cel die het product Gtk.CellRendererText productCell = new Gtk.CellRendererText (); // We voegen de productdatacel toe colProduct.PackStart (productCell, true); // Voeg de voorraadgegevenscel toe Gtk.CellRendererText cellStock = new Gtk.CellRendererText (); colStock.PackStart (cellStock, true); // Voeg de prijsgegevenscel toe Gtk.CellRendererText PriceCell = new Gtk.CellRendererText (); pricecol.PackStart (priceCell, true); // We voegen de gegevenscellen toe aan elke kolom en de rijen worden gegenereerd // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "tekst", 1); priceCol.AddAttribute (priceCell, "tekst", 2); }

Vervolgens voeren we het uit en het resultaat is het volgende: