Condividi tramite

Procedura: Ridimensionare le righe con gridSplitter

  • Articolo

In questo esempio viene illustrato come utilizzare un GridSplitter orizzontale per ridistribuire lo spazio tra due righe in un Grid senza modificare le dimensioni del Grid.

Esempio

Come creare un gridSplitter che sovrappone il bordo di una riga

Per specificare un GridSplitter che ridimensiona le righe adiacenti in un Grid, assegnare la proprietà associata Row a una delle righe da ridimensionare. Se il Grid include più colonne, impostare la proprietà associata ColumnSpan per specificare il numero di colonne. Impostare quindi il VerticalAlignment su Top o Bottom (l'allineamento impostato dipende dalle due righe da ridimensionare). Impostare infine la proprietà HorizontalAlignment su Stretch.

Nell'esempio seguente viene illustrato come definire un GridSplitter orizzontale che ridimensiona le righe adiacenti.

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

Un GridSplitter che non occupa una propria riga potrebbe essere oscurato da altri controlli nel Grid. Per ulteriori informazioni su come prevenire questo problema, vedere Assicurarsi che GridSplitter sia visibile.

Come creare un gridSplitter che occupa una riga

Per specificare un GridSplitter che occupa una riga all'interno di un Grid, impostare la proprietà associata Row su una delle righe da ridimensionare. Se il Grid include più colonne, configurare la proprietà associata ColumnSpan al numero di colonne. Impostare quindi il VerticalAlignment su Center, impostare la proprietà HorizontalAlignment su Stretche impostare il Height della riga contenente il GridSplitter su Auto.

Nell'esempio seguente viene illustrato come definire un GridSplitter orizzontale che occupa una riga e ridimensiona le righe su entrambi i lati.

<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"/>

Vedere anche