Share via

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

  • Artículo

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

Ejemplo

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

Para especificar un control GridSplitter que cambie el tamaño de las columnas adyacentes en un control Grid, establezca la propiedad adjunta Column en una de las columnas a las que desee cambiar el tamaño. Si su control 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 (cuya alineación establecida depende de las dos columnas a las que quiera cambiar el tamaño). Finalmente, establezca la propiedad VerticalAlignment en Stretch.

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

Un control GridSplitter que no tenga su propia columna puede estar ocultado por otros controles en el control Grid. Para más información sobre cómo evitar este problema, vea Asegurarse de que un GridSplitter es visible.

Cómo crear un control GridSplitter que ocupa una columna

Para especificar un control GridSplitter que ocupe una columna en un control Grid, establezca la propiedad adjunta Column en una de las columnas a las que quiera cambiar el tamaño. Si su control 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 Center, VerticalAlignment en Stretch y la propiedad Width de la columna que contiene el control GridSplitter en Auto.

En el ejemplo siguiente se muestra cómo definir un control GridSplitter vertical que ocupa una columna y cambia el tamaño de las columnas en cada lado del mismo.

<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