Comment : redimensionner des lignes avec un GridSplitter

  • Article

Cet exemple montre comment utiliser un horizontal GridSplitter pour redistribuer l’espace entre deux lignes dans 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 redimensionnement des lignes adjacentes dans un Grid, définissez la Row propriété jointe sur l’une des lignes que vous souhaitez redimensionner. Si vous Grid avez plusieurs colonnes, définissez la ColumnSpan propriété jointe pour spécifier le nombre de colonnes. Définissez ensuite la VerticalAlignmentTop valeur ou Bottom (l’alignement que vous définissez dépend des deux lignes à redimensionner). Enfin, définissez la HorizontalAlignment propriété sur Stretch.

L’exemple suivant montre comment définir un horizontal GridSplitter 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 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 ligne

Pour spécifier une GridSplitter ligne qui occupe une ligne dans un Grid, définissez la Row propriété jointe sur l’une des lignes que vous souhaitez redimensionner. Si vous Grid avez plusieurs colonnes, définissez la ColumnSpan propriété jointe sur le nombre de colonnes. Définissez ensuite la VerticalAlignmentCentervaleur , définissez la HorizontalAlignment propriété Stretchsur , puis définissez la Height ligne qui contient la AutoGridSplitter valeur .

L’exemple suivant montre comment définir un horizontal GridSplitter 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