Condividi tramite

Procedura: Ridimensionare le colonne con GridSplitter

  • Articolo

In questo esempio viene illustrato come creare un GridSplitter verticale per ridistribuire lo spazio tra due colonne in un Grid senza modificare le dimensioni del Grid.

Esempio

Come creare un gridSplitter che sovrappone il bordo di una colonna

Per specificare un GridSplitter che ridimensiona le colonne adiacenti in un Grid, impostare la proprietà associata Column su una delle colonne da ridimensionare. Se il Grid contiene più di una riga, imposta la proprietà associata RowSpan al numero di righe. Impostare quindi la proprietà HorizontalAlignment su Left o Right (l'allineamento impostato dipende dalle due colonne da ridimensionare). Impostare infine la proprietà VerticalAlignment su Stretch.

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

Un GridSplitter che non dispone di una propria colonna può essere nascosto da altri controlli nel Grid. Per altre informazioni su come evitare questo problema, vedere assicurarsi che gridSplitter sia visibile.

Come creare un elemento GridSplitter che occupa una colonna

Per specificare un GridSplitter che occupa una colonna in un Grid, impostare la proprietà associata Column per una delle colonne che si desidera ridimensionare. Se la griglia include più righe, impostare la proprietà associata RowSpan sul numero di righe. Impostare quindi il HorizontalAlignment su Center, impostare la proprietà VerticalAlignment su Stretche impostare il Width della colonna contenente il GridSplitter su Auto.

Nell'esempio seguente viene illustrato come definire un GridSplitter verticale che occupa una colonna e ridimensiona le colonne su entrambi i lati.

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

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

Vedere anche