Partager via


Comment : construire une disposition dynamique

Concepteur WPF pour Visual Studio fournit de nombreux contrôles Panel qui prennent en charge le positionnement 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 dynamiquement des éléments dans vos applications :

Grid définit une zone dans laquelle vous pouvez positionner les éléments enfants dans des lignes et des colonnes. StackPanel et WrapPanel positionnent automatiquement des éléments enfants dans les lignes ou les colonnes. DockPanel positionne automatiquement des éléments enfants le long des bords. Pour plus d'informations sur les différents panneaux, consultez Disposition selon les positionnements absolu et dynamique.

Important

Autant que possible, il est préférable d'utiliser une disposition dynamique. Les dispositions dynamiques sont les plus flexibles, elles s'adaptent aux modifications de contenu telles que la localisation et elles offrent à l'utilisateur final un meilleur contrôle sur leur environnement. Pour voir un exemple de disposition absolue, consultez Comment : construire une disposition selon le positionnement absolu.

Définir les propriétés d'une fenêtre pour bénéficier d'un comportement dynamique

Lorsque vous créez une nouvelle fenêtre, vous pouvez définir des propriétés pour bénéficier d'une disposition dynamique la plus flexible possible.

Pour définir les propriétés d'une fenêtre pour bénéficier d'un comportement dynamique

  1. En mode Design, sélectionnez la fenêtre.

  2. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Window :

    Propriété

    Valeur

    Effet

    ResizeMode

    CanResize

    Cela permet à l'utilisateur de redimensionner la fenêtre pour bénéficier de plus d'espace pour les contrôles.

    SizeToContent

    WidthAndHeight

    Cela permet le redimensionnement automatique de la fenêtre lorsque son contenu se développe.

Définir les propriétés d'un panneau pour bénéficier d'un comportement dynamique

Lorsque vous ajoutez un nouveau panneau (tel que Grid, DockPanel ou StackPanel) à une fenêtre, ou à un autre panneau, vous pouvez définir des propriétés pour bénéficier d'une disposition dynamique la plus flexible possible.

Pour définir les propriétés d'un panneau pour bénéficier d'un comportement dynamique

  1. En mode Design, sélectionnez le panneau.

  2. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Panel :

    Propriété

    Valeur

    Effet

    Width

    Auto

    Le panneau s'étend sur toute la largeur de la fenêtre ou du panneau parent.

    Height

    Auto

    Le panneau s'étend sur toute la hauteur de la fenêtre ou du panneau parent.

Définir les propriétés d'une grille pour bénéficier d'un comportement dynamique

Vous pouvez utiliser le redimensionnement Auto et star pour créer plus facilement des grilles dimensionnées dynamiquement en fonction de leur contenu. 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 selon des proportions pondérées. Pour plus d'informations, consultez Star.

Lorsque vous utilisez le mode Design pour créer de nouvelles lignes et colonnes, elles sont créées par défaut avec le redimensionnement Star. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.

Conseil

Il peut vous sembler plus facile d'ajouter les lignes et les colonnes dans l' Éditeur de collections, puis de définir les hauteurs des lignes et les largeurs des colonnes dans l'éditeur XAML.

Pour définir les propriétés d'une grille pour bénéficier d'un comportement dynamique

  1. En mode Design, sélectionnez la grille.

  2. Dans la fenêtre Propriétés, recherchez la propriété ColumnDefinitions et cliquez sur le bouton de sélection dans la colonne Valeur de la propriété.

    L'Éditeur de collections apparaît.

    1. Sélectionnez ou ajoutez une nouvelle définition de colonne.

    2. Utilisez le redimensionnement Auto et star pour définir les largeurs des colonnes pour bénéficier d'une flexibilité maximale.

    3. Cliquez sur OK pour fermer l'éditeur de collections et retourner au Concepteur WPF.

    Notes

    Les colonnes dont les propriétés Width ont la valeur Auto sont masquées temporairement parce qu'elles ne présentent pas de contenu. Pour éviter ceci, vous pouvez utiliser le redimensionnement star lorsque vous travaillez, puis passer à Auto lorsque vous avez fini.

  3. Dans la fenêtre Propriétés, recherchez la propriété RowDefinitions et cliquez sur le bouton de sélection dans la colonne Valeur de la propriété.

    L'Éditeur de collections apparaît.

    1. Sélectionnez ou ajoutez une nouvelle définition de ligne.

    2. Utilisez le redimensionnement Auto et star pour définir les hauteurs des lignes pour bénéficier d'une flexibilité maximale.

    3. Cliquez sur OK pour fermer l'éditeur de collections et retourner au Concepteur WPF.

    Notes

    Les lignes dont les propriétés Height ont la valeur Auto sont masquées temporairement parce qu'elles ne présentent pas de contenu. Pour éviter ceci, vous pouvez utiliser le redimensionnement star lorsque vous travaillez, puis passer à Auto lorsque vous avez fini.

Définir les propriétés d'un contrôle pour bénéficier d'un comportement dynamique

Lorsque vous ajoutez un nouveau contrôle à une fenêtre ou à un panneau, vous pouvez définir des propriétés pour bénéficier d'une disposition dynamique la plus flexible possible. Vous devez éviter de définir des tailles spécifiques pour les contrôles afin de garantir que les contrôles seront redimensionnés dynamiquement lorsque la fenêtre ou le contenu seront modifiés.

Pour définir les propriétés d'un contrôle pour bénéficier d'un comportement dynamique

  1. En mode Design, sélectionnez un contrôle.

  2. Dans la fenêtre Propriétés, définissez les propriétés suivantes pour le contrôle :

    Propriété

    Valeur

    Effet

    Width

    Auto

    Le contrôle s'agrandit horizontalement pour s'adapter à son contenu.

    Height

    Auto

    Le contrôle s'agrandit verticalement pour s'adapter à son contenu.

    MinWidth

    0

    Le contrôle peut être réduit horizontalement autant que nécessaire.

    MinHeight

    0

    Le contrôle peut être réduit verticalement autant que nécessaire.

    MaxWidth

    Infinity

    Le contrôle peut être agrandi horizontalement autant que nécessaire.

    MaxHeight

    Infinity

    Le contrôle peut être agrandi verticalement autant que nécessaire.

    Notes

    Les valeurs indiquées sont les valeurs par défaut.

Voir aussi

Tâches

Procédure pas à pas : construction d'une disposition dynamique

Concepts

Alignement dans le Concepteur WPF

Système de disposition

Vue d'ensemble des concepteurs WPF et Silverlight

Autres ressources

Procédures pas à pas relatives aux dispositions