Procédure pas à pas : disposition des contrôles avec le remplissage, les marges et la propriété AutoSizeWalkthrough: Lay out controls with padding, margins, and the AutoSize property

Le positionnement précis des contrôles sur votre formulaire constitue une haute priorité pour de nombreuses applications.Precise placement of controls on your form is a high priority for many applications. La Concepteur Windows Forms dans Visual Studio vous donne de nombreux outils de mise en page pour y parvenir.The Windows Forms Designer in Visual Studio gives you many layout tools to accomplish this. Trois des plus importantes sont les propriétés Margin, Paddinget AutoSize, qui sont présentes sur tous les contrôles Windows Forms.Three of the most important are the Margin, Padding, and AutoSize properties, which are present on all Windows Forms controls.

La propriété Margin définit l'espace autour du contrôle qui maintient les autres contrôles à une distance spécifiée des bordures du contrôle.The Margin property defines the space around the control that keeps other controls a specified distance from the control's borders.

La propriété Padding définit l'espace à l'intérieur d'un contrôle qui maintient le contenu du contrôle (par exemple la valeur de sa propriété Text) à une distance spécifiée des bordures du contrôle.The Padding property defines the space in the interior of a control that keeps the control's content (for example, the value of its Text property) a specified distance from the control's borders.

L'illustration suivante montre les propriétés Padding et Margin d'un contrôle.The following illustration shows the Padding and Margin properties on a control.

Remplissage et marge pour les contrôles Windows Forms

La propriété AutoSize indique à un contrôle de se redimensionner automatiquement à son contenu.The AutoSize property tells a control to automatically size itself to its contents. Il ne se redimensionne pas pour être plus petit que la valeur de sa propriété Size d’origine, et il prend en compte la valeur de sa propriété Padding.It will not resize itself to be smaller than the value of its original Size property, and it will account for the value of its Padding property.

Composants requisPrerequisites

Pour effectuer cette procédure pas à pas, vous avez besoin de Visual Studio.You'll need Visual Studio to complete this walkthrough.

Créer le projetCreate the project

  1. Dans Visual Studio, créez un projet d' application Windows appelé LayoutExample.In Visual Studio, create a Windows Application project called LayoutExample.

  2. Sélectionnez le formulaire dans la Concepteur Windows Forms.Select the form in the Windows Forms Designer.

Définir des marges pour les contrôlesSet margins for controls

Vous pouvez définir la distance par défaut entre vos contrôles à l’aide de la propriété Margin.You can set the default distance between your controls using the Margin property. Lorsque vous déplacez un contrôle suffisamment près d’un autre contrôle, une ligne d’alignement (SnapLine) s’affiche pour afficher les marges des deux contrôles.When you move a control close enough to another control, you will see a snapline that shows the margins for the two controls. Le contrôle que vous déplacez est également aligné sur la distance définie par les marges.The control you are moving will also snap to the distance defined by the margins.

Organiser des contrôles sur votre formulaire à l’aide de la propriété MarginArrange controls on your form using the Margin property

  1. Faites glisser deux contrôles Button de la boîte à outils vers votre formulaire.Drag two Button controls from the Toolbox onto your form.

  2. Sélectionnez l’un des contrôles Button et déplacez-le à proximité de l’autre, jusqu’à ce qu’ils soient presque en contact.Select one of the Button controls and move it close to the other, until they are almost touching.

    Observez la ligne d’alignement (SnapLine) qui apparaît entre eux.Observe the snapline that appears between them. Cette distance est la somme des valeurs Margin des deux contrôles.This distance is the sum of the two controls' Margin values. Le contrôle que vous déplacez s’aligne à cette distance.The control you are moving snaps to this distance. Pour plus d’informations, consultez procédure pas à pas : Organisation des contrôles sur Windows Forms à l’aide des lignes d’alignement.For details, see Walkthrough: Arranging Controls on Windows Forms Using 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 affectant à la propriété All la valeur 20.Change the Margin property of one of the controls by expanding the Margin entry in the Properties window and setting the All property to 20.

  4. Sélectionnez l’un des contrôles Button et déplacez-le à proximité de l’autre.Select one of the Button controls and move it close to the other.

    La ligne d’alignement (SnapLine) définissant la somme des valeurs de marge est plus longue et le contrôle s’aligne sur une distance supérieure de l’autre contrôle.The snapline defining the sum of the margin values is longer and that the control snaps to a greater distance from the other control.

  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 affectant à la propriété Top la valeur 5.Change the Margin property of the selected control by expanding the Margin entry in the Properties window and setting the Top property to 5.

  6. Déplacez le contrôle sélectionné sous l’autre contrôle et observez que la ligne d’alignement (SnapLine) est plus petite.Move the selected control below the other control and observe that the snapline is shorter. Déplacez le contrôle sélectionné à gauche de l’autre contrôle et observez que la ligne d’alignement (SnapLine) conserve la valeur observée à l’étape 4.Move the selected control to the left of the other control and observe that the snapline retains the value observed in step 4.

  7. Vous pouvez définir chacun des aspects de la propriété Margin, Left, Top, Right, Bottom, sur différentes valeurs, ou vous pouvez les affecter à la même valeur que la propriété All.You can set each of the aspects of the Margin property, Left, Top, Right, Bottom, to different values, or you can set them all to the same value with the All property.

Définir le remplissage des contrôlesSet padding for controls

Pour obtenir la disposition précise requise pour votre application, vos contrôles contiennent souvent des contrôles enfants.To achieve the precise layout required for your application, your controls will often contain child controls. 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 avec la propriété Margin du contrôle enfant.When you want to specify the proximity of the child control's border to the parent control's border, use the parent control's Padding property in conjunction with the child control's Margin property. 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.The Padding property is also used to control the proximity of a control's content (for example, a Button control's Text property) to its borders.

Organiser des contrôles sur votre formulaire à l’aide du remplissageArrange controls on your form using padding

  1. Faites glisser un contrôle Button de la boîte à outils vers le formulaire.Drag a Button control from the Toolbox onto your form.

  2. Remplacez la valeur de la propriété AutoSize du contrôle Button par true.Change the value of the Button control's AutoSize property to true.

  3. Modifiez la propriété Padding en développant l’entrée Padding dans la fenêtre Propriétés et en affectant la valeur 5à la propriété All.Change the Padding property by expanding the Padding entry in the Properties window and setting the All property to 5.

    Le contrôle se développe pour fournir de l’espace pour le nouveau remplissage.The control expands to provide room for the new padding.

  4. Faites glisser un contrôle GroupBox de la boîte à outils vers le formulaire.Drag a GroupBox control from the Toolbox onto your form. Faites glisser un contrôle Button de la boîte à outils vers le contrôle GroupBox.Drag a Button control from the Toolbox into the GroupBox control. Placez le contrôle Button pour qu’il soit vidé avec l’angle inférieur droit du contrôle GroupBox.Position the Button control so it is flush with the lower-right corner of the GroupBox control.

    Observez les lignes d’alignement qui apparaissent lorsque le contrôle Button approche des bordures inférieure et droite du contrôle GroupBox.Observe the snaplines that appear as the Button control approaches the bottom and right borders of the GroupBox control. Ces lignes d’alignement correspondent à la propriété Margin du Button.These snaplines correspond to the Margin property of the Button.

  5. 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 affectant à la propriété All la valeur 20.Change the GroupBox control's Padding property by expanding the Padding entry in the Properties window and setting the All property to 20.

  6. Sélectionnez le contrôle Button dans le contrôle GroupBox et déplacez-le vers le centre de la GroupBox.Select the Button control within the GroupBox control and move it toward the center of the GroupBox.

    Les lignes d’alignement apparaissent à une distance supérieure des bordures du contrôle GroupBox.The snaplines appear at a greater distance from the borders of the GroupBox control. Cette distance est la somme de la propriété Margin du contrôle Button et de la propriété Padding du contrôle GroupBox.This distance is the sum of the Button control's Margin property and the GroupBox control's Padding property.

Dimensionner automatiquement les contrôlesSize controls automatically

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.In some applications, the size of a control will not be the same at run time as it was at design time. Le texte d’un contrôle de Button, par exemple, peut être extrait d’une base de données, et sa longueur n’est pas connue à l’avance.The text of a Button control, for example, may be taken from a database, and its length are not known in advance.

Lorsque la propriété AutoSize est définie sur true, le contrôle se redimensionne en son contenu.When the AutoSize property is set to true, the control will size itself to its content. Pour plus d’informations, consultez vue d’ensemble de la propriété AutoSize.For more information, see AutoSize Property Overview.

Organiser des contrôles sur votre formulaire à l’aide de la propriété AutoSizeArrange controls on your form using the AutoSize property

  1. Faites glisser un contrôle Button de la boîte à outils vers le formulaire.Drag a Button control from the Toolbox onto your form.

  2. Remplacez la valeur de la propriété AutoSize du contrôle Button par true.Change the value of the Button control's AutoSize property to true.

  3. Remplacez la valeur de la propriété Text du contrôle Button par ce bouton par une chaîne longue pour sa propriété Text.Change the Button control's Text property to This button has a long string for its Text property.

    Lorsque vous validez la modification, le contrôle Button se redimensionne pour s’adapter au nouveau texte.When you commit the change, the Button control resizes itself to fit the new text.

  4. Faites glisser un autre contrôle Button de la boîte à outils vers votre formulaire.Drag another Button control from the Toolbox onto your form.

  5. Affectez à la propriété Text du contrôle Button la valeur "ce bouton a une longue chaîne pour sa propriété Text. "Change the Button control's Text property to "This button has a long string for its Text property."

    Lorsque vous validez la modification, le contrôle Button ne se redimensionne pas et le texte est coupé par le bord droit du contrôle.When you commit the change, the Button control does not resize itself, and the text is clipped by the right edge of the control.

  6. Modifiez la propriété Padding en développant l’entrée Padding dans la fenêtre Propriétés et en affectant la valeur 5à la propriété All.Change the Padding property by expanding the Padding entry in the Properties window and setting the All property to 5.

    Le texte de l’intérieur du contrôle est coupé sur les quatre côtés.The text in the control's interior is clipped on all four sides.

  7. Affectez à la propriété AutoSize du contrôle Button la valeur true.Change the Button control's AutoSize property to true.

    Le contrôle Button se redimensionne pour englober la chaîne entière.The Button control resizes itself to encompass the entire string. En outre, le remplissage a été ajouté autour du texte, provoquant le développement du contrôle Button dans les quatre directions.Also, padding has been added around the text, causing the Button control to expand in all four directions.

  8. Faites glisser un contrôle Button de la boîte à outils vers le formulaire.Drag a Button control from the Toolbox onto your form. Placez-le près de l’angle inférieur droit du formulaire.Position it near the lower-right corner of the form.

  9. Remplacez la valeur de la propriété AutoSize du contrôle Button par true.Change the value of the Button control's AutoSize property to true.

  10. Affectez à la propriété Anchor du contrôle Button la valeur Right, Bottom.Set the Button control's Anchor property to Right, Bottom.

  11. Affectez à la propriété Text du contrôle Button la valeur "ce bouton a une longue chaîne pour sa propriété Text. "Change the Button control's Text property to "This button has a long string for its Text property."

Lorsque vous validez la modification, le contrôle Button se redimensionne vers la gauche.When you commit the change, the Button control resizes itself toward the left. 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.In general, automatic sizing will increase the size of a control in the direction opposite its Anchor property setting.

Propriétés AutoSize et AutoSizeModeAutoSize and AutoSizeMode properties

Certains contrôles prennent en charge la propriété AutoSizeMode, qui vous donne un contrôle plus précis du comportement de dimensionnement automatique d’un contrôle.Some controls support the AutoSizeMode property, which gives you more fine-grained control over the automatic sizing behavior of a control.

Utiliser la propriété AutoSizeModeUse the AutoSizeMode property

  1. Faites glisser un contrôle Panel de la boîte à outils vers le formulaire.Drag a Panel control from the Toolbox onto your form.

  2. Affectez la valeur trueà la propriété AutoSize du contrôle Panel.Set the value of the Panel control's AutoSize property to true.

  3. Faites glisser un contrôle Button de la boîte à outils vers le contrôle Panel.Drag a Button control from the Toolbox into the Panel control.

  4. Placez le contrôle Button près du coin inférieur droit du contrôle Panel.Place the Button control near the lower-right corner of the Panel control.

  5. Sélectionnez le contrôle Panel et saisissez la poignée de redimensionnement inférieure droite.Select the Panel control and grab the lower-right sizing handle. Redimensionnez le contrôle Panel pour qu’il soit plus grand et plus petit.Resize the Panel control to be larger and smaller.

    Notes

    Vous pouvez redimensionner librement le contrôle Panel, mais vous ne pouvez pas le dimensionner plus petit que la position du coin inférieur droit du contrôle Button.You can freely resize the Panel control, but you cannot size it smaller than the position of the Button control's lower-right corner. Ce comportement est spécifié par la valeur par défaut de la propriété AutoSizeMode, qui est GrowOnly.This behavior is specified by the default value of the AutoSizeMode property, which is GrowOnly.

  6. Définissez la valeur de la propriété AutoSizeMode du contrôle Panel sur GrowAndShrink.Set the value of the Panel control's AutoSizeMode property to GrowAndShrink.

    Le contrôle Panel se dimensionne lui-même pour entourer le contrôle Button.The Panel control sizes itself to surround the Button control. Vous ne pouvez pas redimensionner le contrôle de Panel.You cannot resize the Panel control.

  7. Faites glisser le contrôle Button vers le coin supérieur gauche du contrôle Panel.Drag the Button control toward the upper-left corner of the Panel control.

    Le contrôle Panel est redimensionné en fonction de la nouvelle position du contrôle Button.The Panel control resizes to the Button control's new position.

Étapes suivantes :Next steps

Il existe de nombreuses autres fonctionnalités de disposition pour organiser les contrôles dans vos applications Windows Forms.There are many other layout features for arranging controls in your Windows Forms applications. Voici quelques combinaisons que vous pouvez essayer :Here are some combinations you might try:

Voir aussiSee also