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
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.
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.
Depuis la Boîte à outils, faites glisser un contrôle GridSplitter dans la colonne ajoutée.
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
En mode Design, sélectionnez Grid.
Attribuez à la largeur Width de la ColumnDefinition qui contient le GridSplitter la valeur Auto.
Pour créer un GridSplitter horizontal
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.
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.
Depuis la Boîte à outils, faites glisser un contrôle GridSplitter dans la ligne ajoutée.
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
En mode Design, sélectionnez Grid.
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