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

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.

Lorsque vous ajoutez un contrôle GridSplitter à un Grid, c'est un enfant du contrôle Grid, et il doit être positionné dans une ligne et une colonne comme tout autre contrôle enfant. Le GridSplitter doit avoir une largeur ou une hauteur non nulle afin que l'utilisateur puisse s'en saisir et le faire glisser lors de l'exécution.

Quelques meilleures pratiques pour GridSplitter sont répertoriées ci-après.

• Mettez le GridSplitter dans une ligne ou une colonne dédiée qui ne contient pas d'autres contrôles.

• Réglez la hauteur de la ligne ou la largeur de la colonne qui contient le GridSplitter à Auto.

• Consacrez un Grid unique au GridSplitter. Ajoutez des panneaux conteneurs supplémentaires au Grid pour compléter la disposition.

Pour créer un GridSplitter vertical

1. En mode Design, sélectionnez le Grid. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.

2. Ajoutez une colonne à l'emplacement où vous souhaitez voir le GridSplitter. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.

   Notes

   Dans certains cas, il peut être difficile de positionner des lignes et des colonnes dans le concepteur. Dans ce cas, vous pouvez configurer le Grid en utilisant l'éditeur XAML. Consultez la section d'exemple à la fin de cette rubrique pour un exemple de balisage XAML.

3. Depuis la Boîte à outils, faites glisser un contrôle GridSplitter dans la colonne ajoutée.

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

   Propriété	Valeur	Valeurs possibles
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Columns	Auto Colonne Lignes
   Grid.Column	La colonne dans laquelle vous souhaitez le GridSplitter. (Les numéros de colonne commencent par zéro.)
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	Nombre total de lignes dans la collection Grid.
   Largeur	Un nombre différent de zéro. Par exemple, 10.
   Hauteur	Auto
   HorizontalAlignment	Stretch	Left Center Droite Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. En mode Design, sélectionnez Grid.

6. Attribuez à la largeur Width de la ColumnDefinition qui contient le GridSplitter la valeur Auto.

Pour créer un GridSplitter horizontal

1. En mode Design, sélectionnez le Grid. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.

2. Ajoutez une ligne à l'emplacement où vous souhaitez voir le GridSplitter. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.

   Notes

   Dans certains cas, il peut être difficile de positionner des lignes et des colonnes dans le concepteur. Dans ce cas, vous pouvez configurer le Grid en utilisant l'éditeur XAML. Consultez la section d'exemple à la fin de cette rubrique pour un exemple de balisage XAML.

3. Depuis la Boîte à outils, faites glisser un contrôle GridSplitter dans la ligne ajoutée.

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

   Propriété	Valeur	Valeurs possibles
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Lignes	Auto Colonne Lignes
   Grid.Column	0
   Grid.ColumnSpan	Nombre total de colonnes dans la collection Grid.
   Grid.Row	La ligne dans laquelle vous souhaitez le GridSplitter. (Les numéros de ligne commencent par zéro.)
   Grid.RowSpan	1
   Largeur	Auto
   Hauteur	Un nombre différent de zéro. Par exemple, 10.
   HorizontalAlignment	Stretch	Left Center Droite Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. En mode Design, sélectionnez Grid.

6. Attribuez à la hauteur Height du RowDefinition qui contient le GridSplitter la valeur Auto.

Exemple

Le code XAML suivant crée un GridSplitter horizontal :

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </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" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

Voir aussi

Tâches

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

Référence

GridSplitter

Autres ressources

Dispositions dans le Concepteur WPF

GridSplitter