Procédure pas à pas : disposition des contrôles Windows Forms avec le remplissage, les marges et la propriété AutoSizeWalkthrough: Laying Out Windows Forms 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. Le Windows Forms Designer dans Visual Studio vous propose de nombreux outils de disposition pour effectuer cette opération.The Windows Forms Designer in Visual Studio gives you many layout tools to accomplish this. Trois des plus importants sont la Margin, Padding, et AutoSize propriétés, 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 Windows Forms contrôlesPadding And Margin for Windows Forms Controls

Le AutoSize propriété indique à un contrôle d’ajuster automatiquement sa taille à son contenu.The AutoSize property tells a control to automatically size itself to its contents. Il ne se redimensionnera pas pour être plus petite que la valeur de son état d’origine Size propriété et il représentera la valeur de son Padding propriété.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.

Cette procédure pas à pas décrit notamment les tâches suivantes :Tasks illustrated in this walkthrough include:

  • Création d’un projet Windows FormsCreating a Windows Forms project

  • Définition des marges de vos contrôlesSetting Margins for Your Controls

  • Définition du remplissage de vos contrôlesSetting Padding for Your Controls

  • Dimensionnement automatique de vos contrôlesAutomatically Sizing Your Controls

À l’issue de cette procédure, vous comprendrez le rôle joué par ces fonctionnalités de disposition importantes.When you are finished, you will have an understanding of the role played by these important layout features.

PrérequisPrerequisites

Vous aurez besoin de Visual Studio pour effectuer cette procédure pas à pas.You'll need Visual Studio to complete this walkthrough.

Créer le projetCreate the project

  1. Dans Visual Studio, créez un Windows Application projet appelé LayoutExample.In Visual Studio, create a Windows Application project called LayoutExample. Pour plus d'informations, voir Procédure : Créer un projet d’application Windows Forms .For more information, see How to: Create a Windows Forms application project .

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

Définition des marges de vos contrôlesSetting Margins for Your Controls

Vous pouvez définir la distance par défaut entre vos contrôles à l’aide de la Margin propriété.You can set the default distance between your controls using the Margin property. Lorsque vous déplacez un contrôle suffisamment proches d’un autre contrôle, vous voyez une ligne d’alignement qui affiche les marges pour les 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 s’aligne également à la distance définie par les marges.The control you are moving will also snap to the distance defined by the margins.

Ré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 Button des contrôles de la boîte à outils vers votre formulaire.Drag two Button controls from the Toolbox onto your form.

  2. Sélectionnez une de la Button contrôle et déplacez-le proche de l’autre, jusqu'à ce qu’ils se touchent presque.Select one of the Button controls and move it close to the other, until they are almost touching.

    Observez la ligne d’alignement qui apparaît entre eux.Observe the snapline that appears between them. Cette distance est la somme des deux contrôles Margin valeurs.This distance is the sum of the two controls' Margin values. Le contrôle que vous déplacez s’aligne sur cette distance.The control you are moving snaps to this distance. Pour plus d’informations, consultez procédure pas à pas : Organisation des contrôles dans les Windows Forms à l’aide des lignes d’alignement.For details, see Walkthrough: Arranging Controls on Windows Forms Using Snaplines.

  3. Modification la Margin propriété de l’un des contrôles en développant le Margin entrée dans le propriétés fenêtre et en définissant le All propriété à 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 une de la Button contrôle et déplacez-le proche de l’autre.Select one of the Button controls and move it close to the other.

    La ligne d’alignement définissant la somme des valeurs de marge est plus longue et que le contrôle s’aligne sur une distance supérieure à partir 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. Modification la Margin propriété du contrôle sélectionné en développant le Margin entrée dans le propriétés fenêtre et en définissant le Top propriété à 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éplacer le contrôle sélectionné sous l’autre contrôle et observez que la ligne d’alignement est plus courte.Move the selected control below the other control and observe that the snapline is shorter. Déplacer le contrôle sélectionné vers la gauche de l’autre contrôle et observez que la ligne d’alignement 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 Margin propriété, Left, Top, Right, Bottom, pour des valeurs différentes, ou vous peut affecter tous la même valeur avec le All propriété.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éfinition du remplissage de vos contrôlesSetting Padding for Your Controls

Pour obtenir la disposition précise requise pour votre application, vos contrôles contient 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 de l’enfant sur sa bordure du contrôle parent, utilisez le contrôle parent Padding propriété conjointement avec le contrôle enfant Margin propriété.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. Le Padding propriété est également utilisée pour contrôler la proximité du contenu d’un contrôle (par exemple, un Button du contrôle Text propriété) à 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.

Réorganiser des contrôles sur votre formulaire à l’aide de la marge intérieureArrange 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. Affectez la valeur Button à la propriété AutoSize du contrôle true.Change the value of the Button control's AutoSize property to true.

  3. Modification la Padding en développant le Padding entrée dans le propriétés fenêtre et en définissant le All propriété à 5.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 la place 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 Button contrôle depuis la boîte à outils dans le GroupBox contrôle.Drag a Button control from the Toolbox into the GroupBox control. Position du Button contrôler par conséquent, il est aligné dans le coin inférieur droit de la GroupBox contrôle.Position the Button control so it is flush with the lower-right corner of the GroupBox control.

    Observez les lignes d’alignement apparaissent sous la forme la Button contrôle approche les bordures inférieure et droite de la GroupBox contrôle.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 Margin propriété de la Button.These snaplines correspond to the Margin property of the Button.

  5. Modification la GroupBox du contrôle Padding en développant le Padding entrée dans le propriétés fenêtre et en définissant le All propriété à 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 Button contrôler au sein de la GroupBox contrôle 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 à partir des bordures de la GroupBox contrôle.The snaplines appear at a greater distance from the borders of the GroupBox control. Cette distance est la somme de la Button du contrôle Margin propriété et la GroupBox du contrôle Padding propriété.This distance is the sum of the Button control's Margin property and the GroupBox control's Padding property.

Dimensionnement automatique de vos contrôlesAutomatically Sizing Your Controls

Dans certaines applications, la taille d’un contrôle aura le même en cours d’exécution tel qu’il était au moment du design.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 Button contrôle, par exemple, peut-être être prise à partir d’une base de données, et sa longueur ne sera pas connue à l’avance.The text of a Button control, for example, may be taken from a database, and its length will not be known in advance.

Lorsque le AutoSize propriété est définie sur true, le contrôle ajuste sa taille à 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.

Ré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. Affectez la valeur Button à la propriété AutoSize du contrôle true.Change the value of the Button control's AutoSize property to true.

  3. Modifier le Button du contrôle Text propriété à « 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 Button contrôle est redimensionné 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 Button contrôle depuis la boîte à outils vers votre formulaire.Drag another Button control from the Toolbox onto your form.

  5. Modifier le Button du contrôle Text propriété à « 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 Button contrôle ne se redimensionne pas, et le texte est dé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. Modification la Padding en développant le Padding entrée dans le propriétés fenêtre et en définissant le All propriété à 5.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 découpé sur les quatre côtés.The text in the control's interior is clipped on all four sides.

  7. Modifier le Button du contrôle AutoSize propriété true.Change the Button control's AutoSize property to true.

    Le Button contrôle redimensionne pour contenir 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, à l’origine le Button contrôle pour développer dans toutes les 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 du coin inférieur droit du formulaire.Position it near the lower-right corner of the form.

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

  10. Définir le Button du contrôle Anchor propriété Right, Bottom.Set the Button control's Anchor property to Right, Bottom.

  11. Modifier le Button du contrôle Text propriété à « 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 Button contrôle redimensionne vers la gauche.When you commit the change, the Button control resizes itself toward the left. En règle générale, le dimensionnement automatique augmente la taille d’un contrôle dans la direction opposée son Anchor paramètre de propriété.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 le AutoSizeMode propriété, ce qui vous donne un contrôle plus précis sur le 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.

Utilisez 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. Définissez la valeur de la Panel du contrôle AutoSize propriété true.Set the value of the Panel control's AutoSize property to true.

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

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

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

    Notes

    Vous pouvez redimensionner librement le Panel contrôle, mais vous ne pouvez pas rendre plus petit que la position de la Button bas à droite du contrôle.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 AutoSizeMode propriété, 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 Panel du contrôle AutoSizeMode propriété GrowAndShrink.Set the value of the Panel control's AutoSizeMode property to GrowAndShrink.

    Le Panel contrôle se redimensionne autour du Button contrôle.The Panel control sizes itself to surround the Button control. Vous ne pouvez pas redimensionner le Panel contrôle.You cannot resize the Panel control.

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

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

Étapes suivantesNext 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 certaines combinaisons, que vous pouvez essayer :Here are some combinations you might try:

Voir aussiSee also