Cómo: Cambiar el tamaño de las columnas con un gridSplitter

En este ejemplo se muestra cómo crear un vertical GridSplitter para redistribuir el espacio entre dos columnas de un Grid sin cambiar las dimensiones de Grid.

Ejemplo

Cómo crear un gridSplitter que superponga el borde de una columna

Para especificar un GridSplitter que redimensione las columnas adyacentes en un Grid, establezca la propiedad adjunta Column en una de las columnas que desea redimensionar. Si su Grid tiene más de una fila, establezca la propiedad RowSpan adjunta al número de filas. A continuación, establezca la HorizontalAlignment propiedad en Left o Right (la alineación que establezca depende de las dos columnas que desee cambiar de tamaño). Por último, establezca la propiedad VerticalAlignment en Stretch.

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

Un GridSplitter que no tiene su propia columna puede quedar oculto por otros controles en el Grid. Para obtener más información sobre cómo evitar este problema, vea Asegurarse de que un gridSplitter es visible.

Creación de un gridSplitter que ocupa una columna

Para especificar un GridSplitter que ocupa una columna en un Grid, establezca la propiedad adjunta Column en una de las columnas que desea redimensionar. Si el Grid tiene más de una fila, establezca la RowSpan propiedad adjunta en el número de filas. A continuación, establezca el HorizontalAlignment en Center, configure la propiedad VerticalAlignment en Stretch, y establezca el Width de la columna que contiene el GridSplitter en Auto.

En el ejemplo siguiente se muestra cómo definir una vertical GridSplitter que ocupa una columna y cambia el tamaño de las columnas en cualquiera de sus lados.

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

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

Consulte también

• GridSplitter
• Temas de procedimiento