Comment : redimensionner des colonnes avec un GridSplitter

  • Article

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

Exemple

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

Pour spécifier un GridSplitter redimensionnement des colonnes adjacentes dans un Grid, définissez la Column propriété jointe sur l’une des colonnes que vous souhaitez redimensionner. Si vous Grid avez plusieurs lignes, définissez la RowSpan propriété jointe sur le nombre de lignes. Définissez ensuite la HorizontalAlignment propriété Left sur ou Right (l’alignement que vous définissez dépend des deux colonnes à redimensionner). Enfin, définissez la VerticalAlignment propriété sur Stretch.

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

Une GridSplitter colonne 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 une GridSplitter colonne qui occupe une colonne dans un Grid, définissez la Column propriété jointe sur l’une des colonnes que vous souhaitez redimensionner. Si votre grille comporte plusieurs lignes, définissez la RowSpan propriété jointe sur le nombre de lignes. Ensuite, définissez la HorizontalAlignmentCentervaleur , définissez la VerticalAlignment propriété Stretchsur , puis définissez la Width colonne qui contient la GridSplitterAutovaleur .

L’exemple suivant montre comment définir une verticale GridSplitter qui occupe une colonne et redimensionne les colonnes de chaque côté de celle-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