Dans ce didacticiel de programmation C #, je vais me concentrer sur les contrôles avancés tels que les zones de liste déroulante, les grilles et les listes de vues et vous montrer la façon dont vous les utiliserez probablement. Je ne touche pas aux données et à la liaison avant un tutoriel ultérieur. Commençons par un simple contrôle, un ComboBox.
Au cœur d'un combo se trouve une collection d'éléments et la façon la plus simple de remplir cette option est de déposer un combo sur l'écran, de sélectionner les propriétés (si vous ne voyez pas les fenêtres de propriétés, cliquez sur Affichage dans le menu supérieur puis sur Fenêtre Propriétés), recherchez les éléments et cliquez sur les points de suspension bouton. Vous pouvez ensuite taper les chaînes, compiler le programme et tirer le combo vers le bas pour voir les choix.
Maintenant, arrêtez le programme et ajoutez quelques chiffres: quatre, cinq.. jusqu'à dix. Lorsque vous l'exécutez, vous ne verrez que 8 car c'est la valeur par défaut de MaxDropDownItems. N'hésitez pas à le régler sur 20 ou 3, puis exécutez-le pour voir ce qu'il fait.
C'est ennuyeux que lorsqu'il s'ouvre, il indique comboBox1 et vous pouvez le modifier. Ce n'est pas ce que nous voulons. Recherchez la propriété DropDownStyle et remplacez DropDown par DropDownList (c'est un combo!). Maintenant, il n'y a plus de texte et ce n'est pas modifiable. Vous pouvez sélectionner l'un des numéros mais il s'ouvre toujours en blanc. Comment sélectionner un numéro pour commencer? Eh bien, ce n'est pas une propriété que vous pouvez définir au moment de la conception, mais l'ajout de cette ligne le fera.
Ajoutez cette ligne dans le constructeur Form1 (). Vous devez afficher le code du formulaire (dans l'Explorateur de solutions, cliquez avec le bouton droit sur From1.cs et cliquez sur Afficher le code. Find InitializeComponent (); et ajoutez cette ligne immédiatement après cela.
Si vous définissez la propriété DropDownStyle pour le combo sur Simple et exécutez le programme, vous n'obtiendrez rien. Il ne sélectionnera ni ne cliquera ni ne répondra. Pourquoi? Parce qu'au moment de la conception, vous devez saisir la poignée extensible inférieure et rendre le contrôle plus grand.
Dans l'exemple 2, j'ai renommé le ComboBox en combo, changé le combo DropDownStyle en DropDown afin qu'il puisse être modifié et ajouté un bouton Ajouter appelé btnAdd. J'ai double-cliqué sur le bouton Ajouter pour créer un gestionnaire d'événements btnAdd_Click () et j'ai ajouté cette ligne d'événement.
Maintenant, lorsque vous exécutez le programme, tapez un nouveau numéro, dites Eleven et cliquez sur ajouter. Le gestionnaire d'événements prend le texte que vous avez tapé (en combo. Texte) et l'ajoute à la collection d'articles du combo. Cliquez sur le combo et nous avons maintenant une nouvelle entrée Eleven. Voilà comment vous ajoutez une nouvelle chaîne à un combo. Pour en supprimer un est un peu plus compliqué car il faut trouver l'index de la chaîne que l'on souhaite supprimer puis le supprimer. La méthode RemoveAt illustrée ci-dessous est une méthode de collecte pour ce faire. il vous suffit de spécifier quel élément dans le paramètre Removeindex.
supprimera la chaîne à la position RemoveIndex. S'il y a n éléments dans le combo, les valeurs valides sont comprises entre 0 et n-1. Pour 10 éléments, valeurs 0..9.
Si cela ne trouve pas le texte, il renvoie -1 sinon il retourne l'index basé sur 0 de la chaîne dans la liste combinée. Il existe également une méthode surchargée de FindStringExact qui vous permet de spécifier d'où vous commencez la recherche, de sorte que vous pouvez ignorer la première, etc. si vous avez des doublons. Cela pourrait être pratique pour supprimer les doublons dans une liste.
Cliquer sur btnAddMany_Click () efface le texte du combo puis efface le contenu de la collection d'éléments du combo puis appelle le combo. AddRange (pour ajouter les chaînes du tableau de valeurs. Après cela, il définit le SelectedIndex du combo sur 0. Cela montre le premier élément du combo. Si vous effectuez l'ajout ou la suppression d'éléments dans une zone de liste déroulante, il est préférable de garder la trace de l'élément sélectionné. La définition de SelectedIndex sur -1 masque les éléments sélectionnés.
Le bouton Ajouter des lots efface la liste et ajoute 10 000 numéros. J'ai ajouté un combo. BeginUpdate () et combo, EndUpdate () appelle autour de la boucle pour empêcher tout scintillement de Windows essayant de mettre à jour le contrôle. Sur mon PC de trois ans, il faut un peu plus d'une seconde pour ajouter 100 000 numéros dans le combo.
Il s'agit d'un contrôle pratique pour afficher des données tabulaires sans la complexité d'une grille. Vous pouvez afficher les éléments sous forme d'icônes grandes ou petites, sous forme de liste d'icônes dans une liste verticale ou plus utilement sous forme de liste d'éléments et de sous-éléments dans une grille et c'est ce que nous ferons ici.
Après avoir déposé un ListView sur un formulaire, cliquez sur la propriété des colonnes et ajoutez 4 colonnes. Ce seront TownName, X, Y et Pop. Définissez le texte de chaque ColumnHeader. Si vous ne pouvez pas voir les en-têtes sur le ListView (après avoir ajouté les 4), définissez la propriété View du ListView sur Détails. Si vous affichez le code de cet exemple, accédez à l'endroit où il est indiqué Code de concepteur de formulaires Windows et développez la région où vous voyez le code qui crée ListView. Il est utile de voir comment fonctionne le système et vous pouvez copier ce code et l'utiliser vous-même.
Vous pouvez définir manuellement la largeur de chaque colonne en déplaçant le curseur sur l'en-tête et en le faisant glisser. Ou vous pouvez le faire dans le code visible après avoir développé la région du concepteur de formulaires. Vous devriez voir un code comme celui-ci:
Pour la colonne de population, les changements dans le code sont reflétés dans le concepteur et vice versa. Notez que même si vous définissez la propriété Locked sur true, cela n'affecte que le concepteur et au moment de l'exécution, vous pouvez redimensionner les colonnes.
ListViews est également livré avec un certain nombre de propriétés dynamiques. Cliquez sur (Propriétés dynamiques) et cochez la propriété souhaitée. Lorsque vous définissez une propriété pour qu'elle soit dynamique, elle crée un fichier XML .config et l'ajoute à l'Explorateur de solutions.
Faire des changements au moment de la conception est une chose, mais nous devons vraiment le faire lorsque le programme est en cours d'exécution. Un ListView est composé de 0 ou plusieurs éléments. Chaque élément (un ListViewItem) a une propriété de texte et une collection SubItems. La première colonne affiche le texte de l'élément, la colonne suivante affiche SubItem [0] .text puis SubItem [1] .text et ainsi de suite.
J'ai ajouté un bouton pour ajouter une ligne et une zone d'édition pour le nom de la ville. Entrez un nom dans la zone et cliquez sur Ajouter une ligne. Cela ajoute une nouvelle ligne à ListView avec le nom de la ville placé dans la première colonne et les trois colonnes suivantes (SubItems [0..2]) sont remplis de nombres aléatoires (convertis en chaînes) en ajoutant ces chaînes à leur.
Définissez maintenant la propriété ListView Multiselect sur false. Nous ne voulons sélectionner qu'un seul élément à la fois, mais si vous souhaitez supprimer plus d'un seul coup, c'est similaire, sauf que vous devez parcourir en sens inverse. (Si vous bouclez dans l'ordre normal et supprimez des éléments, les éléments suivants ne sont pas synchronisés avec les index sélectionnés).
Le menu contextuel ne fonctionne pas encore car nous n'avons aucun élément de menu à afficher. Donc, faites un clic droit sur PopupMenu (sous le formulaire) et vous verrez le menu contextuel apparaître en haut du formulaire où l'éditeur de menu normal apparaît. Cliquez dessus et là où il est écrit Tapez ici, tapez Supprimer l'élément. La fenêtre des propriétés affichera un MenuItem alors renommez-le en mniRemove. Double-cliquez sur cet élément de menu et vous devriez obtenir la fonction de code du gestionnaire d'événements menuItem1_Click. Ajoutez ce code pour qu'il ressemble à ceci.
Si vous perdez de vue l'élément Supprimer, cliquez simplement sur le contrôle PopupMenu seul sous le formulaire dans le Concepteur de formulaires. Cela le ramènera à la vue.
Cependant, si vous l'exécutez et n'ajoutez pas d'élément et le sélectionnez, lorsque vous cliquez avec le bouton droit et obtenez le menu et cliquez sur Supprimer l'élément, il donnera une exception car il n'y a aucun élément sélectionné. C'est une mauvaise programmation, alors voici comment y remédier. Double-cliquez sur l'événement contextuel et ajoutez cette ligne de code.
Un DataGridView est à la fois le composant le plus complexe et le plus utile fourni gratuitement avec C #. Il fonctionne à la fois avec les sources de données (c'est-à-dire les données d'une base de données) et sans (c'est-à-dire les données que vous ajoutez par programme). Pour le reste de ce tutoriel, je vais vous montrer comment l'utiliser sans sources de données. Pour des besoins d'affichage plus simples, vous pouvez trouver un ListView simple plus approprié.
Si vous avez utilisé un ancien contrôle DataGrid, ce n'est qu'un de ceux sur les stéroïdes: il vous donne plus de types de colonnes intégrés, peut fonctionner avec données internes et externes, plus de personnalisation de l'affichage (et des événements) et donne plus de contrôle sur la gestion des cellules avec des lignes de congélation et Colonnes.
Lorsque vous concevez des formulaires avec des données de grille, il est plus courant de spécifier différents types de colonnes. Vous pouvez avoir des cases à cocher dans une colonne, du texte en lecture seule ou modifiable dans une autre, et des numéros de cours. Ces types de colonnes sont également généralement alignés différemment avec des nombres généralement alignés à droite de sorte que les points décimaux s'alignent. Au niveau de la colonne, vous pouvez choisir entre Button, checkbox, ComboBox, Image, TextBox et Links. si cela ne suffit pas, vous pouvez définir vos propres types personnalisés.
La façon la plus simple d'ajouter des colonnes est de concevoir dans l'EDI. Comme nous l'avons vu auparavant, cela n'écrit que du code pour vous et lorsque vous l'avez fait plusieurs fois, vous préférerez peut-être ajouter le code vous-même. Une fois que vous avez fait cela plusieurs fois, il vous donne un aperçu de la façon de le faire par programme.
Commençons par ajouter quelques colonnes, déposez un DataGridView sur le formulaire et cliquez sur la petite flèche dans le coin supérieur droit. Cliquez ensuite sur Ajouter une colonne. Faites cela trois fois. Il fera apparaître une boîte de dialogue Ajouter une colonne dans laquelle vous définissez le nom de la colonne, le texte à afficher en haut de la colonne et vous permet de choisir son type. La première colonne est YourName et c'est le TextBox par défaut (dataGridViewTextBoxColumn). Définissez également le texte d'en-tête sur votre nom. Faites la deuxième colonne Age et utilisez un ComboBox. La troisième colonne est autorisée et est une colonne CheckBox.
Après avoir ajouté les trois, vous devriez voir une ligne de trois colonnes avec un combo au milieu (Âge) et une case à cocher dans la colonne Autorisé. Si vous cliquez sur DataGridView, dans l'inspecteur des propriétés, vous devez localiser les colonnes et cliquer sur (collection). Cela ouvre une boîte de dialogue dans laquelle vous pouvez définir des propriétés pour chaque colonne telles que les couleurs de cellule individuelles, le texte de l'info-bulle, la largeur, la largeur minimale, etc. Si vous compilez et exécutez, vous remarquerez que vous pouvez modifier la largeur des colonnes et l'exécution. Dans l'inspecteur des propriétés du DataGridView principal, vous pouvez définir AllowUser pour resizeColumns sur false pour éviter cela.
Nous allons ajouter des lignes au contrôle DataGridView dans le code et ex3.cs dans le fichier d'exemples a ce code. En commençant par ajouter une zone TextEdit, un ComboBox et un bouton au formulaire avec DataGridView dessus. Définissez la propriété DataGridView AllowUserto AddRows sur false. J'utilise également des étiquettes et j'ai appelé la combobox cbAges, le bouton btnAddRow et la TextBox tbName. J'ai également ajouté un bouton de fermeture pour le formulaire et j'ai double-cliqué dessus pour générer un squelette de gestionnaire d'événements btnClose_Click. L'ajout du mot Close () fait que cela fonctionne.
Par défaut, la propriété d'activation du bouton Ajouter une ligne est définie sur false au démarrage. Nous ne voulons ajouter aucune ligne au DataGridView à moins qu'il n'y ait du texte dans la zone Name TextEdit et le ComboBox. J'ai créé la méthode CheckAddButton, puis généré un gestionnaire d'événements Leave pour la zone d'édition Name Text en double-cliquant à côté du mot Leave dans les propriétés lors de l'affichage des événements. La boîte de propriétés le montre dans l'image ci-dessus. Par défaut, la zone Propriétés affiche les propriétés mais vous pouvez voir les gestionnaires d'événements en cliquant sur le bouton éclair.
Vous auriez pu utiliser à la place l'événement TextChanged, bien que cela appellera CheckAddButton () méthode pour chaque pression de touche plutôt que lorsque le contrôle est abandonné, c'est-à-dire lorsqu'un autre contrôle gagne concentrer. Dans le combo des âges, j'ai utilisé l'événement TextChanged mais j'ai sélectionné le gestionnaire d'événements tbName_Leave au lieu de double-cliquer pour créer un nouveau gestionnaire d'événements.
Tous les événements ne sont pas compatibles car certains événements fournissent des paramètres supplémentaires, mais si vous pouvez voir un gestionnaire précédemment généré, alors oui, vous pouvez l'utiliser. C'est surtout une question de préférence, vous pouvez avoir un gestionnaire d'événements distinct pour chaque contrôle que vous êtes utiliser ou partager des gestionnaires d'événements (comme je l'ai fait) lorsqu'ils ont une signature d'événement commune, c'est-à-dire que les paramètres sont les même.
J'ai renommé le composant DataGridView en dGView par souci de concision et j'ai double-cliqué sur AddRow pour générer un squelette de gestionnaire d'événements. Ce code ci-dessous ajoute une nouvelle ligne vide, obtient cet index de lignes (c'est RowCount-1 car il vient d'être ajouté et RowCount est 0 basé), puis accède à cette ligne via son index et définit les valeurs dans les cellules de cette ligne pour les colonnes YourName et Âge.
Lors de la conception d'un formulaire, vous devez penser en termes de conteneurs et de contrôles et quels groupes de contrôles doivent être maintenus ensemble. Dans les cultures occidentales de toute façon, les gens lisent du haut à gauche au bas à droite afin de faciliter la lecture de cette façon.
Un conteneur est l'un des contrôles pouvant contenir d'autres contrôles. Ceux qui se trouvent dans la boîte à outils comprennent le panneau, FlowLayoutpanel, SplitContainer, TabControl et TableLayoutPanel. Si vous ne voyez pas la boîte à outils, utilisez le menu Affichage et vous le trouverez. Les conteneurs maintiennent les contrôles ensemble et si vous déplacez ou redimensionnez le conteneur, cela affectera le positionnement des contrôles. Déplacez simplement les contrôles sur le conteneur dans le Concepteur de fiches et il reconnaîtra que le conteneur est désormais en charge.
Un Panel est similaire à un GroupBox mais un GroupBox ne peut pas défiler mais peut afficher une légende et a une bordure par défaut. Les panneaux peuvent avoir des bordures mais pas par défaut. J'utilise les GroupBox parce qu'elles sont plus belles et c'est important parce que:
Les panneaux sont également utiles pour regrouper des conteneurs, vous pouvez donc avoir deux ou plusieurs GroupBox sur un panneau.
Voici un conseil pour travailler avec des conteneurs. Déposez un conteneur fractionné sur un formulaire. Cliquez sur le panneau gauche puis sur le panneau droit. Maintenant, essayez de supprimer le SplitContainer du formulaire. C'est difficile jusqu'à ce que vous cliquiez avec le bouton droit sur l'un des panneaux, puis cliquiez sur Select SplitContainer1. Une fois que tout est sélectionné, vous pouvez le supprimer. Une autre façon qui s'applique à tous les contrôles et conteneurs est appuyez sur la touche Échap pour sélectionner le parent.
Les conteneurs peuvent également s'emboîter les uns dans les autres. Faites simplement glisser un petit par-dessus un plus grand et vous verrez une fine ligne verticale apparaître brièvement pour montrer que l'un est maintenant à l'intérieur de l'autre. Lorsque vous faites glisser le conteneur parent, l'enfant est déplacé avec lui. L'exemple 5 le montre. Par défaut, le panneau marron clair n'est pas à l'intérieur du conteneur, donc lorsque vous cliquez sur le bouton de déplacement, le GroupBox est déplacé, mais pas le panneau. Faites maintenant glisser le panneau sur le GroupBox pour qu'il soit complètement à l'intérieur du Groupbox. Lorsque vous compilez et exécutez cette fois, cliquez sur le bouton Déplacer pour déplacer les deux ensemble.
Un TableLayoutpanel est un conteneur intéressant. C'est une structure de tableau organisée comme une grille 2D de cellules où chaque cellule contient un seul contrôle. Vous ne pouvez pas avoir plus d'un contrôle dans une cellule. Vous pouvez spécifier comment le tableau se développe lorsque plus de contrôles sont ajoutés ou même s'il ne se développe pas. Il semble modélisé sur un tableau HTML car les cellules peuvent s'étendre sur des colonnes ou des lignes. Même le comportement d'ancrage des contrôles enfants dans le conteneur dépend des paramètres de marge et de remplissage. Nous en verrons plus sur les ancres à la page suivante.
Dans l'exemple Ex6.cs, j'ai commencé avec une table à deux colonnes de base et spécifié via la boîte de dialogue Styles de contrôle et de ligne (sélectionnez le contrôle et cliquez sur le petit triangle pointant vers la droite situé en haut à droite pour voir une liste de tâches et cliquez sur la dernière) que la colonne de gauche est de 40% et la colonne de droite de 60% de la largeur. Il vous permet de spécifier la largeur des colonnes en termes de pixels absolus, en pourcentage ou vous pouvez simplement le laisser AutoSize. Un moyen plus rapide d'accéder à cette boîte de dialogue consiste simplement à cliquer sur la collection à côté de Colonnes dans la fenêtre Propriétés.
J'ai ajouté un bouton AddRow et laissé la propriété GrowStyle avec sa valeur AddRows par défaut. Lorsque la table est pleine, elle ajoute une autre ligne. Vous pouvez également définir ses valeurs sur AddColumns et FixedSize afin qu'il ne puisse plus grandir. Dans Ex6, lorsque vous cliquez sur le bouton Ajouter des contrôles, il appelle la méthode AddLabel () trois fois et AddCheckBox () une fois. Chaque méthode crée une instance du contrôle, puis appelle tblPanel. Contrôles. Ajouter () Une fois le deuxième contrôle ajouté, le troisième contrôle entraîne l'agrandissement du tableau. L'image le montre après avoir cliqué une fois sur le bouton Ajouter un contrôle.
Dans le cas où vous vous demandez d'où viennent les valeurs par défaut dans les méthodes AddCheckbox () et AddLabel () que j'appelle, le contrôle était initialement ajouté manuellement à la table dans le concepteur, puis le code pour le créer et l'initialiser a été copié à partir de ce Région. Vous trouverez le code d'initialisation dans l'appel de méthode InitializeComponent une fois que vous cliquez sur le + à gauche de la région ci-dessous:
Vous pouvez sélectionner plusieurs commandes en même temps en maintenant la touche Maj enfoncée lorsque vous sélectionnez la deuxième commande et les commandes suivantes, même des commandes de types différents. La fenêtre Propriétés affiche uniquement les propriétés communes aux deux, vous pouvez donc les définir toutes avec la même taille, la même couleur et les mêmes champs de texte, etc. Même les mêmes gestionnaires d'événements peuvent être affectés à plusieurs contrôles.
Selon l'utilisation, certains formulaires finiront souvent par être redimensionnés par l'utilisateur. Rien de pire que de redimensionner un formulaire et de voir les contrôles rester dans la même position. Tous les contrôles ont des ancrages qui vous permettent de les «attacher» aux 4 bords de sorte que le contrôle se déplace ou s'étire lorsqu'un bord attaché est déplacé. Cela conduit au comportement suivant lorsqu'un formulaire est étiré à partir du bord droit:
Pour les boutons comme Fermer qui sont traditionnellement en bas à droite, le comportement 3 est ce qui est nécessaire. ListViews et DataGridViews sont les meilleurs avec 2 si le nombre de colonnes est suffisant pour déborder le formulaire et doit défiler). Les ancres Haut et Gauche sont celles par défaut. La fenêtre des propriétés comprend un petit éditeur astucieux qui ressemble au drapeau de l'Angleterre. Cliquez simplement sur l'une des barres (deux horizontales et deux verticales) pour définir ou supprimer l'ancrage approprié, comme indiqué dans l'image ci-dessus.
Une propriété qui ne reçoit pas beaucoup de mention est la propriété Tag et pourtant elle peut être incroyablement utile. Dans la fenêtre Propriétés, vous ne pouvez affecter que du texte, mais dans votre code, vous pouvez avoir n'importe quelle valeur qui descend de l'objet.
J'ai utilisé Tag pour contenir un objet entier tout en affichant seulement quelques-unes de ses propriétés dans un ListView. Par exemple, vous souhaiterez peut-être uniquement afficher un nom et un numéro de client dans une liste récapitulative client. Mais faites un clic droit sur le client sélectionné, puis ouvrez un formulaire avec tous les détails du client. Cela est facile si vous créez la liste des clients en lisant tous les détails du client en mémoire et en attribuant une référence à l'objet de classe client dans la balise. Tous les contrôles ont un tag.
Un TabControl est un moyen pratique d'économiser l'espace de formulaire en ayant plusieurs onglets. Chaque onglet peut avoir une icône ou du texte et vous pouvez sélectionner n'importe quel onglet et afficher ses commandes. Le TabControl est un conteneur mais il ne contient que des TabPages. Chaque TabPage est également un conteneur auquel peuvent s'ajouter des contrôles normaux.
Dans l'exemple x7.cs, j'ai créé un panneau de page à deux onglets avec le premier onglet appelé Contrôles ayant trois boutons et une case à cocher dessus. La deuxième page à onglet est intitulée Journaux et sert à afficher toutes les actions consignées, notamment en cliquant sur un bouton ou en activant une case à cocher. Une méthode appelée Log () est appelée pour enregistrer chaque clic de bouton, etc. Il ajoute la chaîne fournie à un ListBox.
J'ai également ajouté deux éléments de menus contextuels à clic droit au TabControl de la manière habituelle. Ajoutez d'abord un ContextMenuStrip au formulaire et définissez-le dans la propriété ContextStripMenu du TabControl. Les deux choix de menu sont Ajouter une nouvelle page et Supprimer cette page. Cependant, j'ai limité la suppression de la page afin que seules les pages à onglet nouvellement ajoutées puissent être supprimées et non les deux originales.
C'est facile, créez simplement une nouvelle page d'onglet, donnez-lui une légende de texte pour l'onglet puis ajoutez-la à la collection TabPages des onglets TabControl
La suppression d'une page consiste simplement à appeler des TabPages. RemoveAt (), à l'aide des onglets. SelectedIndex pour obtenir l'onglet actuellement sélectionné.
Dans ce didacticiel, nous avons vu comment certains des contrôles les plus sophistiqués fonctionnent et comment les utiliser. Dans le prochain tutoriel, je vais continuer avec le thème GUI et regarder le thread de travail en arrière-plan et montrer comment l'utiliser.