Cómo: Agregar filas y columnas a una cuadrícula

El control Grid de Windows Presentation Foundation (WPF) permite colocar y alinear controles con facilidad y rapidez creando diseños basados en cuadrícula. En tiempo de diseño, puede agregar filas y columnas a un control Grid de WPF Designer. De manera predeterminada, las nuevas filas y columnas utilizan el valor de tamaño Star.

Importante
Si establece el tamaño de una fila o columna en Auto antes de agregarle contenido, ésta no estará visible en el diseñador. Esto puede dificultar la colocación de los controles en la fila o columna correcta. Para evitarlo, puede usar el ajuste del tamaño mediante asterisco mientras trabaja y cambiar al ajuste automático cuando haya terminado.

En este tema se explican tres maneras de agregar filas y columnas a un control Grid. También puede quitar filas y columnas de una cuadrícula. Para obtener más información, vea Cómo: Quitar filas y columnas de una cuadrícula.

Uso del diseñador

Cuando se selecciona un control Grid en WPF Designer, aparecen carriles en los lados superior e izquierdo. Puede utilizarlos para agregar directamente filas y columnas a Grid. La vista XAML se actualiza automáticamente con las nuevas filas y columnas.

Para agregar filas a una cuadrícula mediante el diseñador

1. En WPF Designer, seleccione un control Grid.

2. Mueva el puntero sobre el borde exterior del carril lateral. El puntero cambia a una cruz y aparece una línea de cuadrícula que indica dónde se agregará la fila.

3. Haga clic en el carril para establecer la fila.

   La línea de la cuadrícula fija en su lugar y aparece un indicador de línea de cuadrícula en el carril al final de ella.

   Sugerencia
   Puede ajustar el tamaño de la fila arrastrando la línea de cuadrícula en el interior de la cuadrícula o el indicador de línea de cuadrícula en el carril.

4. (Opcional) Repita los pasos 2 y 3 para agregar más filas.

Para agregar columnas a una cuadrícula mediante el diseñador

1. En WPF Designer, seleccione un control Grid.

2. Mueva el puntero sobre el borde superior del carril superior. El puntero cambia a una cruz y aparece una línea de cuadrícula que indica dónde se agregará la columna.

3. Haga clic en el carril para establecer la columna.

   La línea de la cuadrícula está fija en su lugar y aparece un indicador de línea de cuadrícula en el carril al final de ella.

   Sugerencia
   Puede ajustar el tamaño de la columna arrastrando la línea de cuadrícula en el interior de la cuadrícula o el indicador de línea de cuadrícula en el carril.

4. (Opcional) Repita los pasos 2 y 3 para agregar más columnas.

Uso del Editor de colecciones

También puede agregar filas y columnas a un control Grid mediante el Editor de colecciones. Cuando se utiliza el Editor de colecciones para configurar filas y columnas, la Vista de diseño y la vista XAML se actualizan automáticamente.

Para agregar filas a una cuadrícula mediante el Editor de colecciones

1. En WPF Designer, seleccione un control Grid.

2. En la ventana Propiedades, busque la propiedad RowDefinitions y haga clic en el botón de puntos suspensivos en la columna del valor de la propiedad.

   Aparecerá el cuadro de diálogo Editor de colecciones.

3. Haga clic en Agregar para agregar una nueva fila.

4. (Opcional) Establezca las propiedades de la fila.

5. (Opcional) Repita los pasos 3 y 4 para agregar más filas.

6. Haga clic en Aceptar para cerrar el Editor de colecciones y volver a WPF Designer.

Para agregar columnas a una cuadrícula mediante el Editor de colecciones

1. En WPF Designer, seleccione un control Grid.

2. En la ventana Propiedades, busque la propiedad ColumnDefinitions y haga clic en el botón de puntos suspensivos en la columna del valor de la propiedad.

   Aparecerá el cuadro de diálogo Editor de colecciones.

3. Haga clic en Agregar para agregar una nueva columna.

4. (Opcional) Establezca las propiedades de la columna.

5. (Opcional) Repita los pasos 3 y 4 para agregar más columnas.

6. Haga clic en Aceptar para cerrar el Editor de colecciones y volver a WPF Designer.

Uso del editor XAML

También puede agregar manualmente filas y columnas a Grid escribiendo código en el editor XAML. La Vista de diseño se actualiza automáticamente con las nuevas filas y columnas.

Para agregar filas a una cuadrícula mediante el editor XAML

1. En el editor XAML, busque un elemento Grid.

2. Agregue un elemento Grid.RowDefinitions como elemento secundario del elemento Grid. El código debe tener este aspecto:

   <Grid>
       <Grid.RowDefinitions>
       </Grid.RowDefinitions>
   </Grid>
   

3. Agregue elementos RowDefinition. En el marcado siguiente se muestra un ejemplo:

   <Grid.RowDefinitions>
       <RowDefinition Height="100" />
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
       <RowDefinition Height="5*" />
   </Grid.RowDefinitions>
   

Para agregar columnas a una cuadrícula mediante el editor XAML

1. En el editor XAML, busque un elemento Grid.

2. Agregue un elemento Grid.ColumnDefinitions como elemento secundario del elemento Grid. El código debe tener este aspecto:

   <Grid>
       <Grid.ColumnDefinitions>
       </Grid.ColumnDefinitions>
   </Grid>
   

3. Agregue elementos ColumnDefinition. En el marcado siguiente se muestra un ejemplo:

   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="100" />
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="5*" />
   </Grid.ColumnDefinitions>
   

Vea también

Tareas

Tutorial: Crear un diseño dinámico

Conceptos

Alineación en WPF Designer

Diseño con posición absoluta y dinámica

Otros recursos

Controles contenedor de WPF