✅ Monodevelop C & GTK containere og komponenter

Indholdsfortegnelse

GTK # ved hjælp af containere giver os mulighed for at styre widgets position i et vindue for at kunne oprette designet. Disse containere, der har forskellige egenskaber og tjener til at styre design og placering af komponenterne eller widgeten i et vindue.
Det hovedbeholdere er:

Beholdere med vandrette eller lodrette kasser
Beholdere med borde
Fast beholder
Rammer eller rammebeholder

Sådan bruges beholderne i henhold til behovene eller kravene i vores applikation
Beholdere med vandrette eller lodrette kasser
Hvis vi er vant til at programmere under Windows og dets metode til træk-og-slip-interface-design, er denne type containere sandsynligvis bedre, da widgets eller komponenter er placeret i vinduet ved hjælp af x-koordinater, og hvordan i Windows, og det er værdsat.
Selvom dette er muligt med Gtk og monodevelop, er den bedste måde at justere widgets på med boksene. Der er to typer kasser vandret eller HBox og lodret eller VBox. Denne type beholder afhænger ikke af skærmstørrelsen. HBox- og VBox -beholderne sørger for den automatiske ændring af zonen, som en komponent indtager.
Lad os se et eksempel med vandrette eller lodrette bokse. Vi opretter et C # og Gtk projekt i Monodevelop.
Vi tildeler den en Vbox -container, og i den sidste række tilføjer vi en Hbox -container.

Derefter tilføjer vi en knap i den sidste celle i Hbox. I egenskaberne tildeler vi navnet bt At acceptere og navnet på etiketten At acceptere.

Hvis vi kører applikationen fra Kør menu> Start fejlfinding eller med nøglen F5, vil vi se, at knappen er justeret i det øverste venstre område af skærmen, da de andre celler er tomme, derfor vises de ikke.

For at løse dette kan vi bruge Aligment -beholderen og lægge den på de tomme steder for at opretholde vinduets design.

Vi kører applikationen igen fra menuen Kør> Start fejlfinding eller med F5 -tasten, vil vi se, at knappen nu vises, hvor vi indsatte den og respekterer skærmlayoutet. Nu kan vi fortsætte med at indsætte andre widgets.

Lad os tilføje nogle komponenter som Kalender i den centrale celle i VBox og Menu linje i den øverste celle i Vbox, Resultatet er som følger:

Beholder med borde
Denne type containere er et gitter med rækker og kolonner, der kan være nyttige, når vi skal oprette et gitter, hvor vi kan placere widgets, f.eks. En dataindtastningsskærm. Lad os se et eksempel med en tabel. Vi opretter et C # og Gtk projekt i Monodevelop, vi opretter en dataindtastningsformular.
Vi underskriver en Vbox -beholder, og i den sidste række tilføjer vi en Hbox -beholder, som i det forrige projekt tilføjer vi en menulinje og knapperne herunder, i midten tilføjer vi en bordbeholder.

Standardbordbeholderen har 3 rækker og 3 kolonner, nu tilføjer vi Widget under hensyntagen til, at hver celle i tabellen ændres til det objekt, den indeholder. For at tilføje eller fjerne rækker eller kolonner højreklikker du på rækken, og derefter går vi til indstillingstabellen for at slette eller indsætte rækker eller kolonner.
Lad os fjerne den sidste række, og derefter vil vi i den første celle i den første række tilføje en Vox -beholder til etiketterne. Derefter tilføjer vi i den anden celle i den første række en Vox -beholder til posten eller tekstbokse.

Vi kan definere egenskaberne for hver kontrol for bedre at placere den. I tilfælde af etiketter skal ejendommen tilpasses Polstring for at justere det til niveauet for tekstfelterne, er en polstring på 5px i hver etiket nok.

Vi vil tilføje de nødvendige komponenter til at registrere og vise brugerens foto, for dem i den første Vbox, ved at højreklikke på cellen på telefonmærkaten kan vi indsætte en celle i vboxen, vi tilføjer også en celle til anden vbox.
Nu tilføjer vi en etiket Foto og en widget Filvælger Knap for at vælge filen, også i den tredje række i tabellen tilføjer vi en billedwidget, der vil være den, der viser billedet, vi skal tage højde for, at billedet er i programmets kompilationsmappe i dette tilfælde Fejlfinde som genereres automatisk ved udførelse. Det valgte billede er 100px højt med 100px bredt.

Fast beholder
Faste containere giver os mulighed for at trække og slippe widget i faste positioner og med faste størrelser. Denne container udfører ikke nogen automatisk layoutstyring, og den ændrer heller ikke størrelsen på widgets. De bruges i nogle applikationer, hvor widgets er nødvendige, som senere vil blive administreret af kode, f.eks. Spil, specialiserede applikationer, der arbejder med diagrammer eller grafik som OpenGL eller 3D.
Lad os se et eksempel, hvor vi vil lægge en fast beholder og flere billeder.

Vi har lagt en billedwidget i baggrunden, en anden billedwidget i baggrunden med et fly og en anden billedwidget i baggrunden med et billede af en golfspiller. Hvert billede er i en fast koordinat, så vi kunne styre koordinaterne med kode for at opnå effekten af bevægelse eller animation, hvis det var et spil.
Rammer eller rammebeholder
Rammer eller rammer som i Visual Studio Groupbox -kontrollen bruges, de bruges til at indeholde en gruppe widget indeni. Formålet med en ramme er at definere gruppe -widget efter kategorier eller relaterede sektioner, eventuelt kan den have en titel. Titelens placering og boksens stil konfigureres ud fra egenskaberne.
Titelens etiket vises i rammens øverste venstre hjørne. Hvis der ikke er angivet en titel, vil den være tom, og titlen vil ikke blive vist. Etiketteksten kan ændres ved hjælp af Mærk ejendom.
I en Ramme du kan kombinere en af ovenstående beholdere og omvendt.
Lad os oprette en skærm Mester / detalje, ved hjælp af rammer. Vi vil oprette en C # og Gtk projekt i Monodevelop og vi underskriver en Vbox -beholder med 4 rækker og første række tilføjer vi en Menu linje,
I den anden række tilføjer vi en rammebeholder, etiketens titel vil være produkter, og vi tildeler den en skraveret kanttype IN.

Inde i rammen tilføjer vi en tabelbeholder med 4 rækker og 3 kolonner for at oprette en dataindtastningsskema, og i den sidste centrale række i tabellen lægger vi en Hbox med to bokse til knapperne Gravere Y Afbestille.
I den tredje række i Vbox sætter vi en skillelinje med widgeten Horisontal separator, og i den sidste række i Vbox sætter vi endnu en ramme og en Treeview.

Husk, at for at alt kan justeres korrekt, skal vi røre ved hver widgets polstringsejendom. For at udfylde Treeview, som vi vil kalde tvwlista, vil vi bruge c # -kode i Mainwindows -klassen, som vil være følgende:

 offentlig MainWindow (): base (Gtk.WindowType.Toplevel) {Build (); // Jeg opretter kolonnerne og overskrifterne i trævisningen // Jeg opretter produktkolonnen Gtk.TreeViewColumn Produktkol = ny Gtk.TreeViewColumn (); colProducto.Title = "Produkt"; // Jeg opretter lagerkolonnen Gtk.TreeViewColumn colStock = ny Gtk.TreeViewColumn (); colStock.Title = "Lager"; // Jeg opretter priskolonnen Gtk.TreeViewColumn pricecol = ny Gtk.TreeViewColumn (); colPrice.Title = "Pris"; // Jeg tilføjer kolonnerne og navngiver dem til treeview tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Jeg opretter en datamodel, der skal gemmes, og hvor jeg tilføjer tre data af type tekst Gtk.ListStore store = ny Gtk.ListStore (typeof (streng), typeof (streng), typeof (streng)); // Jeg tildeler modellen til TreeView tvwlista.Model = store; // Jeg tilføjer data til modelbutikken.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Vi opretter en celle, der viser produktet Gtk.CellRendererText productCell = ny Gtk.CellRendererText (); // Vi tilføjer produktdatacellen colProduct.PackStart (productCell, true); // Tilføj lagerdatacellen Gtk.CellRendererText cellStock = ny Gtk.CellRendererText (); colStock.PackStart (cellStock, sand); // Tilføj prisdatacellen Gtk.CellRendererText PriceCell = ny Gtk.CellRendererText (); pricecol.PackStart (priceCell, true); // Vi tilføjer datacellerne til hver kolonne, og rækkerne genereres // colProducto.AddAttribute (cellProducto, "tekst", 0); colStock.AddAttribute (cellStock, "tekst", 1); priceCol.AddAttribute (priceCell, "tekst", 2); }

Næste udfører vi, og resultatet bliver følgende: