Partager via


Position et disposition des contrôles

Le positionnement du contrôle dans Windows Forms est déterminé non seulement par le contrôle, mais également par le parent du contrôle. Cet article décrit les différents paramètres fournis par les contrôles et les différents types de conteneurs parents qui affectent la disposition.

Position et taille fixes

La position à laquelle un contrôle apparaît sur un parent est déterminée par la valeur de la propriété Location par rapport au coin supérieur gauche de la surface parente. La coordonnée de position supérieure gauche d’un contrôle dans le parent est (x0,y0). La taille du contrôle est déterminée par la propriété Size et représente la largeur et la hauteur du contrôle.

Emplacement du contrôle par rapport au conteneur

Lorsqu’un contrôle est ajouté à un parent qui applique le placement automatique, la position et la taille du contrôle sont modifiées. Dans ce cas, la position et la taille du contrôle peuvent ne pas être ajustées manuellement, en fonction du type de parent.

Les propriétés MaximumSize et MinimumSize permettent de définir l’espace minimal et maximal qu’un contrôle peut utiliser.

Marge et remplissage

Il existe deux propriétés de contrôle qui aident à placer précisément les contrôles : Margin et Padding.

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.

La figure suivante montre les propriétés Margin et Padding sur un élément de contrôle.

propriétés de remplissage et de marge pour les contrôles Windows Forms

Le Concepteur Visual Studio respecte ces propriétés lorsque vous positionnez et redimensionnez des contrôles. Les lignes d’alignement apparaissent sous forme de repères pour vous aider à rester en dehors de la marge spécifiée d’un contrôle. Par exemple, Visual Studio affiche la ligne d'accrochage lorsque vous faites glisser un contrôle en regard d’un autre contrôle :

Image animée montrant les lignes d'alignement avec des propriétés de marge pour Windows Forms .NET dans Visual Studio

Placement et taille automatiques

Les contrôles peuvent être placés automatiquement dans leur parent. Certains conteneurs parents forcent le placement, tandis que d’autres respectent les paramètres de contrôle qui guident le positionnement. Il existe deux propriétés sur un contrôle qui aident à placer et à dimensionner automatiquement le contrôle au sein d’un parent : Dock et Anchor.

L’ordre de dessin peut affecter le positionnement automatique. L'ordre dans lequel un contrôle est dessiné est déterminé par l’index du contrôle dans la collection Controls du parent. Cet index est appelé Z-order. Chaque contrôle est rendu dans l'ordre inverse de son apparition dans la collection. C’est-à-dire que la collection applique le principe « premier entré, dernier dessiné » et « dernier entré, premier dessiné ».

Les propriétés MinimumSize et MaximumSize permettent de définir l’espace minimal et maximal qu’un contrôle peut utiliser.

Bassin

La propriété Dock définit quelle bordure du contrôle est alignée au côté correspondant du parent et comment le contrôle est redimensionné à l'intérieur du parent.

formulaire Windows avec des boutons avec des paramètres d’ancrage.

Lorsqu’un contrôle est ancré, le conteneur détermine l’espace qu’il doit occuper et redimensionner et positionne le contrôle. La largeur et la hauteur du contrôle sont toujours respectées en fonction du style d’ancrage. Par exemple, si le contrôle est attaché en haut, la Height du contrôle est respectée, mais la Width est automatiquement ajustée. Si un contrôle est attaché à gauche, la Width du contrôle est respectée, mais la Height est automatiquement ajustée.

Il est impossible de définir manuellement le Location du contrôle, car l'ancrage d'un contrôle définit automatiquement sa position.

Le Z-order du contrôle affecte sa fixation. Lorsque les contrôles ancrés sont disposés, ils utilisent l'espace disponible. Par exemple, si un contrôle est dessiné en premier et ancré en haut, il prend toute la largeur du conteneur. Si un contrôle suivant est ancré à gauche, il a moins d’espace vertical disponible.

Formulaire Windows avec boutons attachés à gauche et en haut, celui du haut étant plus grand.

Si le Z-order du contrôle est inversé, le contrôle ancré à gauche dispose alors d’un espace initial plus grand. Le contrôle utilise la hauteur entière du conteneur. Le contrôle qui est ancré sur le haut a moins d’espace horizontal disponible.

formulaire Windows avec des boutons ancrés à gauche et en haut, le bouton de gauche étant plus grand.

À mesure que le conteneur augmente et se réduit, les contrôles ancrés au conteneur sont repositionnés et redimensionnés pour conserver leurs positions et tailles applicables.

Animation montrant comment un Windows Form avec des boutons ancrés dans toutes les positions est redimensionné.

Si plusieurs contrôles sont attachés sur le même côté du conteneur, ils sont empilés en fonction de leur Z-order.

formulaire Windows avec deux boutons ancrés à gauche.

Ancrage

L’ancrage d’un contrôle vous permet de lier le contrôle à un ou plusieurs côtés du conteneur parent. À mesure que le conteneur change de taille, les contrôles enfants ancrés conservent leur distance par rapport au côté ancré.

Un contrôle peut être ancré à un ou plusieurs côtés, sans restriction. La fixation est définie avec la propriété Anchor.

Animation montrant comment un Windows Form avec des boutons ancrés dans toutes les positions est redimensionné.

Dimensionnement automatique

La propriété AutoSize permet à un contrôle de modifier sa taille, le cas échéant, pour qu’elle corresponde à la taille spécifiée par la propriété PreferredSize. Vous ajustez le comportement de dimensionnement pour des contrôles spécifiques en définissant la propriété AutoSizeMode.

Seuls certains contrôles prennent en charge la propriété AutoSize. En outre, certains contrôles qui prennent en charge la propriété AutoSize prennent également en charge la propriété AutoSizeMode.

Comportement toujours vrai Descriptif
Le dimensionnement automatique est une fonctionnalité d’exécution. Cela signifie qu’il ne augmente jamais ou réduit un contrôle, puis n’a aucun effet supplémentaire.
Si un contrôle change de taille, la valeur de sa propriété Location reste toujours constante. Quand le contenu d’un contrôle augmente, le contrôle augmente vers la droite et vers le bas. Les contrôles ne s'étendent pas vers la gauche.
Les propriétés Dock et Anchor sont appliquées lorsque AutoSize est true. La valeur de la propriété Location du contrôle est ajustée à la valeur correcte.

Le contrôle Label est l’exception à cette règle. Lorsque vous définissez la valeur de la propriété AutoSize d’un contrôle Label ancré sur true, le contrôle Label ne s'étendra pas.
Les propriétés MaximumSize et MinimumSize d’un contrôle sont toujours respectées, quelle que soit la valeur de sa propriété AutoSize. Les propriétés MaximumSize et MinimumSize ne sont pas affectées par la propriété AutoSize.
Il n’existe aucune taille minimale définie par défaut. Cela signifie que si un contrôle est défini pour réduire sous AutoSize et qu’il n’a pas de contenu, la valeur de sa propriété Size est (0x,0y). Dans ce cas, votre contrôle se réduit à un point et ne sera pas facilement visible.
Si un contrôle n’implémente pas la GetPreferredSize méthode, la GetPreferredSize méthode retourne la dernière valeur affectée à la Size propriété. Cela signifie que définir AutoSize sur true n’a aucun effet.
Un contrôle dans une cellule TableLayoutPanel se réduit toujours pour s’adapter à la cellule jusqu’à ce que son MinimumSize soit atteint. Cette taille est appliquée en tant que taille maximale. Ce n’est pas le cas lorsque la cellule fait partie d’une ligne ou d’une AutoSize colonne.

Propriété AutoSizeMode

La propriété AutoSizeMode fournit un contrôle plus précis sur le comportement de AutoSize par défaut. La propriété AutoSizeMode spécifie comment un contrôle se dimensionne en fonction de son contenu. Le contenu, par exemple, peut être le texte d’un contrôle Button ou des contrôles enfants pour un conteneur.

La liste suivante montre les valeurs AutoSizeMode et son comportement.

  • AutoSizeMode.GrowAndShrink

    Le contrôle augmente ou se réduit pour englober son contenu.

    Les valeurs MinimumSize et MaximumSize sont respectées, mais la valeur actuelle de la propriété Size est ignorée.

    Il s'agit du même comportement que les contrôles avec la propriété AutoSize et sans la propriété AutoSizeMode.

  • AutoSizeMode.GrowOnly

    Le contrôle grandit autant que nécessaire pour englober son contenu, mais il ne deviendra pas plus petit que la valeur spécifiée par sa propriété Size.

    Il s’agit de la valeur par défaut de AutoSizeMode.

Contrôles qui prennent en charge la propriété AutoSize

Le tableau suivant décrit le niveau de prise en charge du dimensionnement automatique par contrôle :

Contrôle Prise en charge de AutoSize Prise en charge de AutoSizeMode
Button ✔️ ✔️
CheckedListBox ✔️ ✔️
FlowLayoutPanel ✔️ ✔️
Form ✔️ ✔️
GroupBox ✔️ ✔️
Panel ✔️ ✔️
TableLayoutPanel ✔️ ✔️
CheckBox ✔️
DomainUpDown ✔️
Label ✔️
LinkLabel ✔️
MaskedTextBox ✔️
NumericUpDown ✔️
RadioButton ✔️
TextBox ✔️
TrackBar ✔️
CheckedListBox
ComboBox
DataGridView
DateTimePicker
ListBox
ListView
MaskedTextBox
MonthCalendar
ProgressBar
PropertyGrid
RichTextBox
SplitContainer
TabControl
TabPage
TreeView
WebBrowser
ScrollBar

AutoSize dans l’environnement de conception

Le tableau suivant décrit le comportement de dimensionnement d’un contrôle au moment du design, en fonction de la valeur de ses propriétés AutoSize et AutoSizeMode.

Remplacez la propriété SelectionRules pour déterminer si un contrôle donné est dans un état redimensionnable par l’utilisateur. Dans le tableau suivant, « ne peut pas redimensionner » signifie Moveable uniquement, « peut redimensionner » signifie AllSizeable et Moveable.

Paramètre AutoSize Paramètre AutoSizeMode Comportement
true Propriété non disponible. L’utilisateur ne peut pas redimensionner le contrôle au moment du design, à l’exception des contrôles suivants :

- TextBox
- MaskedTextBox
- RichTextBox
- TrackBar
true GrowAndShrink L’utilisateur ne peut pas redimensionner le contrôle au moment du design.
true GrowOnly L’utilisateur peut redimensionner le contrôle au moment du design. Lorsque la propriété Size est définie, l’utilisateur ne peut augmenter que la taille du contrôle.
false ou AutoSize est masqué Non applicable. L’utilisateur peut redimensionner le contrôle au moment du design.

Remarque

Pour optimiser la productivité, le Concepteur Windows Forms dans Visual Studio ombre la propriété AutoSize pour la classe Form. Au moment du design, le formulaire se comporte comme si la propriété AutoSize est définie sur false, quel que soit son paramètre réel. Lors de l’exécution, aucun traitement particulier n’est effectué et la propriété AutoSize est appliquée comme spécifié par la configuration de la propriété.

Conteneur : Formulaire

Le Form est l’objet principal de Windows Forms. Une application Windows Forms comporte généralement un formulaire affiché à tout moment. Les formulaires contiennent des contrôles et prennent en compte les propriétés Location et Size du contrôle pour le placement manuel. Les formulaires répondent également à la propriété Dock pour le placement automatique.

La plupart du temps, un formulaire a des poignées sur les bords qui permettent à l’utilisateur de redimensionner le formulaire. La Anchor propriété d’un contrôle permet au contrôle de croître et de réduire à mesure que le formulaire est redimensionné.

Conteneur : Panneau

Le contrôle Panel est similaire à un formulaire dans lequel il regroupe simplement les contrôles. Il prend en charge les mêmes styles de placement manuels et automatiques qu’un formulaire. Pour plus d’informations, consultez la section Container : Form.

Un panneau s'intègre parfaitement au parent et tronque toute zone d’un contrôle qui dépasse les limites du panneau. Si un contrôle se trouve en dehors des limites du panneau et AutoScroll est défini sur true, les barres de défilement s’affichent et l’utilisateur peut faire défiler le panneau.

Contrairement à la commande de zone de groupe , un panneau n’a ni légende ni bordure.

Un Formulaire Windows avec un panneau et une zone de groupe.

L’image ci-dessus comporte un panneau avec la propriété BorderStyle définie pour illustrer les limites du panneau.

Conteneur : zone de groupe

Le contrôle GroupBox fournit un regroupement identifiable pour d’autres contrôles. En règle générale, vous utilisez une zone de groupe pour subdiviser un formulaire par fonction. Par exemple, vous pouvez avoir un formulaire représentant des informations personnelles et les champs liés à une adresse sont regroupés. Au moment de la conception, il est facile de déplacer la zone de groupe avec les contrôles qu'elle contient.

La zone de groupe prend en charge les mêmes styles de placement manuels et automatiques qu’un formulaire. Pour plus d’informations, consultez la section Container : Form. Une zone de groupe coupe également toute partie d’un contrôle qui dépasse des limites du panneau.

Contrairement au contrôle panneau, une zone de groupe n’a pas la possibilité de faire défiler le contenu et d’afficher les barres de défilement.

Un Formulaire Windows avec un panneau et une zone de groupe.

Conteneur : disposition de flux

Le contrôle FlowLayoutPanel dispose son contenu selon un flux horizontal ou vertical. Vous pouvez encapsuler le contenu du contrôle d’une ligne à l’autre ou d’une colonne à l’autre. Vous pouvez également découper son contenu au lieu de l'envelopper.

Vous pouvez spécifier la direction du flux en définissant la valeur de la propriété FlowDirection. Le contrôle FlowLayoutPanel inverse correctement son sens du flux dans les dispositions de droite à gauche (RTL, Right-to-Left). Vous pouvez également spécifier si le contenu du contrôle FlowLayoutPanel est encapsulé ou coupé en définissant la valeur de la propriété WrapContents.

Le contrôle FlowLayoutPanel ajuste automatiquement sa taille en fonction de son contenu lorsque vous définissez la propriété AutoSize sur true. Il fournit également une propriété FlowBreak à ses contrôles enfants. L'affectation de la valeur de la propriété FlowBreak à true fait en sorte que le contrôle FlowLayoutPanel cesse de disposer les contrôles dans le sens du flux actuel et qu'il soit inclus dans un wrapper à la ligne ou la colonne suivante.

Un Windows Form avec deux contrôles de panneau de flux.

L’image ci-dessus comporte deux contrôles FlowLayoutPanel avec la propriété BorderStyle définie pour illustrer les limites du contrôle.

Conteneur : disposition de table

Le contrôle TableLayoutPanel organise son contenu dans une grille. Étant donné que la disposition est effectuée au moment du design et au moment de l’exécution, elle peut changer dynamiquement à mesure que l’environnement de l’application change. Cela permet aux contrôles du panneau de se redimensionner proportionnellement, afin qu'ils puissent répondre aux modifications telles que le redimensionnement du contrôle parent ou la longueur du texte liée à la localisation.

Tout contrôle Windows Forms peut être un enfant du contrôle TableLayoutPanel, y compris d’autres instances de TableLayoutPanel. Cela vous permet de construire des dispositions sophistiquées qui s’adaptent aux modifications au moment de l’exécution.

Vous pouvez également contrôler la direction d'expansion (horizontale ou verticale) une fois que le contrôle TableLayoutPanel est rempli de contrôles enfants. Par défaut, le contrôle TableLayoutPanel se développe vers le bas en ajoutant des lignes.

Vous pouvez contrôler la taille et le style des lignes et des colonnes à l’aide des propriétés RowStyles et ColumnStyles. Vous pouvez définir les propriétés des lignes ou des colonnes individuellement.

Le contrôle TableLayoutPanel ajoute les propriétés suivantes à ses contrôles enfants : Cell, Column, Row, ColumnSpan, et RowSpan.

Un Windows Form avec contrôle de disposition de table.

L’image ci-dessus comporte un tableau avec la propriété CellBorderStyle définie pour illustrer les limites de chaque cellule.

Conteneur : Fractionner le conteneur

Le contrôle SplitContainer Windows Forms peut être considéré comme un contrôle composite ; il s’agit de deux panneaux séparés par une barre mobile. Lorsque le pointeur de la souris se trouve sur la barre, le pointeur change de forme pour montrer que la barre est mobile.

Avec le contrôle SplitContainer, vous pouvez créer des interfaces utilisateur complexes ; souvent, une sélection dans un panneau détermine les objets affichés dans l’autre panneau. Cette disposition est efficace pour afficher et parcourir les informations. Le fait de disposer de deux panneaux vous permet d’agréger des informations dans des zones, et la barre, ou « fractionnement », permet aux utilisateurs de redimensionner facilement les panneaux.

Un formulaire Windows avec un conteneur divisé imbriqué.

L’image ci-dessus a un conteneur fractionné pour créer un volet gauche et droit. Le volet droit contient un deuxième conteneur de fractionnement dans lequel Orientation est définie sur Vertical. La propriété BorderStyle est définie pour illustrer les limites de chaque panneau.

Conteneur : contrôle Onglet

Le TabControl affiche plusieurs onglets, comme les séparateurs dans un bloc-notes ou des étiquettes sur des dossiers dans un classeur. Les onglets peuvent contenir des images et d’autres contrôles. Utilisez le contrôle Tab pour produire le type de boîte de dialogue à plusieurs pages qui apparaît de nombreux emplacements dans le système d’exploitation Windows, tels que le Panneau de configuration et les propriétés d’affichage. En outre, le TabControl peut être utilisé pour créer des pages de propriétés, qui sont utilisées pour définir un groupe de propriétés associées.

La propriété la plus importante du TabControl est TabPages, qui contient les onglets individuels. Chaque onglet individuel est un objet TabPage.

Formulaire Windows avec un contrôle Onglet et deux pages d’onglets.