Procédure pas à pas : disposition des contrôles Windows Forms avec les propriétés Padding, Margins et AutoSize

Article
08/21/2007

Le positionnement précis des contrôles sur votre formulaire est une haute priorité pour beaucoup d'applications. Le Concepteur Windows Forms vous donne beaucoup d'outils de disposition et de mise en page pour accomplir cette opération. Trois des plus importants sont les propriétés suivantes : Margin, Padding et AutoSize, qui sont présentes sur tous les contrôles Windows Forms.

La propriété Margin définit l'espace autour du contrôle que garde d'autres contrôles à 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 que garde 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 sur un contrôle.

Remplissage et marge pour les contrôles Windows Forms

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

Cette procédure pas à pas illustre les tâches suivantes :

Création d'un projet Windows Forms
Définition des marges de vos contrôles
Définition du remplissage de vos contrôles
Dimensionnement automatique de vos contrôles

Lorsque vous aurez terminé, vous aurez assimilé le fonctionnement du rôle joué par ces importantes fonctionnalités de disposition.

Notes

Selon vos paramètres actifs ou votre édition, les boîtes de dialogue et les commandes de menu que vous voyez peuvent différer de celles qui sont décrites dans l'aide. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Paramètres Visual Studio.

Composants requis

Pour exécuter cette procédure pas à pas, vous devrez :

Avoir des autorisations suffisantes pour être en mesure de créer et d'exécuter des projets d'application Windows Forms sur l'ordinateur où Visual Studio est installé.

Création du projet

La première étape consiste à créer le projet et configurer le formulaire.

Pour créer le projet

Créez un projet d'application Windows appelé LayoutExample. Pour plus d'informations, consultez Comment : créer un projet d'application Windows.
Sélectionnez le formulaire dans le Concepteur Windows Forms.

Définition des marges de vos 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 et le positionnez à proximité d'un autre contrôle, vous voyez une ligne d'alignement (snapline) qui affiche les marges des deux contrôles. Le contrôle que vous déplacez s'alignera également sur la distance définie par les marges.

Pour réorganiser les contrôles de votre formulaire à l'aide de la propriété Margin

Faites glisser deux contrôles Button de la Boîte à outils vers votre formulaire.
Sélectionnez l'un des contrôles Button et déplacez-le à proximité de l'autre, jusqu'à ce qu'ils se touchent presque.

Observez la ligne d'alignement (snapline) qui apparaît entre eux. Cette distance est la somme des valeurs des deux contrôles Margin. Le contrôle vous déplacez s'aligne sur cette distance. Pour plus d'informations, consultez Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide des lignes d'alignement (SnapLines).
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 attribuant à la propriété All la valeur 20.
Sélectionnez l'un des contrôles Button et déplacez-le près de l'autre.

La ligne d'alignement (Snapline) qui définit la somme des valeurs de marge est plus longue et le contrôle s'aligne sur une distance supérieure par rapport à l'autre contrôle.
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 attribuant à la propriété Top la valeur 5.
Déplacez le contrôle sélectionné au-dessous de l'autre contrôle et notez que la ligne d'alignement (snapline) est plus courte. Déplacez le contrôle sélectionné à gauche de l'autre contrôle et notez que la ligne d'ajustement (SnapLine) conserve la valeur observée à l'étape 4.
Vous pouvez affecter à chacun des aspects de la propriété Margin, Left, Top, Right, Bottom, des valeurs différentes, ou vous pouvez les affecter tous la même valeur avec la propriété All.

Définition du remplissage de vos contrôles

Pour réaliser la disposition précise requise pour votre application, vos contrôles contiendront souvent des contrôles enfants. Lorsque vous souhaitez spécifier la proximité de la bordure du contrôle enfant à la bordure du contrôle parent, utilisez la propriété Padding du contrôle parent conjointement à 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é Text d'un contrôle Button) à ses bordures.

Pour réorganiser des contrôles sur votre formulaire à l'aide du remplissage

Faites glisser un contrôle Button de la Boîte à outils vers votre formulaire.
Affectez à la propriété AutoSize du contrôle Button la valeur true.
Modifiez la propriété Padding en développant l'entrée Padding dans la fenêtre Propriétés et en attribuant à la propriété All la valeur 5.

Le contrôle se développe pour laisser de la place au nouveau remplissage.
Faites glisser un contrôle GroupBox de la Boîte à outils vers votre formulaire. Faites glisser un contrôle Button de la Boîte à outils jusqu'au contrôle GroupBox. Positionnez le contrôle Button afin qu'il soit affleurant avec le coin inférieur droit du contrôle GroupBox.

Observez les lignes d'alignement (snaplines) qui apparaissent lorsque le contrôle Button s'approche des bordures droite et inférieure du contrôle GroupBox. Ces lignes d'alignement (snaplines) correspondent à la propriété Margin du Button.
Modifiez la propriété Padding du contrôle GroupBox en développant l'entrée Padding dans la fenêtre Propriétés et en attribuant à la propriété All la valeur 20.
Sélectionnez le contrôle Button dans le contrôle GroupBox et déplacez-le vers le centre du GroupBox.

Les lignes d'alignement (snaplines) apparaissent à une distance supérieure des bordures du contrôle GroupBox. Cette distance est la somme de la propriété Margin du contrôle Button et de la propriété Padding du contrôle GroupBox.

Dimensionnement automatique de vos contrôles

Dans certaines applications, la taille d'un contrôle ne sera pas la même au moment de l'exécution qu'au moment du design. Le texte d'un contrôle Button, par exemple, peut être pris dans une base de données et sa longueur ne sera pas connue d'avance.

Lorsque la propriété AutoSize a la valeur true, le contrôle ajuste sa taille à son contenu. Pour plus d'informations, consultez Vue d'ensemble de la propriété AutoSize.

Pour réorganiser les contrôles de votre formulaire à l'aide de la propriété AutoSize

Faites glisser un contrôle Button de la Boîte à outils vers votre formulaire.
Affectez à la propriété AutoSize du contrôle Button la valeur true.
Modifiez la propriété Text du contrôle Button en lui attribuant la valeur « Ce bouton a une longue chaîne pour sa propriété Text. »

Lorsque vous validez la modification, le contrôle Button se redimensionne pour contenir le nouveau texte.
Faites glisser un autre contrôle Button de la Boîte à outils vers votre formulaire.
Modifiez la propriété Text du contrôle Button en lui attribuant la valeur « 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.
Modifiez la propriété Padding en développant l'entrée Padding dans la fenêtre Propriétés et en attribuant à la propriété All la valeur 5.

Le texte à l'intérieur du contrôle est découpé sur les quatre côtés.
Affectez à la propriété AutoSize du contrôle Button la valeur true.

Le contrôle Button se redimensionne pour contenir la chaîne entière. Du remplissage a également été ajouté autour du texte, amenant ainsi le contrôle Button à se développer dans les quatre directions.
Faites glisser un contrôle Button de la Boîte à outils vers votre formulaire. Positionnez-le à proximité du coin inférieur droit du formulaire.
Affectez à la propriété AutoSize du contrôle Button la valeur true.
Affectez à la propriété Anchor du contrôle Button les valeurs Right, Bottom.
Modifiez la propriété Text du contrôle Button en lui attribuant la valeur « 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 contraire du paramètre de sa propriété Anchor.

Propriétés AutoSize et AutoSizeMode

Certains contrôles prennent en charge la propriété AutoSizeMode, qui vous permet un contrôle plus fin sur le comportement de dimensionnement automatique d'un contrôle.

Pour utiliser la propriété AutoSizeMode

Faites glisser un contrôle Panel de la Boîte à outils vers votre formulaire.
Affectez à la propriété AutoSize du contrôle Panel la valeur true.
Faites glisser un contrôle Button de la Boîte à outils jusqu'au contrôle Panel.
Placez le contrôle Button près du coin inférieur droit du contrôle Panel.
Sélectionnez le contrôle Panel et saisissez la poignée de redimensionnement inférieure droite. Redimensionnez le contrôle Panel pour qu'il soit plus grand et plus petit.

Notes

Vous pouvez redimensionner librement le contrôle Panel, mais vous ne pouvez pas le rendre plus petit que la position du coin inférieur droit du contrôle Button. Ce comportement est spécifié par la valeur par défaut de la propriété AutoSizeMode, qui est GrowOnly.
Affectez à la propriété AutoSizeMode du contrôle Panel la valeur GrowAndShrink.

Le contrôle Panel se redimensionne autour du contrôle Button. Vous ne pouvez pas redimensionner le contrôle Panel.
Faites glisser le contrôle Button vers l'angle supérieur gauche du contrôle Panel.

Le contrôle Panel se redimensionne selon la nouvelle position du contrôle Button.

Étapes suivantes

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

Générez un formulaire à l'aide d'un contrôle TableLayoutPanel. Pour plus d'informations, consultez Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide d'un TableLayoutPanel. Essayez de modifier les valeurs de la propriété Padding du contrôle TableLayoutPanel, ainsi que la propriété Margin sur ses contrôles enfants.
Effectuez la même expérience à l'aide d'un contrôle FlowLayoutPanel. Pour plus d'informations, consultez Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide d'un FlowLayoutPanel.
Essayez d'ancrer des contrôles enfants dans un contrôle Panel. La propriété Padding est une réalisation plus générale de la propriété DockPadding, et vous pouvez vous vérifier que c'est le cas en mettant un contrôle enfant dans un contrôle Panel et en attribuant à la propriété Dock du contrôle enfant la valeur Fill. Attribuez à la propriété Padding du contrôle Panel différentes valeurs et notez l'effet obtenu.

Voir aussi

Partager via