Disposition selon les positionnements absolu et dynamique

Article
08/10/2011

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 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.

Notes

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.

Notes

Définissez la propriété UseLayoutRounding de façon à spécifier quand les valeurs en pixels non intégrales qui sont calculées pendant les passes Arrange et Measure sont arrondies aux valeurs en pixels entières. Cette propriété est héritée par les contrôles enfants.

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	Windows	Affectez la valeur CanResize pour une flexibilité maximale. Cela permet à l'utilisateur de redimensionner la fenêtre.
SizeToContent	Manual Width Height WidthAndHeight	Windows	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.