✅ Monodevelop C og GTK beholdere og komponenter

Innholdsfortegnelse

GTK # ved hjelp av containere lar oss kontrollere posisjonen til widgetene i et vindu for å kunne lage designet. Disse beholderne som har forskjellige egenskaper og tjener til å lede design og plassering av komponentene eller widgeten i et vindu.
De hovedbeholdere er:

Beholdere med horisontale eller vertikale bokser
Beholdere med tabeller
Fast beholder
Rammer eller rammebeholder

Hvordan bruke beholderne i henhold til behovene eller kravene i applikasjonen vår
Beholdere med horisontale eller vertikale bokser
Hvis vi er vant til å programmere under Windows og dra-og-slipp-grensesnittdesignmetodikken, er denne typen containere sannsynligvis bedre siden widgets eller komponenter er plassert i vinduet ved hjelp av x-koordinater, og hvordan i Windows og det er verdsatt.
Selv om dette er mulig med Gtk og monodevelop, er den beste måten å justere widgetene på med boksene. Det er to typer bokser horisontal eller HBox og vertikal eller VBox. Denne beholderen avhenger ikke av skjermstørrelsen. HBox- og VBox -beholderne sørger for automatisk endring av størrelsen på sonen som en komponent opptar.
La oss se et eksempel med horisontale eller vertikale bokser. Vi vil lage et C # og Gtk prosjekt i Monodevelop.
Vi tildeler den en Vbox -beholder, og i den siste raden legger vi til en Hbox -beholder.

Deretter legger vi til en knapp i den siste cellen i Hbox. I eiendommene tildeler vi navnet bt Å akseptere og navnet på etiketten Å akseptere.

Hvis vi kjører programmet fra Kjør meny> Start feilsøking eller med nøkkelen F5, vil vi se at knappen er justert i øvre venstre område av skjermen siden de andre cellene er tomme, derfor blir de ikke vist.

For å løse dette kan vi bruke Aligment -beholderen og legge den på de tomme stedene for å opprettholde utformingen av vinduet.

Vi kjører programmet på nytt fra menyen Kjør> Start feilsøking eller med F5 -tasten, vil vi se at knappen nå vises der vi satte den inn og respekterer skjermoppsettet. Nå kan vi fortsette å sette inn andre widgets.

La oss legge til noen komponenter som Kalender i den sentrale cellen i VBox og Menyfelt i den øvre cellen i Vbox, Resultatet er som følger:

Beholder med tabeller
Denne beholdertypen er et rutenett med rader og kolonner som kan være nyttig når vi trenger å lage et rutenett der vi kan plassere widgets, for eksempel en dataregistreringsskjerm. La oss se et eksempel med en tabell. Vi vil opprette et C # og Gtk -prosjekt i Monodevelop, vi vil lage et dataregistreringsskjema.
Vi signerer en Vbox -beholder, og i den siste raden legger vi til en Hbox -beholder, som i det forrige prosjektet legger vi til en menylinje og knappene nedenfor, i midten legger vi til en bordbeholder.

Standardbordbeholderen har 3 rader og 3 kolonner. Nå legger vi til widget, med tanke på at hver celle i tabellen er endret til objektet den inneholder. For å legge til eller fjerne rader eller kolonner høyreklikker du på raden, og deretter går vi til alternativtabellen for å slette eller sette inn rader eller kolonner.
La oss fjerne den siste raden, og deretter i den første cellen i den første raden vil vi legge til en Vox -beholder for etikettene. Deretter vil vi i den andre cellen i den første raden legge til en Vox -beholder for oppføringen eller tekstboksene.

Vi kan definere egenskapene for hver kontroll for å bedre plassere den. Når det gjelder etiketter, må egenskapen justeres Polstring for å justere det til nivået på tekstboksene, vil en polstring på 5 piksler i hver etikett være nok.

Vi skal legge til de nødvendige komponentene for å registrere og vise brukerens bilde, for dem i den første Vbox, ved å høyreklikke på cellen i telefonetiketten kan vi sette inn en celle i vboxen, vi vil også legge til en celle i annen vbox.
Nå vil vi legge til en etikett Foto og en widget Filvelger Knapp for å velge filen, også i den tredje raden i tabellen vil vi legge til en bilde -widget som vil være den som vil vise bildet, vi må ta hensyn til at bildet er i kompileringskatalogen til applikasjonen i dette tilfellet Feilsøk som genereres automatisk ved utførelse. Det valgte bildet er 100px høyt og 100px bredt.

Fast beholder
Faste beholdere lar oss dra og slippe widgeten i faste posisjoner og med faste størrelser. Denne beholderen utfører ingen automatisk layoutstyring, og endrer heller ikke størrelsen på widgetene. De brukes i noen applikasjoner der widgets er nødvendig som senere vil bli administrert av kode som spill, spesialiserte applikasjoner som fungerer med diagrammer eller grafikk som OpenGL eller 3D.
La oss se et eksempel hvor vi vil sette en fast beholder og flere bilder.

Vi har satt en bilde -widget i bakgrunnen, en annen bilde -widget i bakgrunnen med et fly og en annen bilde -widget i bakgrunnen med et bilde av en golfspiller. Hvert bilde er i en fast koordinat, så kan vi administrere koordinatene med kode for å oppnå effekten av bevegelse eller animasjon hvis det var et spill.
Rammer eller rammebeholder
Rammer eller rammer som i Visual Studio Groupbox -kontrollen brukes, de brukes til å inneholde en gruppe widget inne. Formålet med en ramme er å definere gruppe -widget etter kategorier eller relaterte seksjoner, eventuelt kan den ha en tittel. Plasseringen av tittelen og bokstilen konfigureres ut fra egenskapene.
Etiketten til tittelen vises i øvre venstre hjørne av rammen. Hvis ingen tittel er satt, vil den være tom og tittelen vil ikke bli vist. Etikettteksten kan endres ved hjelp av Merk eiendom.
I en Ramme du kan kombinere hvilken som helst av beholderne ovenfor og omvendt.
La oss lage en skjerm Master / Detalj, ved bruk av rammer. Vi vil lage en C # og Gtk -prosjektet i Monodevelop og vi signerer en Vbox -beholder med 4 rader, og første rad legger vi til en Menyfelt,
I den andre raden legger vi til en rammebeholder, tittelen på etiketten vil være produkter og vi tilordner den en skyggelagt kant IN.

Inne i rammen legger vi til en tabellbeholder med 4 rader og 3 kolonner for å lage et dataregistreringsskjema, og i den siste sentrale raden i tabellen legger vi en Hbox med to bokser for knappene Gravere Y Avbryt.
I den tredje raden i Vbox setter vi en skillelinje med widgeten Horizontal Separator, og i den siste raden i Vbox setter vi en annen ramme og en Treeview.

Husk at for at alt skal være riktig justert, må vi berøre padding -egenskapen til hver widget. For å fylle Treeview som vi vil kalle tvwlista vil vi bruke c # -kode i Mainwindows -klassen som vil være følgende:

 offentlig MainWindow (): base (Gtk.WindowType.Toplevel) {Build (); // Jeg lager kolonnene og overskriftene til treeview // Jeg lager produktkolonnen Gtk.TreeViewColumn Produktkol = ny Gtk.TreeViewColumn (); colProducto.Title = "Produkt"; // Jeg lager lagerkolonnen Gtk.TreeViewColumn colStock = ny Gtk.TreeViewColumn (); colStock.Title = "Lager"; // Jeg oppretter priskolonnen Gtk.TreeViewColumn pricecol = ny Gtk.TreeViewColumn (); colPrice.Title = "Pris"; // Jeg legger til kolonnene og gir dem tittelen til treeview tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Jeg lager en datamodell som skal lagres og hvor jeg legger til tre data av typen tekst Gtk.ListStore store = ny Gtk.ListStore (typeof (streng), typeof (streng), typeof (streng)); // Jeg tildeler modellen til TreeView tvwlista.Model = store; // Jeg legger til data i modellbutikken.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Vi lager en celle som viser produktet Gtk.CellRendererText productCell = ny Gtk.CellRendererText (); // Vi legger til produktdatacellen colProduct.PackStart (productCell, true); // Legg til lagerdatacellen Gtk.CellRendererText cellStock = ny Gtk.CellRendererText (); colStock.PackStart (cellStock, true); // Legg til prisdatacellen Gtk.CellRendererText PriceCell = ny Gtk.CellRendererText (); pricecol.PackStart (priceCell, true); // Vi legger til datacellene i hver kolonne, og radene genereres // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "tekst", 1); priceCol.AddAttribute (priceCell, "tekst", 2); }

Neste utfører vi, og resultatet blir følgende: