Panel Grid

El panel de cuadrícula (Grid) es el contenedor de diseño más flexible de Microsoft® Expression Blend™ en comparación con los demás contenedores de diseño pensados para administrar funciones de diseño más específicas. Expression Blend ofrece dos modos de edición de diseño para trabajar con paneles de cuadrícula:

Modo de diseño de lienzo (modo predeterminado)
Modo de diseño de cuadrícula (avanzado)

El modo de diseño de lienzo ofrece una experiencia de edición igual a la edición dentro de un panel de lienzo. En este modo, al desplazar los divisores de columna y fila configurados, los elementos dentro de esas filas y columnas permanecen en su lugar. El modo de diseño de cuadrícula ofrece unas opciones de diseño más avanzadas. En este modo, el panel de cuadrícula en tiempo de diseño se comporta como en tiempo de ejecución de la cuadrícula. Puede alternar entre ambos modos haciendo clic en el icono de modo situado en la esquina superior izquierda al seleccionar un panel de cuadrícula, o bien activando o desactivando la casilla de verificación Usar modo de diseño de cuadrícula de la sección Área de diseño del cuadro de diálogo Opciones (del menú Herramientas).

Modos de diseño para trabajar con paneles de cuadrícula

Modos de diseño para trabajar con paneles de cuadrícula.

Para agregar un panel de cuadrícula, use el submenú del contenedor de diseño o el botón Panel biblioteca Botón Panel biblioteca en el Cuadro de herramientas.

Organización de objetos en un panel de cuadrícula que se muestra en el modo de diseño de cuadrícula.

Colocar, ajustar el tamaño y organizar

Un aspecto fundamental del diseño de un panel de cuadrícula es cómo colocar, organizar y cambiar el tamaño de los elementos mediante la alineación, los márgenes, y las propiedades Width y Height:

Alineación La alineación determina la posición de un elemento respecto al elemento principal del elemento.
Márgenes Un margen determina la cantidad de espacio vacío que rodea el control, entre el borde externo del elemento secundario y los límites del panel.
Width y Height Las propiedades Width y Height son valores fijos indicados en píxeles (o unidades sin la participación de un dispositivo que tienen un tamaño aproximado de 1/96 pulgada). Estas propiedades pueden establecerse en Auto para que los elementos secundarios cambien de tamaño automáticamente en función del tamaño del panel principal.

Organizar elementos secundarios

Puede organizar elementos en una cuadrícula separando áreas de la cuadrícula mediante divisores de columna y de fila con el fin de crear una serie de filas y columnas que definen las áreas en las que se pueden colocar elementos dentro de la cuadrícula. Cuando el panel de cuadrícula es el elemento activo del documento, se muestran reglas azules en los lados superior e izquierdo de la cuadrícula. Cuando se desplaza el puntero del mouse sobre las reglas con la herramienta Selección , el cursor se convierte en una flecha con un signo más (+) y se muestra una línea naranja en el lugar en el que se agregará la fila o columna. Haga clic en cualquier lugar de la regla superior para agregar una columna a la cuadrícula en esa posición o haga clic en cualquier lugar de la regla izquierda para agregar una fila.

Adición de un divisor de cuadrícula de columna

Puede dibujar elementos secundarios en un panel de cuadrícula de forma que los elementos se superpongan los unos a los otros. Los elementos superpuestos estarán visibles en función del orden Z (el orden en que se dibujaron o se colocaron los elementos en un elemento principal). Para cambiar el orden Z de los elementos, use Ordenar en el menú Objeto o haga clic con el botón secundario en elementos de Objetos y escala de tiempo en el panel Interacción, seleccione Ordenar y haga clic en el comando deseado. Los elementos secundarios también pueden abarcar varias columnas o filas. También puede activar el ajuste para poder organizar mejor los objetos ajustando a las guías de alineación. Las guías de alineación permiten arrastrar objetos en el área de diseño y hacer que se ajusten a los márgenes, a las líneas de base (para objetos de texto) o a la alineación (línea discontinua roja) de otros objetos del mismo elemento contenedor, tales como un panel de diseño o los divisores de columna y de fila de un panel de cuadrícula.

Ajustar el tamaño de filas y columnas

En el Modo de diseño de cuadrícula de un panel de cuadrícula, aparecen iconos de candado alrededor de las reglas de los lados superior e izquierdo del panel de cuadrícula. Estos iconos de candado sirven para establecer el tipo de ajuste de tamaño que se emplea para las filas y columnas de la cuadrícula. Puede establecer propiedades de alto para las filas y propiedades de ancho para las columnas. Existen tres opciones distintas para establecer el ajuste de tamaño de filas y columnas en una cuadrícula; cada una de estas opciones afecta a la organización de los elementos secundarios en la cuadrícula. Son las siguientes:

Ajuste de tamaño fijo Usa valores en píxeles (px) y, para configurarlo, debe hacerse clic en el icono de candado y establecerlo en Ajuste de tamaño de píxel (la posición bloqueada)

. El ajuste de tamaño fijo indica que el tamaño de la fila o columna no cambia.

En las aplicaciones de Windows Presentation Foundation (WPF) (como las creadas con Expression Blend), los píxeles hacen referencia a píxeles sin la participación de un dispositivo o unidades sin la participación de un dispositivo que son equivalentes al tamaño de un píxel en un monitor establecido con una resolución de pantalla de 96 ppp. Cada unidad es aproximadamente 1/96 pulgada, independientemente del tamaño del monitor o la resolución de la pantalla.

Escalado proporcional Usa valores en estrella (*) y, para configurarlo, debe hacerse clic en el icono de candado y establecerlo en Escalado proporcional (la posición desbloqueada) . El escalado proporcional tiene un efecto similar al ajuste de tamaño en porcentajes de HTML.
Ajuste automático de tamaño No propiedades Height y Width no definidas y, para configurarlo, debe hacerse clic en el icono de candado y establecerlo en Ajuste automático de tamaño . Con el ajuste automático de tamaño, los elementos del panel de cuadrícula cambian de tamaño cuando cambia el tamaño del elemento principal.

Escalado proporcional y ajuste automático de tamaño establecidos para distintas columnas en un panel de cuadrícula.

Colocar elementos secundarios

En el modo de diseño de lienzo, puede colocar elementos visualmente trabajando directamente en el área de diseño y arrastrando elementos en cualquier parte del panel de cuadrícula (incluso fuera de los límites), o bien puede escribir valores precisos para la posición bajo Diseño, en el panel Propiedades.

En el Modo de diseño de cuadrícula se establecen las posiciones de los elementos secundarios en la cuadrícula mediante la configuración de márgenes para cada elemento. Los márgenes especifican la cantidad de desplazamiento para un elemento respecto a las filas y columnas que definen la cuadrícula, o respeto a los bordes de la cuadrícula dentro de la cuadrícula. Los márgenes se establecen inicialmente cuando se arrastra y se coloca un elemento secundario en una cuadrícula y representan la distancia desde el borde del elemento seleccionado a la siguiente línea de cuadrícula (fila o columna). Se establecen haciendo clic en las etiquetas contextuales de margen (en forma de nudo). Si hay una etiqueta contextual de margen abierta como o , entonces dicho margen no está configurado. Si hay una etiqueta contextual de margen cerrada como o , entonces dicho margen está configurado. Si se cambia el tamaño de la cuadrícula en tiempo de ejecución, los elementos sin márgenes definidos permanecerán en el mismo lugar. Los elementos enlazados a un margen se moverán con él al cambiarlo de tamaño.

Expression Blend también utiliza una regla sencilla para establecer la alineación predeterminada: si el elemento secundario que dibuja o cuyo tamaño va a cambiar pasa por el medio de una fila o columna, el ancho y el alto se establecerán automáticamente; de lo contrario, se arreglará dicho elemento. También puede establecer la alineación de forma que indique si se aplica o no el margen cuando se cambia el tamaño de la cuadrícula. La alineación se indica en la cuadrícula como líneas sólidas (alineación establecida) o discontinuas (alineación sin establecer), tal y como se muestra en la siguiente imagen.

Botón de un panel Grid enlazado (márgenes establecidos; observe que se indica el valor de margen) a la izquierda y derecha, y sin enlazar (márgenes no establecidos) a la parte superior e inferior.

Alineación horizontal
- Izquierda : se ancla en parte la izquierda, pero se expande en la parte derecha en el cambio de tamaño
- Centrar : siempre se ancla en el centro horizontal, independientemente del cambio de tamaño
- Derecha : se ancla en la parte derecha, pero se expande en la parte izquierda en el cambio de tamaño
- Expandir : se expande en ambas direcciones horizontales en el cambio de tamaño
Alineación vertical
- Inferior : se ancla en la parte inferior, pero se expande en la parte superior en el cambio de tamaño
- Centro : siempre se ancla en el centro vertical, independientemente del cambio de tamaño
- Superior : se ancla en la parte superior, pero se expande en la parte inferior en el cambio de tamaño
- Expandir : se expande en ambas direcciones verticales en el cambio de tamaño
Configuración de margen Valores fijos indicados en píxeles (o unidades sin la participación de un dispositivo que tienen un tamaño aproximado de 1/96 pulgada) para los márgenes superior, izquierdo, derecho e inferior. Éstos se establecen cuando se arrastra y se coloca un elemento secundario en una cuadrícula y representan la distancia desde el borde del elemento seleccionado a la siguiente línea de cuadrícula.

Ajustar el tamaño de elementos secundarios

Existen dos opciones principales de cambio de tamaño que puede usar para los elementos secundarios: tamaño fijo o tamaño automático. Los elementos de tamaño fijo tienen establecidos valores de ancho y alto específicos en la categoría Diseño. Los elementos con tamaño automático tienen los valores de alto y ancho establecidos en Automático y su tamaño se cambia automáticamente en función del tamaño del panel principal.

MinWidth y MinHeight El tamaño mínimo que se puede asignar a un elemento cuando se cambia su tamaño o se escala en una fila o columna.
MaxWidth y MaxHeight El tamaño máximo que se puede asignar a un elemento cuando se cambia su tamaño o se escala en una fila o columna. Puede establecerse en Infinity si no desea establecer un tamaño máximo.
ClipContents Determina si el panel principal debe recortar sus elementos secundarios.

GridSplitter

GridSplitter es un control utilizado en un panel de cuadrícula que proporciona un fragmento de UI con el que puede interactuar un usuario para cambiar manualmente el tamaño de partes de la cuadrícula en tiempo de ejecución. GridSplitter se encuentra disponible en el Panel biblioteca.

Para obtener más información sobre el panel de cuadrícula, el control GridSplitter o cómo crear paneles de diseño personalizados, vea la sección sobre desarrollo de .NET del kit de desarrollo de software de Windows (SDK).