Partager via


Disposition selon les positionnements absolu et dynamique

Mise à jour : novembre 2007

Lorsque vous créez une fenêtre dans une application, vous devez décider comment disposer les contrôles dans cette fenêtre. Vous devez également décider du comportement des contrôles de la fenêtre lorsque l'utilisateur redimensionne la fenêtre. Ce sont là les problèmes liés aux positionnements absolu et dynamique.

Lorsque vous créez une fenêtre dans une application, vous définissez sa taille ainsi que les tailles des contrôles placés dans cette fenêtre. Vous devez décider du comportement de la fenêtre et des contrôles si leur contenu change. Par exemple, si vous ajoutez un contrôle label à une fenêtre, vous pouvez spécifier comment l'étiquette se comporte si le texte est traduit dans une autre langue. Ce sont là des problèmes liés au redimensionnement dynamique.

Types de dispositions

Voici les trois types de dispositions que vous pouvez créer dans le Concepteur Windows Presentation Foundation (WPF) pour Visual Studio:

  • Absolue
    Vous réorganisez des éléments enfants en spécifiant leurs emplacements exacts par rapport à leur élément parent. Par exemple, vous réorganisez des contrôles sur un panneau en spécifiant les coordonnées gauche et supérieure des contrôles sur le panneau. Les éléments enfants ne se déplacent pas lorsque l'élément parent est redimensionné. Pour plus d'informations, consultez Comment : construire une disposition selon le positionnement absolu ou Procédure pas à pas : construction d'une disposition selon le positionnement absolu.

  • Dynamique
    Vous réorganisez des éléments enfants en spécifiant comment ils doivent être réorganisés et comment ils doivent être encapsulés par rapport à leur parent. Par exemple, vous pouvez réorganiser des contrôles sur un panneau et spécifier qu'ils doivent être encapsulés horizontalement. Si l'élément parent est réduit, les éléments enfants sont placés à la ligne suivante. Lorsque l'élément parent est agrandi, les éléments enfants sont placés à la ligne précédente. Pour plus d'informations, consultez Comment : construire une disposition dynamique ou Procédure pas à pas : construction d'une disposition dynamique.

  • Dynamique pilotée par des données
    Vous liez un contrôle à des données. Le contrôle est rempli avec les données et un style approprié est automatiquement appliqué aux lignes et aux colonnes en fonction des données.

Autant que possible, il est préférable d'utiliser une disposition dynamique. Les dispositions dynamiques sont les plus flexibles et elles offrent à l'utilisateur final un meilleur contrôle sur leur environnement. Les dispositions dynamiques permettent d'adapter votre contenu à la localisation et à d'autres modifications de contenu. Les dispositions absolues doivent être réservées aux cas où le positionnement précis et invariable des éléments est important ou aux cas où il existe un seul élément enfant, tel qu'une image ou un graphique.

Remarque :

Les dispositions absolues et dynamiques peuvent être associées. Par exemple, vous pouvez disposer d'une fenêtre avec une disposition dynamique générale, mais dont une partie utilise le positionnement absolu.

Panneaux

WPF fournit de nombreux contrôles Panel qui prennent en charge les positionnements absolu et dynamique. Des contrôles de panneau peuvent être associés en ajoutant un contrôle de panneau comme enfant d'un autre. Vous pouvez utiliser les contrôles de panneau suivants pour positionner des éléments dans vos applications :

Panel

Type de disposition

Description

Grid

Dynamique

Définit une zone dans laquelle vous pouvez positionner les éléments enfants dans des lignes et des colonnes.

DockPanel

Dynamique

Définit une zone dans laquelle vous pouvez réorganiser et empiler les éléments enfants sur le bord supérieur, inférieur, gauche ou droit.

WrapPanel

Dynamique

Réorganise automatiquement les éléments enfants dans une position séquentielle, en plaçant le contenu à la ligne suivante au bord du conteneur parent. Le classement se produit séquentiellement de haut en bas ou de gauche à droite, selon que l'orientation est définie horizontalement ou verticalement.

StackPanel

Dynamique

Réorganise automatiquement les éléments enfants sur une seule ligne qui peut être orientée horizontalement ou verticalement.

UniformGrid

Dynamique

Réorganise automatiquement les éléments enfants dans des lignes et des colonnes. Les lignes et les colonnes sont espacées de façon régulière. Si un élément ne tient pas dans une cellule, il est tronqué.

Canvas

Absolue

Définit une zone dans laquelle vous pouvez positionner explicitement les éléments enfants en utilisant des coordonnées.

Contrôles

WPF fournit des contrôles qui prennent en charge le positionnement dynamique piloté par des données. Ces contrôles peuvent être liés aux données et redimensionnés automatiquement pour s'adapter aux données. Vous pouvez utiliser les contrôles suivants pour afficher dynamiquement des données dans vos applications :

Contrôle

Type de disposition

Description

ListView

Dynamique pilotée par des données

Affiche une liste d'éléments de données.

GridView

Dynamique pilotée par des données

Affiche les éléments de données dans des colonnes pour un contrôle list view.

Redimensionnement dynamique

Dans le cadre du redimensionnement dynamique, vous configurez les contrôles afin qu'ils se développent ou se contractent automatiquement pour s'adapter à leur contenu. Par exemple, si vous redimensionnez un contrôle label pour l'adapter au texte dans une langue et que le texte est traduit dans une autre langue, vous pouvez définir le redimensionnement automatique de l'étiquette pour s'adapter au nouveau texte. Le positionnement dynamique prend en charge le redimensionnement dynamique en ajustant automatiquement la position des contrôles lorsque leurs tailles changent.

Voici les propriétés que vous pouvez définir pour créer plus facilement des dispositions dynamiques :

Propriété

Valeurs

S'applique à

Remarques

Width

double, Auto, *

Fenêtres, contrôles, colonnes de la grille.

Utilisez le redimensionnement Auto et star pour une flexibilité maximale. Consultez la section suivante pour plus d'informations. * s'applique uniquement aux colonnes de la grille.

Height

double, Auto, *

Fenêtres, contrôles, lignes de la grille.

Utilisez le redimensionnement Auto et star pour une flexibilité maximale. Consultez la section suivante pour plus d'informations. * s'applique uniquement aux lignes de la grille.

MinWidth

double

Fenêtres, contrôles, colonnes de la grille.

Affectez la valeur 0 pour une flexibilité maximale.

MinHeight

double

Fenêtres, contrôles, lignes de la grille.

Affectez la valeur 0 pour une flexibilité maximale.

MaxWidth

double, Infinity

Fenêtres, contrôles, colonnes de la grille.

Affectez la valeur Infinity pour une flexibilité maximale.

MaxHeight

double, Infinity

Fenêtres, contrôles, lignes de la grille.

Affectez la valeur Infinity pour une flexibilité maximale.

ResizeMode

NoResize

CanMinimize

CanResize

CanResizeWithGrip

Fenêtres

Affectez la valeur CanResize pour une flexibilité maximale. Cela permet à l'utilisateur de redimensionner la fenêtre.

SizeToContent

Manual

Width

Height

WidthAndHeight

Fenêtres

Affectez la valeur WidthAndHeight pour une flexibilité maximale. Cela permet le redimensionnement automatique de la fenêtre lorsque son contenu se développe.

Redimensionnement automatique et star

Le redimensionnement automatique permet d'adapter la taille des contrôles à leur contenu, même si la taille du contenu change. Le redimensionnement star permet de distribuer l'espace disponible entre les lignes et les colonnes d'une grille selon des proportions pondérées. En langage XAML (eXtensible Application Markup Language), les valeurs étoiles sont exprimées sous la forme * (ou n*). Par exemple, si vous disposez d'une grille avec 4 colonnes, vous pouvez définir les largeurs des colonnes comme suit :

Colonne 1

Auto

La colonne est redimensionnée en fonction de son contenu.

Colonne 2

*

Une fois les colonnes Auto calculées, la colonne obtient une partie de la largeur restante. La colonne 2 aura une largeur égale à la moitié de celle de la colonne 4.

Colonne 3

Auto

La colonne est redimensionnée en fonction de son contenu.

Colonne 4

2*

Une fois les colonnes Auto calculées, la colonne obtient une partie de la largeur restante. La colonne 4 sera deux fois plus large que la colonne 2.

Pour plus d'informations, consultez Star.

Voir aussi

Concepts

Alignement dans le concepteur WPF

Système de disposition

Vue d'ensemble du concepteur WPF

Autres ressources

Procédures pas à pas relatives aux dispositions