Procédure pas à pas : création d'une application redimensionnable à l'aide du Concepteur WPF

Article
08/10/2011

Vous pouvez utiliser le contrôle GridSplitter avec le contrôle conteneur Grid pour créer des dispositions de fenêtre qui sont redimensionnables par l'utilisateur au moment de l'exécution. Par exemple, dans une application qui a une interface utilisateur divisée en zones, l'utilisateur peut faire glisser un séparateur pour rendre une zone plus grande en fonction de ce qu'il veut voir le plus à l'écran. Dans cette procédure pas à pas, vous allez créer la disposition pour une application de type messagerie instantanée.

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

créer une application WPF ;
configurer le panneau de grille par défaut ;
ajouter un GridSplitter horizontal ;
ajouter un panneau d'ancrage et des contrôles ;
ajouter un panneau de grille et des contrôles ;
tester l'application.

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

Une application redimensionnable

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 projet Application WPF, dans Visual Basic ou Visual C#, nommé ResizableApplication. 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.
Dans le menu Fichier, cliquez sur Enregistrer tout.

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

Par défaut, la nouvelle application WPF contient un Window avec un panneau Grid. Pour respecter les meilleures pratiques, vous dédiez ce Grid au GridSplitter. Le plan de la grille se présente comme suit :

Ligne 1 : un volet Dock pour la première partie de la disposition.

Ligne 2 : un GridSplitter.

Ligne 3 : un volet Grid pour le reste de la disposition.

Pour configurer le contrôle de panneau de grille par défaut

En mode Design, sélectionnez Grid. 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, recherchez la propriété RowDefinitions et cliquez sur le bouton de sélection dans la colonne de valeur de propriété.

L'Éditeur de collections apparaît.
Cliquez sur Ajouter trois fois pour ajouter trois lignes.
Affectez la valeur Auto à la propriété Height de la deuxième ligne.
Affectez à la propriété MinHeight de la troisième ligne la valeur 70.
Cliquez sur OK pour fermer l'éditeur de collections et retourner au Concepteur WPF.

À présent, la grille contient trois lignes, mais seules deux lignes sont affichées. La ligne dont la propriété Height a la valeur Auto est temporairement masquée parce qu'elle n'a aucun 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 d'un GridSplitter horizontal

Ensuite, ajoutez le GridSplitter.

Pour ajouter un GridSplitter horizontal

En mode Design, sélectionnez Grid.
Depuis la Boîte à outils, faites glisser un contrôle GridSplitter sur Grid.

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

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

Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout d'un panneau d'ancrage et de contrôles

Ensuite vous ajoutez un DockPanel et définissez la disposition de la moitié supérieure de l'application. Le DockPanel contient un Label et un RichTextBox. Vous définissez la couleur de Label et de RichTextBox pour mettre en surbrillance la moitié supérieure de l'application lorsque vous déplacez le GridSplitter.

Pour ajouter un panneau d'ancrage et des contrôles

En mode Design, sélectionnez Grid.
Depuis la Boîte à outils, faites glisser un contrôle DockPanel sur Grid.

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

Propriété	Valeur
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
LastChildFill	True (activé)
Largeur	Auto
Hauteur	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

Depuis la Boîte à outils, faites glisser un contrôle Label sur DockPanel.

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

Propriété	Valeur
Background	Blue (#FF0000FF)
Foreground	White (#FFFFFFFF)
Contenu	Affichage
DockPanel.Dock	Top
Largeur	Auto
Hauteur	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

En mode Design, sélectionnez DockPanel.

Conseil

Parce qu'il y a plusieurs contrôles placés sur la grille, vous pouvez utiliser la touche TABULATION, la fenêtre Structure du document ou la vue XAML pour sélectionner le DockPanel plus facilement. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.
Depuis la Boîte à outils, faites glisser un contrôle RichTextBox sur DockPanel.

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

Propriété	Valeur
Background	LightBlue (#FFADD8E6)
DockPanel.Dock	Bottom
Largeur	Auto
Hauteur	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0
IsReadOnly	True (activé)

Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout d'un panneau de grille et de contrôles

Ensuite vous ajoutez un Grid et définissez la disposition de la moitié inférieure de l'application. Le Grid contient un Button et un RichTextBox. Vous définissez la couleur de RichTextBox pour mettre en surbrillance la moitié inférieure de l'application lorsque vous déplacez le GridSplitter.

Pour ajouter un panneau de grille et des contrôles

En mode Design, sélectionnez Grid.
Depuis la Boîte à outils, faites glisser un contrôle Grid sur Grid.
Dans la fenêtre Propriétés, définissez les propriétés suivantes pour le nouveau Grid :

Propriété

Valeur

Grid.Column

0

Grid.ColumnSpan

1

Grid.Row

2

Grid.RowSpan

1

Largeur

Auto

Hauteur

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margin

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

L'Éditeur de collections apparaît.
Cliquez sur Ajouter deux fois pour ajouter deux colonnes.
Affectez à la propriété Width de la deuxième colonne la valeur Auto.
Cliquez sur OK pour fermer l'éditeur de collections et retourner au Concepteur WPF.
Depuis la Boîte à outils, faites glisser un contrôle Button sur Grid.

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

Propriété	Valeur
Contenu	OK
Grid.Column	1
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Largeur	60
Hauteur	60
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	5

Depuis la Boîte à outils, faites glisser un contrôle RichTextBox sur Grid.

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

Propriété	Valeur
Background	PaleGoldenrod (#FFEEE8AA)
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Largeur	Auto
Hauteur	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0
IsReadOnly	False (désactivé)

Dans le menu Fichier, cliquez sur Enregistrer tout.

Test de l'application

La dernière étape consiste à tester l'application.

Pour tester l'application

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

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

Les parties supérieure et inférieure de l'application se développent et se rétractent pour utiliser l'espace disponible.
Faites glisser le séparateur pour redimensionner les parties de l'application. Rendez une partie de l'application plus petite que l'autre.
Redimensionnez à nouveau la fenêtre.

Les parties supérieure et inférieure de l'application se développent et se rétractent proportionnellement selon l'emplacement du séparateur.
Faites glisser le séparateur aussi loin que possible vers le haut de l'application.

La partie supérieure de l'application disparaît et seule la partie inférieure est visible.
Faites glisser le séparateur aussi loin que possible vers le bas de l'application.

La partie inférieure de l'application est encore visible. Ceci car vous avez affecté à la propriété MinHeight de la troisième ligne la valeur 70.

Notes

70 = 60 (hauteur du bouton) + 5 (marge supérieure du bouton) + 5 (marge inférieure du bouton)

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="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </DockPanel>
        <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
        <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

Étapes suivantes

L'application que vous avez créée dans cette procédure pas à pas contient un séparateur horizontal. Vous pouvez essayer de créer la même application en utilisant un séparateur vertical.

L'application que vous avez créée illustre uniquement des techniques de disposition. Vous pouvez essayer de rajouter du code pour rendre l'application fonctionnelle. Par exemple, vous pouvez ajouter à l'événement de clic du bouton un code qui copie le texte de la zone de texte inférieure vers la zone de texte supérieure.

Voir aussi