Partager via

Guide pratique pour redimensionner des colonnes avec un gridSplitter

  • Article

Cet exemple montre comment créer un GridSplitter vertical afin de redistribuer l’espace entre deux colonnes dans un Grid sans modifier les dimensions de la Grid.

Exemple

Comment créer un gridSplitter qui superpose le bord d’une colonne

Pour spécifier un GridSplitter qui redimensionne les colonnes adjacentes dans un Grid, définissez la propriété jointe Column sur l’une des colonnes que vous souhaitez redimensionner. Si votre Grid a plus d'une ligne, associez la propriété jointe RowSpan au nombre de lignes. Définissez ensuite la propriété HorizontalAlignment sur Left ou Right (l’alignement que vous définissez dépend des deux colonnes que vous souhaitez redimensionner). Enfin, définissez la propriété VerticalAlignment sur Stretch.

<GridSplitter Grid.Column="1" 
              Grid.RowSpan="3" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="true"
              Width="5"/>

Un GridSplitter qui n’a pas sa propre colonne peut être masquée par d’autres contrôles dans le 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 colonne

Pour spécifier un GridSplitter qui occupe une colonne dans un Grid, définissez la propriété jointe Column sur l’une des colonnes que vous souhaitez redimensionner. Si votre grille comporte plusieurs lignes, définissez la propriété jointe RowSpan sur le nombre de lignes. Définissez ensuite la HorizontalAlignment sur Center, définissez la propriété VerticalAlignment sur Stretchet définissez la Width de la colonne qui contient le GridSplitter sur Auto.

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

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>

<GridSplitter Grid.Column="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="True"
              Width="5"
              />

Voir aussi