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

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

Ejemplo

Cómo crear un GridSplitter que se superponga al borde de una columna

Para especificar un control GridSplitter que cambia el tamaño de las columnas adyacentes en un control Grid, establezca la propiedad adjunta Column en una de las columnas cuyo tamaño desea cambiar. Si Grid tiene más de una fila, establezca la propiedad adjunta RowSpan en el número de filas. A continuación, establezca la propiedad HorizontalAlignment en Left o Right (la alineación que se establezca dependerá de cuáles sean las dos columnas cuyo tamaño desea cambiar). 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 tenga su propia columna puede quedar oculto tras otros controles de Grid. Para obtener más información sobre cómo evitar el problema, consulte Cómo: Asegurarse de que un GridSplitter es visible.

Cómo crear un GridSplitter que ocupa una columna

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

En el ejemplo siguiente se muestra cómo definir un GridSplitter vertical que ocupa una columna y cambia el tamaño de las columnas situadas a ambos lados de él.

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


...


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

Vea también

Referencia

GridSplitter

Otros recursos

Temas "Cómo..." sobre el control GridSplitter