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

2025-05-07

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 SnapLine fonctionnalité.

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 relatives à l’interface utilisateur Windows.

Les repères d'alignement facilitent le positionnement de vos contrôles, pour une apparence et une expérience utilisateur claires et professionnelles.

Créer le projet

Dans Visual Studio, créez un projet d’application Windows appelé « SnaplineExample ».
Sélectionnez le formulaire dans le Concepteur de formulaires.

Espacer et aligner les contrôles

Les lignes d’alignement 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

Faites glisser un contrôle Button depuis la boîte à outils sur votre formulaire.
Déplacez le Button contrôle dans le coin inférieur droit du formulaire. Notez les lignes d’alignement qui apparaissent lorsque le Button contrôle approche les bordures inférieure et droite de la fenêtre. Ces lignes d’alignement affichent la distance recommandée entre les bordures du contrôle et le formulaire.
Déplacez le Button contrôle autour des bordures du formulaire et notez où les lignes d’alignement s’affichent. Lorsque vous avez terminé, déplacez le Button contrôle près du centre du formulaire.
Faites glisser un autre contrôle Button à partir de la boîte à outils sur votre formulaire.
Déplacez le deuxième Button contrôle jusqu’à ce qu’il soit presque de niveau avec le premier. Notez la ligne de guidage qui apparaît à la ligne de base du texte des deux boutons, et notez que le contrôle que vous déplacez s'aligne exactement avec l’autre contrôle.
Déplacez le deuxième Button contrôle 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.
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 d’alignement qui apparaît entre elles. 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 sur cette position.
Faites glisser deux contrôles Panel de la boîte à outils sur votre formulaire.
Déplacez l’un des Panel contrôles 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 notez que le contrôle que vous déplacez se déplace vers une position qui s'aligne exactement avec l’autre contrôle.

Aligner sur les marges de la forme et du conteneur

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

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

Remarque

Si la propriété du Padding formulaire est définie sur 0,0,0,0, le Concepteur Windows Forms donne au formulaire une valeur ombrée Padding de 9,9,9,9. Pour remplacer ce comportement, affectez une valeur autre que 0,0,0,0,0.
Modifiez la valeur de la Button propriété du Margin contrôle en développant l’entrée Margin dans la fenêtre Propriétés et en définissant la All propriété sur 0. Pour plus d’informations, consultez Procédure pas à pas : disposition des contrôles Windows Forms avec remplissage, marges et propriété AutoSize.
Déplacez le Button contrôle près de la bordure droite du formulaire jusqu'à ce qu'une ligne d'accrochage apparaisse. Cette distance est maintenant donnée par la valeur de la propriété du Padding formulaire.
Faites glisser un contrôle GroupBox depuis la boîte à outils sur votre formulaire.
Modifiez la valeur de la GroupBox propriété du Padding contrôle en développant l’entrée Padding dans la fenêtre Propriétés et en définissant la All propriété sur 10.
Faites glisser un contrôle Button de la boîte à outils dans le contrôle GroupBox.
Déplacez le Button élément de contrôle près de la bordure droite du GroupBox élément de contrôle jusqu’à ce qu’une ligne d'alignement apparaisse. Déplacez le Button contrôle dans le GroupBox contrôle et notez où les lignes d’alignement apparaissent.

Aligner sur les contrôles groupés

Vous pouvez utiliser des lignes d’alignement pour aligner des contrôles groupés ainsi que des contrôles au sein d’un GroupBox contrôle.

Sélectionnez deux des contrôles de votre formulaire. Déplacez la sélection et notez les lignes d’alignement qui apparaissent entre votre sélection et les autres contrôles.
Faites glisser un contrôle GroupBox depuis la boîte à outils sur votre formulaire.
Faites glisser un contrôle Button de la boîte à outils dans le contrôle GroupBox.
Sélectionnez l’un des Button contrôles et déplacez-le autour du GroupBox contrôle. Notez les lignes d’alignement qui apparaissent aux bords du GroupBox contrôle. Notez également les lignes d’alignement qui apparaissent aux bords de l'élément de contrôle Button inclus dans l'élément de contrôle GroupBox. Les contrôles enfants d’un contrôle conteneur prennent également en charge les lignes d’alignement.

Utilisez des lignes de repérage pour placer un élément de commande en définissant sa taille.

Dans la boîte à outils, cliquez sur l'icône du Button contrôle. Ne le faites pas glisser sur le formulaire.
Déplacez le pointeur de la souris sur la surface de conception du formulaire. Notez que le pointeur passe à un réticule 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.
Cliquez et maintenez le bouton de la souris enfoncé.
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.
Faites glisser le pointeur jusqu’à ce qu’il s’aligne avec un autre contrôle sur le formulaire. Notez qu'une ligne d'ajustement apparaît pour indiquer l'alignement.
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

Faites glisser un Button contrôle de la boîte à outils sur votre formulaire, sans relâcher le bouton de la souris.
Déplacez le pointeur de la souris sur la surface de conception du formulaire. Notez que le pointeur change pour indiquer la position à laquelle le nouveau Button contrôle sera créé.
Faites glisser le pointeur de la souris autour du formulaire. Notez les lignes d'alignement qui apparaissent pour suggérer des positions alignées pour le contrôleur Button. Trouvez une position alignée avec d'autres contrôles.
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

Faites glisser un contrôle Button depuis la boîte à outils sur votre formulaire.
Redimensionnez l’élément de contrôle Button en saisissant l’une des poignées de redimensionnement situées aux angles et en faisant glisser. Pour plus d’informations, consultez How to : Resize Controls on Windows Forms.
Faites glisser la poignée de dimensionnement jusqu'à ce qu'un côté du contrôleur Button soit aligné avec un autre contrôleur. Notez qu’une ligne d’alignement s’affiche. Notez également que la poignée de dimensionnement s’aligne sur la position indiquée par le trait d’alignement.
Redimensionnez le contrôle Button dans différentes directions et alignez la poignée de taille sur différents contrôles. Notez comment les lignes de repérage apparaissent dans différentes orientations pour indiquer l’alignement.

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

Faites glisser un contrôle TextBox depuis la boîte à outils sur votre formulaire. Lorsque vous déposez le TextBox contrôle sur le formulaire, cliquez sur le glyphe de balise active 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 du concepteur.
Faites glisser un contrôle Label depuis la boîte à outils sur votre formulaire.
Remplacez la valeur de la propriété Label du contrôle AutoSize par true. Notez que les bordures du contrôle sont ajustées pour s’adapter au texte d’affichage.
Déplacez le contrôleur Label à gauche du contrôleur TextBox, de sorte qu'il soit aligné sur le bord inférieur du contrôleur TextBox. Notez la ligne d’alignement qui apparaît le long des bords inférieurs des deux commandes.
Déplacez le contrôle légèrement vers le haut, jusqu'à ce que le texte Label et le texte Label 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.

Faites glisser un contrôle Button depuis la boîte à outils sur votre formulaire. Placez-la dans le coin supérieur gauche du formulaire.
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.
Appuyez sur Ctrl+ et la 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.
Appuyez sur Ctrl+flèche droite. Notez que le contrôle se déplace dans le formulaire vers la première position d’alignement vertical disponible.
Appuyez sur Ctrl+flèche droite jusqu’à ce que le contrôle atteigne le bord du formulaire. Notez les positions qu’il occupe au fur et à mesure qu’il se déplace sur le formulaire.
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.
Appuyez sur Maj+et les touches fléchées pour redimensionner le contrôle par incréments d’un pixel.
Appuyez sur Ctrl+Maj+et sur les touches fléchées pour redimensionner le Button contrôle par incréments de ligne d’alignement.

Désactiver sélectivement les lignes d’alignement

Faites glisser un contrôle TableLayoutPanel depuis la boîte à outils sur votre formulaire.
Double-cliquez sur l’icône Button de contrôle dans la boîte à outils. Notez qu’un nouveau bouton de contrôle apparaît dans la TableLayoutPanel première cellule du contrôle.
Double-cliquez de nouveau deux fois sur l’icône de Button contrôle dans la boîte à outils. Cela laisse une cellule vide dans le contrôle TableLayoutPanel.
Faites glisser un Button contrôleur depuis la boîte à outils dans la cellule vide du TableLayoutPanel contrôleur. Notez qu’aucune ligne de cadrage n’apparaît.
Faites glisser l'élément Button hors de l'élément TableLayoutPanel et déplacez-le autour de l'élément TableLayoutPanel. Notez que les lignes d’alignement apparaissent à nouveau.

Désactiver les lignes d’alignement

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

Aucun repère de guidage n’apparaît et le contrôle ne s’aligne sur aucune position d’alignement potentielle.

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

Dans le menu Outils , ouvrez la boîte de dialogue Options . Sélectionnez Windows Forms Designer.
Sélectionnez le nœud Général . Dans la section Mode de disposition, modifiez la sélection de SnapLines à SnapToGrid.
Sélectionnez OK pour appliquer le paramètre.
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 éléments de contrôle sur votre formulaire. Suggestions pour des recherches approfondies :

Essayez d’imbriquer un GroupBox contrôle dans un autre GroupBox contrôle. Placez un Button contrôle à l'intérieur du contrôle enfant GroupBox et un autre à l'intérieur du contrôle parent GroupBox. Déplacez les Button contrôles pour voir comment les lignes d’alignement franchissent les limites des conteneurs.
Créez une colonne de TextBox contrôles et une colonne correspondante de Label contrôles. Définissez la valeur de la Label propriété des AutoSize contrôles sur true. Utilisez des lignes d’alignement pour déplacer les Label contrôles afin que leur texte affiché soit aligné sur le texte des TextBox contrôles.