Partager via


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

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

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

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

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

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

  3. Cliquez sur Ajouter trois fois pour ajouter trois lignes.

  4. Affectez la valeur Auto à la propriété Height de la deuxième ligne.

  5. Affectez à la propriété MinHeight de la troisième ligne la valeur 70.

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

  7. Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout d'un GridSplitter horizontal

Ensuite, ajoutez le GridSplitter.

Pour ajouter un GridSplitter horizontal

  1. En mode Design, sélectionnez Grid.

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

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

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

  1. En mode Design, sélectionnez Grid.

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

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

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

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

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

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

  8. 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é)

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

  1. En mode Design, sélectionnez Grid.

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

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

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

  5. Cliquez sur Ajouter deux fois pour ajouter deux colonnes.

  6. Affectez à la propriété Width de la deuxième colonne la valeur Auto.

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

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

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

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

  11. 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é)

  12. Dans le menu Fichier, cliquez sur Enregistrer tout.

Test de l'application

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

Pour tester l'application

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

    L'application démarre et MainWindow apparaît.

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

  3. Faites glisser le séparateur pour redimensionner les parties de l'application. Rendez une partie de l'application plus petite que l'autre.

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

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

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

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

Tâches

Comment : créer des applications redimensionnables par l'utilisateur avec GridSplitter

Concepts

Disposition selon les positionnements absolu et dynamique

Autres ressources

Procédures pas à pas relatives aux dispositions