Partager via

Procédure pas à pas : organiser des contrôles sur Windows Forms à l’aide de lignes d’alignement

  • Article

Le positionnement précis des contrôles sur votre formulaire est une priorité élevée pour de nombreuses applications. Le Concepteur Windows Forms vous offre de nombreux outils de disposition pour y parvenir. L’une des fonctionnalités les plus importantes est la fonctionnalité SnapLine.

Les lignes d’alignement vous montrent précisément où aligner les contrôles avec d’autres contrôles. Ils vous montrent également les distances recommandées pour les marges entre les contrôles, comme spécifié par les instructions de l’interface utilisateur Windows.

Les lignes d'accrochage facilitent l’alignement de vos contrôles, pour une présentation claire et professionnelle (esthétique).

Créer le projet

  1. Dans Visual Studio, créez un projet d’application Windows appelé « SnaplineExample ».

  2. Sélectionnez le formulaire dans le Concepteur de formulaires.

Espacez et alignez les contrôles

Les « Snaplines » vous offrent un moyen précis et intuitif d'aligner les contrôles sur votre formulaire. Ils s’affichent lorsque vous déplacez un contrôle ou des contrôles sélectionnés près d’une position qui s’aligne sur un autre contrôle ou un autre ensemble de contrôles. Votre sélection s’alignera sur la position suggérée lorsque vous la déplacez au-delà des autres contrôles.

Pour organiser des contrôles à l’aide de lignes d’alignement

  1. Faites glisser un contrôle Button depuis la boîte à outils sur votre formulaire.

  2. Déplacez le contrôle Button dans le coin inférieur droit du formulaire. Notez les lignes d’alignement qui apparaissent alors que le contrôle Button approche du bas et du côté droit du formulaire. Ces lignes d’alignement affichent la distance recommandée entre les bordures du contrôle et le formulaire.

  3. Déplacez le contrôle Button autour des bordures du formulaire et notez où les lignes d’alignement apparaissent. Lorsque vous avez terminé, déplacez le contrôle Button près du centre du formulaire.

  4. Faites glisser un autre contrôle Button à partir de la boîte à outils sur votre formulaire.

  5. Déplacez le deuxième contrôle Button jusqu’à ce qu’il soit presque de niveau avec le premier. Notez la ligne d'accrochage qui apparaît sur la ligne de base du texte des deux boutons, et remarquez que le contrôle que vous déplacez s'aligne exactement avec l'autre contrôle.

  6. Déplacez le deuxième contrôle Button jusqu’à ce qu’il soit positionné directement au-dessus du premier. Notez les lignes d’alignement qui apparaissent le long des bords gauche et droit des deux boutons, et notez que le contrôle que vous déplacez s’aligne sur une position qui est exactement alignée avec l’autre contrôle.

  7. Sélectionnez l’un des contrôles Button et déplacez-le près de l’autre jusqu’à ce qu’ils soient presque tactiles. Notez la ligne de repère qui apparaît entre eux. Cette distance est la distance recommandée entre les bordures des contrôles. Notez également que le contrôle que vous déplacez s'aligne automatiquement à cette position.

  8. Faites glisser deux contrôles Panel de la boîte à outils sur votre formulaire.

  9. Déplacez l’un des contrôles Panel jusqu’à ce qu’il soit presque de niveau avec le premier. Notez les lignes d’alignement qui apparaissent le long des bords supérieur et inférieur des deux contrôles, et remarquez que le contrôle que vous déplacez s'aligne exactement avec l’autre contrôle.

Aligner sur les marges de forme et de conteneur

Les lignes d’alignement vous aident à aligner vos contrôles sur les marges de formulaire et de conteneur de manière cohérente.

  1. Sélectionnez l’un des contrôles Button et déplacez-le près de la bordure droite du formulaire jusqu’à ce qu’un alignement apparaisse. La distance de la ligne d'accrochage par rapport à la bordure droite est la somme de la propriété Margin du contrôle et de la propriété Padding du formulaire.

    Note

    Si la propriété Padding du formulaire est définie sur 0,0,0,0, le Concepteur Windows Forms assigne au formulaire une valeur Padding ombrée de 9,9,9,9. Pour remplacer ce comportement, affectez une valeur autre que 0,0,0,0,0.

  2. Modifiez la valeur de la propriété Margin du contrôle Button en développant l’entrée de Margin dans la fenêtre Propriétés et en définissant la propriété All sur 0. Pour plus d’informations, consultez Procédure pas à pas : Disposition des contrôles Windows Forms avec espacement intérieur, marges et propriété AutoSize.

  3. Déplacez le contrôle Button près de la bordure droite du formulaire jusqu'à ce qu'une ligne d'alignement apparaisse. Cette distance est maintenant donnée par la valeur de la propriété Padding du formulaire.

  4. Faites glisser un contrôle GroupBox depuis la boîte à outils dans votre formulaire.

  5. Modifiez la valeur de la propriété Padding du contrôle GroupBox en développant l’entrée Padding dans la fenêtre Propriétés et en définissant la propriété All sur 10.

  6. Faites glisser un contrôle Button de la boîte à outils dans le contrôle GroupBox.

  7. Déplacez le contrôle Button près de la bordure droite du contrôle GroupBox jusqu’à ce qu’une ligne de guidage apparaisse. Déplacez le contrôle Button dans le contrôle GroupBox et notez où les lignes d’alignement (snaplines) apparaissent.

Aligner sur les contrôles groupés

Vous pouvez utiliser des lignes d’alignement pour positionner des contrôles groupés ainsi que des contrôles à l'intérieur d’un contrôle GroupBox.

  1. Sélectionnez deux des contrôles de votre formulaire. Déplacez la sélection autour et notez les lignes d’alignement qui apparaissent entre votre sélection et les autres contrôles.

  2. Déplacez un contrôle GroupBox depuis la boîte à outils vers votre formulaire.

  3. Faites glisser un contrôle Button de la boîte à outils dans le contrôle GroupBox.

  4. Sélectionnez l’un des contrôles Button et déplacez-le autour du contrôle GroupBox. Notez les lignes de repérage qui apparaissent aux bords du contrôle GroupBox. Notez également les lignes d’alignement qui se trouvent sur les bords du contrôle Button contenu par le contrôle GroupBox. Les contrôles qui sont des enfants d’un contrôle conteneur prennent également en charge les lignes d’alignement.

Utiliser des lignes d'alignement pour placer un contrôle en définissant sa taille.

  1. Dans la boîte à outils , cliquez sur l’icône de contrôle Button. Ne le faites pas glisser sur le formulaire.

  2. Déplacez le pointeur de la souris sur la zone de conception du formulaire. Notez que le pointeur passe à un croisement avec l’icône de contrôle Button attachée. Notez également les lignes d’alignement qui semblent suggérer des positions alignées pour le contrôle Button.

  3. Cliquez et maintenez le bouton de la souris enfoncé.

  4. Faites glisser le pointeur de la souris autour du formulaire. Notez qu’un plan est dessiné, indiquant la position et la taille du contrôle.

  5. Faites glisser le pointeur jusqu’à ce qu’il s’aligne avec un autre contrôle sur le formulaire. Notez qu'une ligne d'accrochage apparaît pour indiquer l'alignement.

  6. Relâchez le bouton de la souris. Le contrôle est créé à la position et à la taille indiquées par le plan.

Utiliser des lignes d’alignement lors du glissement d’un contrôle à partir de la boîte à outils

  1. Faites glisser un contrôle Button à partir de la boîte à outils sur votre formulaire, mais ne relâchez pas le bouton de la souris.

  2. Déplacez le pointeur de la souris sur la zone de conception du formulaire. Notez que le pointeur change pour indiquer la position à laquelle le nouveau contrôle Button sera créé.

  3. Faites glisser le pointeur de la souris autour du formulaire. Notez les lignes d’alignement qui semblent suggérer des positions alignées pour le contrôle Button. Recherchez une position qui est alignée avec d'autres contrôles.

  4. Relâchez le bouton de la souris. Le contrôle est créé à la position indiquée par les lignes d’alignement.

Redimensionner un contrôle à l’aide de lignes d’alignement

  1. Faites glisser un contrôle Button à partir de la boîte à outils sur votre formulaire.

  2. Redimensionnez le contrôle Button en saisissant l’une des poignées de dimensionnement d’angle et en faisant glisser. Pour plus d'informations, consultez Comment : Redimensionner les contrôles sur les formulaires Windows.

  3. Faites glisser la poignée de dimensionnement jusqu’à ce que l’une des bordures du contrôle Button soit alignée sur un autre contrôle. Notez qu’une ligne de guidage s’affiche. Notez également que la poignée de dimensionnement s’aligne sur la position indiquée par le trait d’alignement.

  4. Redimensionnez le contrôle Button dans différentes directions et alignez la poignée de dimensionnement sur différents contrôles. Notez comment les lignes de repère apparaissent dans différentes orientations pour indiquer l’alignement.

Aligner une étiquette sur le texte d’un contrôle

  1. Faites glisser le contrôle TextBox depuis la boîte à outils sur votre formulaire. Lorsque vous déposez le contrôle TextBox sur le formulaire, cliquez sur le glyphe de balise intelligente et sélectionnez l’option Définir le texte sur textBox1. Pour plus d’informations, consultez procédure pas à pas : effectuer des tâches courantes à l’aide d’actions de concepteur.

  2. Faites glisser un contrôle Label de la boîte à outils vers votre formulaire.

  3. Remplacez la valeur de la propriété AutoSize du contrôle Label par true. Notez que les bordures du contrôle sont ajustées pour s’adapter au texte d’affichage.

  4. Déplacez le contrôle Label à gauche du contrôle TextBox. Il est donc aligné sur le bord inférieur du contrôle TextBox. Notez la ligne d'alignement qui apparaît le long des bords inférieurs des deux commandes.

  5. Déplacez le contrôle Label légèrement vers le haut, jusqu’à ce que le texte Label et le texte TextBox soient alignés. Notez la ligne d'accrochage au style différent qui s’affiche, indiquant quand les champs de texte des deux contrôles sont alignés.

Utiliser des lignes de guidage avec la navigation au clavier

  1. Faites glisser un contrôle Button à partir de la boîte à outils sur votre formulaire. Placez-la dans le coin supérieur gauche du formulaire.

  2. Appuyez sur Ctrl+flèche vers le bas. Notez que le contrôle déplace le formulaire vers la première position d’alignement horizontale disponible.

  3. Appuyez sur Ctrl+flèche vers le bas jusqu’à ce que le contrôle atteigne le bas du formulaire. Notez les positions qu’il occupe quand il se déplace vers le bas du formulaire.

  4. Appuyez sur Ctrl+flèche droite. Notez que le contrôle se déplace sur le formulaire vers la première position d’alignement verticale disponible.

  5. Appuyez sur Ctrl+flèche droite jusqu’à ce que le contrôle atteigne le côté du formulaire. Notez les positions qu’il occupe au fur et à mesure qu’il se déplace sur le formulaire.

  6. Déplacez le contrôle autour du formulaire avec une combinaison de touches de direction. Notez les positions occupées par le contrôle et les lignes d’alignement qui les accompagnent.

  7. Appuyez sur Maj+touches de direction pour redimensionner le contrôle Button par incréments d’un pixel.

  8. Appuyez sur Ctrl+Maj+touches de direction pour redimensionner le contrôle Button par incréments d’alignement.

Désactiver sélectivement les lignes d’alignement

  1. Faites glisser un contrôle TableLayoutPanel de la boîte à outils sur votre formulaire.

  2. Double-cliquez sur l’icône de contrôle Button dans la boîte à outils . Notez qu’un nouveau contrôle de bouton apparaît dans la première cellule du contrôle TableLayoutPanel.

  3. Double-cliquez sur l’icône de contrôle Button dans la boîte à outils deux fois plus. Cela laisse une cellule vide dans le contrôle TableLayoutPanel.

  4. Faites glisser un contrôle Button de la boîte à outils dans la cellule vide du contrôle TableLayoutPanel. Notez qu’aucune ligne directrice n’apparaît.

  5. Faites glisser le contrôle Button hors du contrôle TableLayoutPanel et déplacez-le autour du contrôle TableLayoutPanel. Notez que les lignes d’alignement apparaissent à nouveau.

Désactiver les lignes de repère

Appuyez sur la touche Alt et déplacez un contrôle dans le formulaire.

Aucune ligne d'accrochage n’apparaît et le contrôle ne s'accroche à aucune position d’alignement potentielle.

Pour désactiver les lignes d’alignement dans l’environnement de conception

  1. Dans le menu Outils, ouvrez la boîte de dialogue Options . Sélectionnez Concepteur Windows Forms.

  2. Sélectionnez le nœud Général. Dans la section Mode de disposition, remplacez la sélection de SnapLines par SnapToGrid.

  3. Sélectionnez OK pour appliquer le paramètre.

  4. Sélectionnez un contrôle sur votre formulaire et déplacez-le autour des autres contrôles. Notez que les lignes d’alignement n’apparaissent pas.

Étapes suivantes

Les lignes d’alignement offrent un moyen intuitif d’aligner les contrôles sur votre formulaire. Les suggestions d’exploration supplémentaires sont les suivantes :

  • Essayez d’imbriquer un contrôle GroupBox dans un autre contrôle GroupBox. Placez un contrôle Button dans le contrôle GroupBox enfant et un autre dans le contrôle GroupBox parent. Déplacez les contrôles Button pour voir comment les lignes d’alignement franchissent les limites des conteneurs.

  • Créez une colonne de contrôles TextBox et une colonne correspondante de contrôles Label. Définissez la valeur de la propriété AutoSize des contrôles Label à true. Utilisez des lignes d’alignement pour déplacer les contrôles Label afin que leur texte affiché soit aligné sur le texte des contrôles TextBox.

Voir aussi