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

Article
08/10/2011

Dans le positionnement 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. Vous pouvez également configurer l'agrandissement automatique des fenêtres et des contrôles lorsque leur contenu se développe. Pour plus d'informations, consultez Disposition selon les positionnements absolu et 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 :

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 Procédure pas à pas : construction d'une disposition selon le positionnement absolu.

Dans cette procédure pas à pas, vous allez effectuer les tâches suivantes :

Création d'une application WPF
Configuration du contrôle de panneau Grid par défaut
Ajout de contrôles au panneau
Test de la disposition

L'illustration suivante donne un aperçu de votre application.

Une présentation dynamique

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

Visual Studio 2010

Création du projet

La première procédure consiste à créer le projet d'application.

Pour créer le projet

Créez un nouveau projet d'application WPF dans Visual Basic ou Visual C# nommé DispositionDynamique. Pour plus d'informations, consultez Comment : créer un projet d'application WPF.

Notes

Vous n'écrirez pas de code dans cette procédure pas à pas. Le langage que vous choisissez pour votre projet correspond au langage utilisé pour les pages code-behind dans votre application.

MainWindow.xaml s'ouvre dans le Concepteur WPF.
En mode Design, sélectionnez la fenêtre. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.
Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Window :

Propriété

Valeur

Largeur

400

Hauteur

200

SizeToContent

WidthAndHeight

Conseil

Vous pouvez également utiliser les poignées de redimensionnement pour redimensionner la fenêtre en mode Design.
Dans le menu Fichier, cliquez sur Enregistrer tout.

Propriété	Valeur
Largeur	400
Hauteur	200
SizeToContent	WidthAndHeight

Configuration du contrôle de panneau Grille par défaut

Par défaut, la nouvelle application WPF contient un Window avec un panneau Grid. Dans cette procédure, vous ajoutez quatre lignes et quatre colonnes à la grille. Vous définissez la largeur de chaque colonne sur *, afin que la largeur disponible soit divisée de manière égale entre les quatre colonnes. Vous définissez la hauteur de trois des lignes sur Auto, afin qu'elles soient ajustées à la taille de leur contenu. Vous définissez la hauteur de l'une des lignes sur *, afin qu'elle utilise la hauteur disponible restante.

Pour ajouter un contrôle de panneau

En mode Design, sélectionnez la grille.
(Facultatif) Dans la fenêtre Propriétés, recherchez la propriété ShowGridLines et activez la case à cocher.

Lorsque l'application s'exécute, le quadrillage apparaît sur la fenêtre. Cela est utile pour le débogage, mais vous devez désactiver la case à cocher de la propriété ShowGridLines pour le code de production.
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é.

La boîte de dialogue Éditeur de collections s'affiche.
1. Cliquez sur Ajouter quatre fois pour ajouter quatre colonnes.
2. Affectez la valeur Auto à la propriété Width de la première ligne.
3. Affectez la valeur * à la propriété Width de la deuxième ligne.
4. Affectez la valeur Auto à la propriété Width de la troisième ligne.
5. Affectez la valeur Auto à la propriété Width de la quatrième ligne.
6. Cliquez sur OK pour fermer l'éditeur de collections et retourner à Concepteur WPF.
  
  À présent, la grille contient quatre colonnes, mais une seule colonne est affichée. 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. Cela ne pose pas de problème pour cette procédure pas à pas. Pour éviter cela à l'avenir, vous pouvez utiliser le redimensionnement star lorsque vous travaillez, puis passer à Auto lorsque vous avez fini.
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é.

La boîte de dialogue Éditeur de collections s'affiche.
1. Cliquez sur Ajouter quatre fois pour ajouter quatre lignes.
2. Affectez la valeur Auto à la propriété Height de la première ligne.
3. Affectez la valeur Auto à la propriété Height de la deuxième ligne.
4. Affectez la valeur * à la propriété Height de la troisième ligne.
5. Affectez la valeur Auto à la propriété Height de la quatrième ligne.
6. Cliquez sur OK pour fermer l'éditeur de collections et retourner à Concepteur WPF.
  
  À présent, la grille contient quatre lignes, mais une seule ligne est affichée. 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. Cela ne pose pas de problème pour cette procédure pas à pas. Pour éviter cela à l'avenir, vous pouvez utiliser le redimensionnement star lorsque vous travaillez, puis passer à Auto lorsque vous avez fini.
Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout de contrôles au panneau

Ensuite, vous ajoutez des contrôles au panneau et utilisez les propriétés attachées Column et Row du contrôle Grid pour les positionner dynamiquement.

Pour ajouter des contrôles au panneau

Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle Label sur le contrôle Grid.

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

Propriété	Valeur
Contenu	Nom :
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Largeur	Auto
Hauteur	23
HorizontalAlignment	Stretch
VerticalAlignment	Top
Margin	20,20,10,10

Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle Label sur le contrôle Grid.

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

Propriété	Valeur
Contenu	Password:
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Largeur	Auto
Hauteur	23
HorizontalAlignment	Stretch
VerticalAlignment	Top
Margin	20,10,10,10

Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle TextBox sur le contrôle Grid.

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

Propriété	Valeur
Grid.Column	1
Grid.ColumnSpan	3
Grid.Row	0
Grid.RowSpan	1
Largeur	Auto
Hauteur	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,20,20,10

Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle TextBox sur le contrôle Grid.

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

Propriété	Valeur
Grid.Column	1
Grid.ColumnSpan	3
Grid.Row	1
Grid.RowSpan	1
Largeur	Auto
Hauteur	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,10,20,10

Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle Button sur le contrôle Grid.

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

Propriété	Valeur
Contenu	OK
Grid.Column	2
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Largeur	75
Hauteur	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,10,6,20

Dans la Boîte à outils, dans le groupe Commun, faites glisser un contrôle Button sur le contrôle Grid.

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

Propriété	Valeur
Contenu	Cancel
Grid.Column	3
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Largeur	75
Hauteur	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	6,10,20,20

Dans le menu Fichier, cliquez sur Enregistrer tout.

Test de la disposition

Pour finir, vous exécutez l'application et vérifiez que la disposition change dynamiquement lorsque l'utilisateur redimensionne la fenêtre et lorsque le contenu des contrôles dépasse la taille des contrôles.

Pour tester la disposition

Dans le menu Déboguer, cliquez sur Démarrer le débogage.

L'application démarre et la fenêtre apparaît.
Dans la zone de texte Nom, tapez un contenu aléatoire pour remplir la zone de texte. Lorsque vous atteignez la fin de la zone de texte, la zone de texte et la fenêtre s'agrandissent pour s'ajuster au texte que vous tapez.
Fermez la fenêtre.
Dans le menu Déboguer, cliquez sur Démarrer le débogage.

L'application démarre et la fenêtre apparaît.
Redimensionnez la fenêtre à la fois verticalement et horizontalement.

Les colonnes s'agrandissent de manière égale pour utiliser l'espace disponible. Les zones de texte s'allongent pour remplir les colonnes agrandies. Trois lignes conservent leur hauteur et la quatrième s'agrandit pour utiliser l'espace disponible.
Fermez la fenêtre.
En mode Design, sélectionnez l'étiquette Nom.
Dans la fenêtre Propriétés, modifiez la propriété Content en lui affectant la valeur Entrez ici votre nom complet.

En mode Design, l'étiquette s'agrandit pour s'ajuster à la taille du texte.
Dans le menu Déboguer, cliquez sur Démarrer le débogage.

L'application démarre et la fenêtre apparaît. Le contrôle label affiche le texte étendu.
Fermez la fenêtre.

Assemblage

Voici le fichier MainWindow.xaml terminé :

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

Étapes suivantes

Vous pouvez effectuer des tests pour apprendre comment obtenir des effets différents avec les dispositions dynamiques en remplaçant le panneau Grid dans cette procédure pas à pas avec les panneaux suivants :

Voir aussi