Partager via

Procédure pas à pas : disposer des contrôles avec le remplissage, les marges et la propriété AutoSize

Le positionnement précis des contrôles sur votre formulaire est une priorité élevée pour de nombreuses applications. Le concepteur Windows Forms dans Visual Studio vous offre de nombreux outils de disposition pour y parvenir. Trois des propriétés les plus importantes sont les propriétés Margin, Paddinget AutoSize, qui sont présentes sur tous les contrôles Windows Forms.

La propriété Margin définit l’espace autour du contrôle, veillant à ce que les autres contrôles soient maintenus à une distance spécifiée des bordures du contrôle.

La propriété Padding définit l’espace à l’intérieur d’un contrôle qui conserve le contenu du contrôle (par exemple, la valeur de sa propriété Text) une distance spécifiée des bordures du contrôle.

L'illustration suivante montre les propriétés Padding et Margin d'un contrôle.

Remplissage et marge pour les contrôles Windows Forms

La propriété AutoSize indique à un contrôle de se dimensionner automatiquement en fonction de son contenu. Il ne se redimensionnera pas pour être plus petit que la valeur de sa propriété Size d'origine, et il tiendra compte de la valeur de sa propriété Padding.

Conditions préalables

Vous aurez besoin de Visual Studio pour effectuer cette procédure pas à pas.

Créer le projet

  1. Dans Visual Studio, créez un projet application Windows appelé LayoutExample.

  2. Sélectionnez le formulaire dans le Concepteur Windows Forms.

Définir des marges pour les contrôles

Vous pouvez définir la distance par défaut entre vos contrôles à l’aide de la propriété Margin. Lorsque vous déplacez un contrôle assez proche d’un autre contrôle, vous verrez une ligne d’alignement qui affiche les marges des deux contrôles. Le contrôle que vous déplacez s’aligne également sur la distance définie par les marges.

Organisez les éléments de contrôle de votre formulaire à l’aide de la propriété Margin

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

  2. Sélectionnez l’un des contrôles Button et déplacez-le près de l’autre jusqu’à ce qu’ils soient presque tactiles.

    Observez la ligne d’alignement qui apparaît entre elles. Cette distance correspond à la somme des valeurs Margin des deux contrôles. Le contrôle que vous déplacez s'aligne sur cette distance. Pour plus d’informations, consultez Procédure pas à pas : disposition des contrôles sur Windows Forms à l'aide de Snaplines.

  3. Modifiez la propriété Margin de l’un des contrôles en développant l’entrée Margin dans la fenêtre Propriétés et en définissant la propriété All sur 20.

  4. Sélectionnez l’un des contrôles Button et déplacez-le près de l’autre.

    La ligne d’alignement définissant la somme des valeurs de marge est plus longue et le contrôle s’aligne à une distance plus grande de l’autre contrôle.

  5. Modifiez la propriété Margin du contrôle sélectionné en développant l’entrée Margin dans la fenêtre Propriétés et en définissant la propriété Top sur 5.

  6. Déplacez le contrôle sélectionné en dessous de l’autre contrôle et observez que la ligne d’alignement est plus courte. Déplacez le contrôle sélectionné à gauche de l’autre contrôle et observez que la ligne d’alignement conserve la valeur observée à l’étape 4.

  7. Vous pouvez définir chacun des aspects de la propriété Margin, Left, Top, Right, Bottom, sur des valeurs différentes, ou vous pouvez les définir sur la même valeur avec la propriété All.

Définissez le remplissage pour les contrôles

Pour obtenir la disposition précise requise pour votre application, vos contrôles contiennent souvent des contrôles enfants. Lorsque vous souhaitez spécifier la proximité de la bordure du contrôle enfant par rapport à celle du contrôle parent, utilisez la propriété Padding du contrôle parent en conjonction avec la propriété Margin du contrôle enfant. La propriété Padding est également utilisée pour contrôler la proximité du contenu d’un contrôle (par exemple, la propriété Button d’un contrôle Text) par rapport à ses bordures.

Organisez les contrôles sur votre formulaire à l'aide du remplissage

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

  2. Modifiez la valeur de la propriété Button du contrôle AutoSize en true.

  3. Modifiez la propriété Padding en développant l’entrée de Padding dans la fenêtre Propriétés et en définissant la propriété All sur 5.

    Le contrôle s’étend pour fournir de la place pour le nouveau remplissage.

  4. 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. Placez le contrôle Button de manière à ce qu’il soit aligné avec le coin inférieur droit du contrôle GroupBox.

    Observez les lignes d’alignement qui apparaissent lorsque le contrôle Button se rapproche des bords inférieur et droit du contrôle GroupBox. Ces lignes d’alignement correspondent à la propriété Margin du Button.

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

  6. Sélectionnez le contrôle Button dans le contrôle GroupBox et déplacez-le vers le centre de la GroupBox.

    Les lignes d’alignement apparaissent à une plus grande distance des bords du contrôle GroupBox. Cette distance correspond à la somme de la propriété Button du contrôle Margin et de la propriété GroupBox du contrôle Padding.

Contrôles de taille automatiquement

Dans certaines applications, la taille d’un contrôle ne sera pas la même au moment de l’exécution qu’au moment de la conception. Le texte d’un contrôle Button, par exemple, peut être extrait d’une base de données et sa longueur n’est pas connue à l’avance.

Lorsque la propriété AutoSize est définie sur true, le contrôle se dimensionne sur son contenu. Pour plus d’informations, consultez Vue d’ensemble de la propriété AutoSize.

Positionner des contrôles sur votre formulaire à l’aide de la propriété AutoSize

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

  2. Modifiez la valeur de la propriété Button du contrôle AutoSize en true.

  3. Modifiez la propriété Button du contrôle Text en . Ce bouton a une longue chaîne pour sa propriété Text.

    Lorsque vous validez la modification, le contrôle Button se redimensionne pour s’adapter au nouveau texte.

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

  5. Remplacez la propriété Button du contrôle Text par «Ce bouton a une longue chaîne pour sa propriété Text."

    Lorsque vous validez la modification, le contrôle Button ne se redimensionne pas et le texte est découpé par le bord droit du contrôle.

  6. Modifiez la propriété Padding en développant l’entrée de Padding dans la fenêtre Propriétés et en définissant la propriété All sur 5.

    Le texte à l’intérieur du contrôle est découpé sur les quatre côtés.

  7. Modifiez la propriété Button du contrôle AutoSize sur true.

    Le contrôle Button se redimensionne pour englober toute la chaîne. En outre, un espace a été ajouté autour du texte, provoquant l'extension du contrôle Button dans les quatre directions.

  8. Faites glisser un contrôle Button depuis la boîte à outils sur votre formulaire. Positionnez-la près du coin inférieur droit du formulaire.

  9. Modifiez la valeur de la propriété Button du contrôle AutoSize en true.

  10. Définissez la propriété Button du contrôle Anchor sur Right, Bottom.

  11. Remplacez la propriété Button du contrôle Text par «Ce bouton a une longue chaîne pour sa propriété Text."

Lorsque vous validez la modification, le contrôle Button se redimensionne vers la gauche. En général, le dimensionnement automatique augmente la taille d’un contrôle dans la direction opposée à son paramètre de propriété Anchor.

Propriétés AutoSize et AutoSizeMode

Certains contrôles prennent en charge la propriété AutoSizeMode, ce qui vous donne un contrôle plus précis sur le comportement de dimensionnement automatique d’un contrôle.

Utilisez la propriété AutoSizeMode

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

  2. Définissez la valeur de la propriété Panel du contrôle AutoSize sur true.

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

  4. Placez le contrôle Button près du coin inférieur droit du contrôle Panel.

  5. Sélectionnez le contrôle Panel et saisissez la poignée de redimensionnement inférieure droite. Ajustez la taille du contrôle Panel pour l'agrandir ou le réduire.

    Remarque

    Vous pouvez redimensionner librement le contrôle Panel, mais vous ne pouvez pas le dimensionner plus petit que la position du contrôle Button en bas à droite. Ce comportement est spécifié par la valeur par défaut de la propriété AutoSizeMode, qui est GrowOnly.

  6. Définissez la valeur de la propriété Panel du contrôle AutoSizeMode sur GrowAndShrink.

    Le contrôle Panel se dimensionne pour entourer le contrôle Button. Vous ne pouvez pas redimensionner le contrôle Panel.

  7. Faites glisser le contrôle Button vers le coin supérieur gauche du contrôle Panel.

    Le contrôle Panel est redimensionné à la nouvelle position du contrôle Button.

Étapes suivantes

Il existe de nombreuses autres fonctionnalités de disposition pour organiser des contrôles dans vos applications Windows Forms. Voici quelques combinaisons que vous pouvez essayer :

Voir aussi

  • Last updated on