Partager via

Guide pratique pour redimensionner des lignes avec un gridSplitter

  • Article

Cet exemple montre comment utiliser un GridSplitter horizontal pour redistribuer l’espace entre deux lignes d’un Grid sans modifier les dimensions du Grid.

Exemple

Comment créer un GridSplitter qui chevauche le bord d’une ligne

Pour spécifier un GridSplitter qui redimensionne les lignes adjacentes dans un Grid, définissez la propriété jointe Row sur l’une des lignes que vous souhaitez redimensionner. Si votre Grid a plusieurs colonnes, définissez la propriété jointe ColumnSpan pour spécifier le nombre de colonnes. Définissez ensuite l'VerticalAlignment sur Top ou Bottom (l’alignement que vous définissez dépend des deux lignes que vous souhaitez redimensionner). Enfin, définissez la propriété HorizontalAlignment sur Stretch.

L’exemple suivant montre comment définir une GridSplitter horizontale qui redimensionne les lignes adjacentes.

<GridSplitter Grid.Row="1" 
              Grid.ColumnSpan="3" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Top"
              Background="Black" 
              ShowsPreview="true"
              ResizeDirection="Rows"
              Height="5"/>

Un GridSplitter qui n’occupe pas sa propre ligne peut être masqué par d’autres contrôles dans la Grid. Pour plus d’informations sur la manière d’éviter ce problème, consultez la page Vérifier qu’un GridSplitter est visible.

Comment créer un GridSplitter qui occupe une ligne

Pour spécifier un GridSplitter qui occupe une ligne dans un Grid, définissez la propriété jointe Row sur l’une des lignes que vous souhaitez redimensionner. Si votre Grid a plusieurs colonnes, définissez la propriété jointe ColumnSpan sur le nombre de colonnes. Définissez ensuite la VerticalAlignment sur Center, définissez la propriété HorizontalAlignment sur Stretch, puis définissez la Height de la ligne qui contient le GridSplitter sur Auto.

L’exemple suivant montre comment définir un GridSplitter horizontal qui occupe une ligne et redimensionne les lignes de chaque côté de celui-ci.

<Grid.RowDefinitions>
  <RowDefinition Height="50*" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="50*" />
</Grid.RowDefinitions>

<StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
<GridSplitter Grid.Row="1"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center"
              Background="Black" 
              ShowsPreview="True"
              Height="5"
           />
<StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>

Voir aussi