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 constitue une haute priorité 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 alignements facilitent l’alignement de vos contrôles, pour une apparence et un comportement clairs, professionnels (apparence et sensation).

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.

Espace et alignement des 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

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

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

  3. 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.

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

  5. Déplacez le deuxième Button contrôle jusqu’à ce qu’il soit presque de niveau avec le premier. Notez le trait d’alignement qui apparaît au niveau de la ligne de base de texte des deux boutons et notez que le contrôle que vous déplacez vers une position exactement de niveau avec l’autre contrôle.

  6. 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.

  7. Sélectionnez l’un des Button contrôles 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 vers cette position.

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

  9. 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 vers une position qui est exactement de niveau avec l’autre contrôle.

Aligner sur les marges de formulaire 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 Button contrôles et déplacez-le près de la bordure droite du formulaire jusqu’à ce qu’un alignement apparaisse. La distance de l’alignement de la bordure droite correspond à la somme de la propriété du Margin contrôle et des valeurs de propriété du Padding formulaire.

    Remarque

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

  2. 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.

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

  4. Faites glisser un contrôle GroupBox de la boîte à outils vers le formulaire.

  5. 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.

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

  7. Déplacez le Button contrôle près de la bordure droite du GroupBox contrôle jusqu’à ce qu’un 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.

  1. 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.

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

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

  4. 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 du Button contrôle contenu par le GroupBox contrôle. Les contrôles 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 planquant sa taille

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

  2. Déplacez le pointeur de la souris sur l’aire de conception du formulaire. Notez que le pointeur devient une croix à laquelle est attachée l’icône de contrôle Button . Notez également les lignes d’alignement qui semblent suggérer des positions alignées pour le Button contrôle.

  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’un alignement 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 Button contrôle 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 l’aire de conception du formulaire. Notez que le pointeur change pour indiquer la position à laquelle le nouveau Button contrôle 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 Button contrôle. Recherchez une position alignée sur 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 de la boîte à outils vers le formulaire.

  2. Redimensionnez le Button contrôle en saisissant l’une des poignées de dimensionnement d’angle et en faisant glisser. Pour plus d’informations, consultez How to : Resize Controls on Windows Forms.

  3. Faites glisser la poignée de dimensionnement jusqu’à ce que l’une Button des bordures du contrôle soit alignée sur un autre contrôle. 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.

  4. Redimensionnez le Button contrôle dans différentes directions et alignez le handle de dimensionnement sur différents contrôles. Notez comment les lignes d’alignement apparaissent dans différentes orientations pour indiquer l’alignement.

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

  1. Faites glisser un contrôle TextBox de la boîte à outils vers le 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.

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

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

  4. Déplacez le Label contrôle à gauche du TextBox contrôle, de sorte qu’il est aligné sur le bord inférieur du TextBox contrôle. Notez la ligne d’alignement qui apparaît le long des bords inférieurs des deux contrôles.

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

Utiliser des lignes d’alignement avec la navigation au clavier

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

  2. Appuyez sur Ctrl+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+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+droite. Notez que le contrôle passe du formulaire à la première position d’alignement verticale disponible.

  5. Appuyez sur Ctrl+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+ pour redimensionner le Button contrôle par incréments d’un pixel.

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

Désactiver sélectivement les lignes d’alignement

  1. Faites glisser un contrôle TableLayoutPanel de la boîte à outils vers le 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 TableLayoutPanel première cellule du contrôle.

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

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

  5. Faites glisser le Button contrôle hors du TableLayoutPanel contrôle et déplacez-le autour du TableLayoutPanel contrôle. 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 alignement n’apparaît et le contrôle ne s’aligne pas sur les positions d’alignement potentielles.

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 Le Concepteur Windows Forms.

  2. Sélectionnez le nœud Général . Dans la section Mode 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. Suggestions pour des recherches approfondies :

  • Essayez d’imbriquer un GroupBox contrôle dans un autre GroupBox contrôle. Placez un Button contrôle dans le contrôle enfant GroupBox et un autre dans le 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.

Voir aussi