✅ Conteneurs et composants Monodevelop C # et GTK

Table des matières

GTK # au moyen de conteneurs nous permet de contrôler la position des widgets dans une fenêtre pour pouvoir créer le design. Ces conteneurs qui ont des caractéristiques différentes et servent à guider la conception et le placement des composants ou du widget dans une fenêtre.
Les conteneurs principaux ils sont:

Conteneurs avec caisses horizontales ou verticales
Conteneurs avec tables
Conteneur fixe
Cadres ou conteneur de cadres

Comment utiliser les conteneurs selon les besoins ou les exigences de notre application
Conteneurs avec caisses horizontales ou verticales
Si nous sommes habitués à programmer sous Windows et sa méthodologie de conception d'interface glisser-déposer, ce type de conteneur est probablement meilleur puisque les widgets ou composants sont positionnés dans la fenêtre en utilisant des coordonnées x, et comment sous Windows et cela est apprécié.
Bien que cela soit possible avec Gtk et monodevelop, la meilleure façon d'aligner les widgets est avec les boîtes. Il existe deux types de boîtes horizontale ou HBox et verticale ou VBox. Ce type de conteneur ne dépend pas de la taille de l'écran. Les conteneurs HBox et VBox se chargent du redimensionnement automatique de la zone qu'occupe un composant.
Voyons un exemple avec des cases horizontales ou verticales. Nous allons créer un projet C# et Gtk dans Monodevelop.
Nous lui attribuons un conteneur Vbox et dans la dernière ligne nous ajoutons un conteneur Hbox.

Ensuite, nous ajouterons un bouton dans la dernière cellule de la Hbox. Dans les propriétés, nous attribuons le nom bt Accepter et dans l'étiquette le nom Accepter.

Si nous exécutons l'application à partir du Menu Exécuter> Démarrer le débogage ou avec la clé F5, nous verrons que le bouton est aligné dans la zone supérieure gauche de l'écran puisque les autres cellules sont vides donc elles ne sont pas affichées.

Pour résoudre ce problème, nous pouvons utiliser le conteneur Aligment et le placer dans les emplacements vides, afin de conserver le design de la fenêtre.

Nous exécutons à nouveau l'application à partir du menu Exécuter> Démarrer le débogage ou avec la touche F5, nous verrons que le bouton est maintenant affiché là où nous l'avons inséré et respecte la disposition de l'écran. Nous pouvons maintenant continuer à insérer d'autres widgets.

Ajoutons quelques composants comme le Calendrier dans la cellule centrale du VBox et le Barre de menu dans la cellule supérieure du Vbox, Le résultat est le suivant :

Conteneur avec Tables
Ce type de conteneur est une grille avec des lignes et des colonnes qui peuvent être utiles lorsque nous devons créer une grille où nous pouvons placer des widgets, comme un écran de saisie de données. Voyons un exemple avec une table. Nous allons créer un projet C# et Gtk dans Monodevelop, nous allons créer un formulaire de saisie de données.
Nous signons un conteneur Vbox et dans la dernière rangée, nous ajoutons un conteneur Hbox, comme dans le projet précédent, nous ajoutons une barre de menus et les boutons ci-dessous, au centre, nous ajoutons un conteneur de table.

Le conteneur de table par défaut a 3 lignes et 3 colonnes, maintenant nous allons ajouter Widget en tenant compte du fait que chaque cellule de la table est redimensionnée en fonction de l'objet qu'elle contient. Pour ajouter ou supprimer des lignes ou des colonnes, nous faisons un clic droit sur la ligne, puis nous allons dans le tableau des options supprimer ou insérer des lignes ou des colonnes.
Supprimons la dernière ligne, puis dans la première cellule de la première ligne, nous ajouterons un conteneur Vox pour les étiquettes. Ensuite, dans la deuxième cellule de la première ligne, nous ajouterons un conteneur Vox pour les zones de saisie ou de texte.

On peut définir les propriétés de chaque contrôle pour mieux le positionner, dans le cas des Labels, il faudra peaufiner la propriété Rembourrage pour l'ajuster au niveau des zones de texte, un padding de 5px dans chaque Label suffira.

Nous allons ajouter les composants nécessaires pour enregistrer et afficher la photo de l'utilisateur, pour eux dans la première Vbox, un clic droit sur la cellule de l'étiquette du téléphone nous permet d'insérer une cellule dans la vbox, nous ajouterons également une cellule à la autre vbox.
Nous allons maintenant ajouter un étiquette Photo et un widget Sélecteur de fichier Bouton pour sélectionner le fichier, Également dans la troisième ligne du tableau, nous ajouterons un widget Image qui sera celui qui affichera la photo, nous devons tenir compte du fait que l'image se trouve dans le répertoire de compilation de l'application dans ce cas Déboguer qui est généré automatiquement lors de l'exécution. L'image sélectionnée mesure 100px de haut sur 100px de large.

Conteneur fixe
Les conteneurs fixes nous permettent de faire glisser et déposer un widget dans des positions fixes et avec des tailles fixes. Ce conteneur n'effectue aucune gestion automatique de la mise en page, ni ne redimensionne les widgets. Ils sont utilisés dans certaines applications où des widgets sont nécessaires qui seront ensuite gérés par du code comme des jeux, des applications spécialisées qui fonctionnent avec des diagrammes ou des graphiques comme OpenGL ou 3D.
Voyons un exemple où nous allons mettre un conteneur fixe et plusieurs images.

Nous avons mis un widget Image en arrière-plan, un autre widget Image en arrière-plan avec un avion et un autre widget Image en arrière-plan avec une image d'un golfeur. Chaque image est dans une coordonnée fixe que nous pourrions ensuite gérer les coordonnées par code pour obtenir l'effet de mouvement ou d'animation s'il s'agissait d'un jeu.
Cadres ou conteneur de cadres
Frames ou Frames comme dans Visual Studio, le contrôle Groupbox est utilisé, ils sont utilisés pour contenir un groupe de widget à l'intérieur, le but d'un cadre est de définir un widget de groupe par catégories ou sections connexes, éventuellement il peut avoir un titre. La position du titre et le style de la boîte se configurent à partir des propriétés.
L'étiquette du titre apparaît dans le coin supérieur gauche du cadre. Si aucun titre n'est mis, il sera vide et le titre ne sera pas affiché. Le texte de l'étiquette peut être modifié à l'aide de la Propriété de l'étiquette.
En un Cadre vous pouvez combiner n'importe lequel des conteneurs ci-dessus et vice versa.
Créons un écran Maître / Détail, en utilisant des cadres. Nous allons créer un Projet C# et Gtk en Monodevelop et nous signons un conteneur Vbox avec 4 lignes et la première ligne nous ajoutons un Barre de menu,
Dans la deuxième rangée, nous ajoutons un conteneur de cadre, le titre de l'étiquette sera des produits et nous lui attribuons une bordure ombrée de type IN.

A l'intérieur du cadre, nous ajoutons un conteneur Table avec 4 lignes et 3 colonnes pour créer un formulaire de saisie de données et dans la dernière ligne centrale du tableau, nous mettons une Hbox avec deux cases pour les boutons Graver Oui Annuler.
Dans la troisième ligne de la Vbox, nous mettons une barre de séparation avec le widget Séparateur horizontal et dans la dernière ligne de la Vbox, nous mettrons un autre cadre et un Treeview.

N'oubliez pas que pour que tout soit correctement aligné, nous devons toucher la propriété padding de chaque widget. Pour remplir le Treeview que nous appellerons tvwlista nous utiliserons du code c# dans la classe Mainwindows qui sera le suivant :

 public MainWindow (): base (Gtk.WindowType.Toplevel) {Build (); // Je crée les colonnes et les en-têtes du treeview // Je crée la colonne produit Gtk.TreeViewColumn Product col = new Gtk.TreeViewColumn (); colProducto.Title = "Produit"; // Je crée la colonne stock Gtk.TreeViewColumn colStock = new Gtk.TreeViewColumn (); colStock.Titre = "Stock"; // Je crée la colonne de prix Gtk.TreeViewColumn pricecol = new Gtk.TreeViewColumn (); colPrix.Titre = "Prix"; // J'ajoute les colonnes et les intitule à l'arborescence tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Je crée un modèle de données à stocker et où j'ajoute trois données de type text Gtk.ListStore store = new Gtk.ListStore (typeof (string), typeof (string), typeof (string)); // J'affecte le modèle au TreeView tvwlista.Model = store; // J'ajoute des données au magasin de modèles.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 To", "10", "85"); // Nous créons une cellule qui affichera le produit Gtk.CellRendererText productCell = new Gtk.CellRendererText (); // Nous ajoutons la cellule de données produit colProduct.PackStart (productCell, true); // Ajout de la cellule de données de stock Gtk.CellRendererText cellStock = new Gtk.CellRendererText (); colStock.PackStart (cellStock, vrai); // Ajoutez la cellule de données de prix Gtk.CellRendererText PriceCell = new Gtk.CellRendererText (); pricecol.PackStart (priceCell, true); // Nous ajoutons les cellules de données à chaque colonne et les lignes seront générées // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "texte", 1); priceCol.AddAttribute (priceCell, "texte", 2); }

Ensuite, nous exécutons et le résultat sera le suivant :