✅ Monodevelop C#- und GTK-Container und -Komponenten

Inhaltsverzeichnis

GTK # mit Hilfe von Containern ermöglicht es uns, die Position der Widgets in einem Fenster zu steuern, um das Design erstellen zu können. Diese Container haben unterschiedliche Eigenschaften und dienen dazu, das Design und die Platzierung der Komponenten oder Widgets innerhalb eines Fensters zu leiten.
Das Hauptcontainer sind:

Container mit horizontalen oder vertikalen Boxen
Container mit Tabellen
Fester Behälter
Rahmen oder Rahmencontainer

So verwenden Sie die Behälter gemäß den Bedürfnissen oder Anforderungen unserer Anwendung
Container mit horizontalen oder vertikalen Boxen
Wenn wir an die Programmierung unter Windows und seine Drag-and-Drop-Schnittstellendesign-Methodik gewöhnt sind, ist diese Art von Container wahrscheinlich besser, da die Widgets oder Komponenten im Fenster mithilfe von x-Koordinaten positioniert werden, und wie in Windows und das wird geschätzt.
Obwohl dies mit Gtk und Monodevelop möglich ist, lassen sich die Widgets am besten an den Boxen ausrichten. Es gibt zwei Arten von Boxen horizontal oder HBox und vertikal oder VBox. Diese Art von Container hängt nicht von der Bildschirmgröße ab. Die Container HBox und VBox sorgen für die automatische Größenänderung der Zone, die eine Komponente belegt.
Sehen wir uns ein Beispiel mit horizontalen oder vertikalen Kästchen an. Wir werden ein C#- und Gtk-Projekt in Monodevelop erstellen.
Wir weisen ihm einen Vbox-Container zu und in der letzten Zeile fügen wir einen Hbox-Container hinzu.

Dann fügen wir in der letzten Zelle der Hbox eine Schaltfläche hinzu. In den Eigenschaften vergeben wir den Namen bt Akzeptieren und im Etikett der Name Akzeptieren.

Wenn wir die Anwendung vom Ausführen-Menü> Debug starten oder mit dem Schlüssel F5, sehen wir, dass die Schaltfläche im oberen linken Bereich des Bildschirms ausgerichtet ist, da die anderen Zellen leer sind und daher nicht angezeigt werden.

Um dies zu lösen, können wir den Ausrichtungscontainer verwenden und ihn an den leeren Stellen platzieren, um das Design des Fensters beizubehalten.

Wir führen die Anwendung erneut über das Menü aus Ausführen> Debug starten oder mit der Taste F5 sehen wir, dass die Schaltfläche jetzt dort angezeigt wird, wo wir sie eingefügt haben und das Bildschirmlayout respektiert. Jetzt können wir weitere Widgets einfügen.

Lassen Sie uns einige Komponenten wie die hinzufügen Kalender in der zentralen Zelle des VBox und das Menüleiste in der oberen Zelle des Vbox, Das Ergebnis ist wie folgt:

Container mit Tabellen
Dieser Containertyp ist ein Raster mit Zeilen und Spalten, das nützlich sein kann, wenn wir ein Raster erstellen müssen, in dem wir Widgets platzieren können, z. B. einen Dateneingabebildschirm. Sehen wir uns ein Beispiel mit einer Tabelle an. Wir werden ein C#- und Gtk-Projekt in Monodevelop erstellen, wir erstellen ein Dateneingabeformular.
Wir signieren einen Vbox-Container und in der letzten Zeile fügen wir einen Hbox-Container hinzu, wie im vorherigen Projekt fügen wir eine Menüleiste und die Schaltflächen darunter hinzu, in der Mitte fügen wir einen Tabellencontainer hinzu.

Der Standardtabellencontainer hat 3 Zeilen und 3 Spalten. Jetzt werden wir Widget hinzufügen, wobei berücksichtigt wird, dass jede Zelle in der Tabelle an das darin enthaltene Objekt angepasst wird. Um Zeilen oder Spalten hinzuzufügen oder zu entfernen, klicken wir mit der rechten Maustaste auf die Zeile und gehen dann zur Optionstabelle Zeilen oder Spalten löschen oder einfügen.
Entfernen wir die letzte Zeile und fügen wir dann in der ersten Zelle der ersten Zeile einen Vox-Container für die Labels hinzu. Dann fügen wir in der zweiten Zelle der ersten Zeile einen Vox-Container für die Eingabe- oder Textfelder hinzu.

Wir können die Eigenschaften für jedes Steuerelement definieren, um es besser zu positionieren. Im Fall von Labels muss die Eigenschaft optimiert werden Polsterung um es an das Niveau der Textboxen anzupassen, reicht ein Padding von 5px in jedem Label aus.

Wir werden die notwendigen Komponenten hinzufügen, um das Foto des Benutzers zu registrieren und anzuzeigen. Für sie in der ersten Vbox können wir mit einem Rechtsklick auf die Zelle des Telefonetiketts eine Zelle in die Vbox einfügen andere vbox.
Jetzt werden wir a . hinzufügen Etikett Foto und ein Widget Dateiauswahl Schaltfläche zum Auswählen der Datei. Auch in der dritten Zeile der Tabelle fügen wir ein Bild-Widget hinzu, das das Foto anzeigt. Wir müssen berücksichtigen, dass sich das Bild in diesem Fall im Zusammenstellungsverzeichnis der Anwendung befindet Debuggen die beim Ausführen automatisch generiert wird. Das ausgewählte Bild ist 100 Pixel hoch und 100 Pixel breit.

Fester Container
Mit festen Containern können wir Widgets an feste Positionen und mit festen Größen ziehen und ablegen. Dieser Container führt weder eine automatische Layoutverwaltung durch, noch ändert er die Größe der Widgets. Sie werden in einigen Anwendungen verwendet, bei denen Widgets benötigt werden, die später durch Code verwaltet werden, wie z. B. Spiele, spezialisierte Anwendungen, die mit Diagrammen oder Grafiken wie OpenGL oder 3D arbeiten.
Sehen wir uns ein Beispiel an, in dem wir einen festen Container und mehrere Bilder platzieren.

Wir haben ein Image Widget im Hintergrund, ein weiteres Image Widget im Hintergrund mit einem Flugzeug und ein weiteres Image Widget im Hintergrund mit einem Bild eines Golfers platziert. Jedes Bild hat eine feste Koordinate, die wir dann per Code verwalten könnten, um den Effekt von Bewegung oder Animation zu erzielen, wenn es sich um ein Spiel handelt.
Rahmen oder Rahmencontainer
Frames oder Frames wie in Visual Studio wird das Groupbox-Steuerelement verwendet, sie werden verwendet, um eine Gruppe von Widgets darin aufzunehmen. Der Zweck eines Frames besteht darin, Gruppen-Widgets nach Kategorien oder verwandten Abschnitten zu definieren, optional kann er einen Titel haben. Die Position des Titels und der Stil der Box konfigurieren Sie aus den Eigenschaften.
Die Beschriftung des Titels erscheint in der oberen linken Ecke des Rahmens. Wenn kein Titel eingegeben wird, ist er leer und der Titel wird nicht angezeigt. Der Beschriftungstext kann mit der geändert werden Label-Eigenschaft.
In einem Rahmen Sie können jeden der oben genannten Container kombinieren und umgekehrt.
Lass uns einen Bildschirm erstellen Meister / Detail, mit Rahmen. Wir werden eine erstellen C#- und Gtk-Projekt in Monodevelop und wir signieren einen Vbox-Container mit 4 Zeilen und in der ersten Zeile fügen wir a . hinzu Menüleiste,
In der zweiten Zeile fügen wir einen Rahmencontainer hinzu, der Titel des Etiketts wird Produkte sein und wir weisen ihm einen schattierten Rahmentyp IN zu.

Innerhalb des Rahmens fügen wir einen Tabellencontainer mit 4 Zeilen und 3 Spalten hinzu, um ein Dateneingabeformular zu erstellen, und in der letzten mittleren Zeile der Tabelle platzieren wir eine Hbox mit zwei Feldern für die Schaltflächen Gravieren Ja Stornieren.
In der dritten Zeile der Vbox platzieren wir eine Trennleiste mit dem Horizontal Separator-Widget und in der letzten Zeile der Vbox werden wir einen weiteren Rahmen und eine Baumansicht einfügen.

Denken Sie daran, dass wir die padding-Eigenschaft jedes Widgets berühren müssen, damit alles richtig ausgerichtet ist. Um die Treeview zu füllen, die wir tvwlista nennen, verwenden wir c#-Code in der Mainwindows-Klasse, der wie folgt aussieht:

 public MainWindow (): base (Gtk.WindowType.Toplevel) {Build (); // Ich erstelle die Spalten und Überschriften der Baumansicht // Ich erstelle die Produktspalte Gtk.TreeViewColumn Product col = new Gtk.TreeViewColumn(); colProducto.Title = "Produkt"; // Ich erstelle die Aktienspalte Gtk.TreeViewColumn colStock = new Gtk.TreeViewColumn (); colStock.Title = "Vorrat"; // Ich erstelle die Preisspalte Gtk.TreeViewColumn pricecol = new Gtk.TreeViewColumn (); colPrice.Title = "Preis"; // Ich füge die Spalten hinzu und betitele sie zur Baumansicht tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Ich erstelle ein Datenmodell zum Speichern und wo ich drei Daten vom Typ Text hinzufüge Gtk.ListStore store = new Gtk.ListStore (typeof (string), typeof (string), typeof (string)); // Ich weise das Modell dem TreeView zu tvwlista.Model = store; // Ich füge dem Modellspeicher Daten hinzu.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Wir erstellen eine Zelle, die das Produkt Gtk.CellRendererText anzeigt productCell = new Gtk.CellRendererText (); // Wir fügen die Produktdatenzelle hinzu colProduct.PackStart (productCell, true); // Lagerdatenzelle hinzufügen Gtk.CellRendererText cellStock = new Gtk.CellRendererText (); colStock.PackStart (cellStock, true); // Preisdatenzelle hinzufügen Gtk.CellRendererText PriceCell = new Gtk.CellRendererText (); pricecol.PackStart (priceCell, true); // Wir fügen jeder Spalte die Datenzellen hinzu und die Zeilen werden generiert // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "text", 1); priceCol.AddAttribute (priceCell, "text", 2); }

Als nächstes führen wir aus und das Ergebnis ist das folgende: