Columns (columnas) y Rows (filas)

Los contenedores de estructura Column y Row se usan para maquetar los Components hijos en series verticales u horizontales, respectivamente.

Cinco Buttons en un Column:


Cinco Buttons en un Row:


Apariencia Visual:  Por defecto, un Column o Row no ofrecerá apariencia por sí mismo: cada contenedor simplemente dibujará a sus hijos en serie sin espacio entre ellos.  Ambos contenedores proporcionan una amplia variedad de configuraciones si se desea, con propiedades para fijar bordes, fondos, márgenes, y espacio entre celdas.

ColumnLayoutData / RowLayoutData

Las propiedades ColumnLayoutData y RowLayoutData se pueden usar con Columns y Rows respectivamente para describir como se estructura y pinta cada Component hijo contenido.  Estas implementaciones LayoutData ofrecen la capacidad de fijar la alineación, los márgenes, color de fondo, imagen de fondo, ancho (RowLayoutData solo) y alto (ColumnLayoutData solo) de las celdas individuales.

Grids (rejillas)

El componente Grid se utiliza para estructurar Components en una matriz de celdas bidimensional.  Los Components individuales de un Grid se pueden configurar (usando un LayoutData) para expandirse en varias celdas horizontales y/o verticales.

Cinco Buttons en un Grid (con la propiedad size al tamaño por defecto de 2):


Cinco Buttons en un Grid (con la propiedad size fijada a 4):


Apariencia Visual:  Como las Rows y Columns, un Grid, por defecto, pinta su contenido sin ningún elemento visual adicional ni espacio entre los Components hijos.  El componente tiene propiedades para configurar bordes, margenes por defecto interiores de las celdas, ancho y alto globales, y alto y ancho de cada columna y fila de las celdas pintadas.

Orientation (orientación) y Size (tamaño):  Los Grids se pueden orientar horizontal o verticalmente.  Un Grid orientado horizontalmente dibujará sus componentes hijos de izquierda a derecha (asumiento un idioma de izquierda a derecha) y luego de arriba a abajo.  Un Grid orientado verticalmente dibujará a sus hijos de arriba a abajo y después de izquierda a derecha.  La propiedad size (tamaño) de un Grid epecifica el número de columnas/filas para desplazarse en la primer dirección antes de cambiar a la siguiente fila/columna.

Grid con orientación horizontal (por defecto):


Grid con orientación vertical:

GridLayoutData

El objeto de la propiedad GridLayoutData se puede fijar en los Components hijos para describir cómo se debe distribuir y pintar cada hijo en el Grid.  GridLayoutData permite fijar alineaciones, márgenes, color de fondo, imagen de fono, expansión de columnas, y expansión de filas para cada celda de Component hijo.

ColumnSpans (expansión de columnas) y RowSpans (expansión de filas):  Las propiedades ColumnSpan y RowSpan del objeto de la propiedad GridLayoutData se pueden utilizar para permitir que una celda se extienda a las celdas adyadentes vertical u horizontalmente.

Grid con una celda que usa GridLayoutData para expandirse en dos columnas:

Consideraciones de Rendimiento

Column y Row son contenedores ligeros de alto rendimiento.  Consumirán una mínima cantidad de memoria en el lado del servidor y un pequeño tiempo de procesador para pintarlos.  El Contenedor Web Echo2 puede incluso realizar actualizaciones parciales en estos contenedores, lo que significa que incluso si se añaden/eliminan hijos, solamente se repintarán partes en el cliente.  Los Grids no ofrecen estos beneficios de rendimiento, y por tanto, se recomienda el uso de Columns y Rows siempre que sea posible.