Panel de cuadrícula

El panel de cuadrícula es el contenedor de diseño más flexible en comparación con otros contenedores de diseño que están diseñados para administrar una funcionalidad más específica de diseño. Microsoft Expression Blend ofrece dos modos de edición de diseño para trabajar con paneles de cuadrícula:

• El modo de diseño de lienzo (modo predeterminado) 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 (avanzado) 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.

• Para alternar entre ambos modos, haga clic en el icono de modo situado en la esquina superior izquierda al seleccionar un panel de cuadrícula o active o desactive la casilla Usar modo de diseño de cuadrícula de la sección Mesa de trabajo del cuadro de diálogo Opciones (del menú Herramientas).

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 en el Cuadro de herramientas.

Disposición de los objetos en un panel de cuadrícula que se ha dividido en tres filas y tres columnas, mostrado en el modo de diseño de la 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 primario del elemento.

• Márgenes   Determinan la cantidad de espacio vacío que rodea el control, entre el borde externo del elemento secundario y los límites del panel.

• **Ancho y alto  ** Valores fijos medidos en píxeles (o unidades independientes del dispositivo de aproximadamente 1/96 pulgadas). Puede establecer estas propiedades en Automático para que los elementos secundarios cambien de tamaño automáticamente en función del tamaño del panel primario.

Volver al principio

Organizar elementos secundarios

Para organizar elementos en una cuadrícula, separe las áreas de la cuadrícula. Puede hacerlo mediante el uso de divisores de columnas y filas para crear una serie de filas y columnas que definen las regiones en las que puede diseñar elementos en 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 puntero 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 primario). 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. Además, puede activar el ajuste para poder organizar mejor los objetos ajustando a las guías de alineación. El ajuste permite arrastrar objetos en la mesa de trabajo 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.

Volver al principio

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 valores de alto para las filas y valores de ancho para las columnas. Tiene tres opciones 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. Estas opciones de ajuste de tamaño 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.

  [!NOTA]

  En las aplicaciones de Windows Presentation Foundation (WPF) (como las creadas mediante Expression Blend), los píxeles hacen referencia a píxeles independientes del dispositivo o unidades independientes del dispositivo que son equivalentes al tamaño de un píxel en un monitor que se establece en una resolución de pantalla de 96 PPP. Cada unidad mide aproximadamente 1/96 de pulgada con independencia del tamaño del monitor o de la resolución de pantalla.

• Variación de tamaño proporcional  Usa valores en estrella (*) y, para configurarlo, se debe hacer clic en el icono de candado y establecerlo en Ajuste de tamaño de estrella (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 usa ninguna propiedad de Ancho y Alto definida y, para configurarlo, se debe hacer 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 primario.

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

Cuando se selecciona un divisor de cuadrícula en la mesa de trabajo, puede usar el panel Propiedades para seleccionar las opciones de ajuste de tamaño y ajustar la propiedad Ancho cuando se usa en estrella o un tamaño fijo. Además, puede establecer las propiedades MaxWidth y MinWidth de un divisor de cuadrícula de columna en el panel Propiedades.

Volver al principio

Colocar elementos secundarios

En el modo de diseño de lienzo, puede colocar elementos visualmente si trabaja directamente en la mesa de trabajo y arrastra 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 con respeto a los bordes de la celda dentro de la cuadrícula. Puede establecer los márgenes inicialmente cuando arrastra y 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). Para establecerlos, haga 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 usa 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 Width y el Height se establecerán en Auto; de lo contrario, se arreglará dicho elemento. Además, 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 de cuadrícula 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 a la izquierda, pero se expande a la derecha al cambiar de tamaño.

  • Centro. Siempre se ancla en el centro horizontal, independientemente del cambio de tamaño

  • Derecha. Se ancla a la derecha, pero se expande a la izquierda al cambiar 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 hasta la parte superior al cambiar 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 hasta la parte inferior al cambiar 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. Puede establecerlos cuando arrastra y 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.

Volver al principio

Ajustar el tamaño de elementos secundarios

Tiene dos opciones de ajuste de tamaño principal para usarlas en los elementos secundarios: de tamaño fijo o de 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 primario.

• 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 establecerlo en Infinity si no desea establecer un tamaño máximo.

• ClipContents   Determina si el panel principal debe recortar sus elementos secundarios.

Volver al principio

GridSplitter

GridSplitter es un control que se usa en un panel de cuadrícula con el que un usuario interactúa para cambiar manualmente el tamaño de partes de una cuadrícula en tiempo de ejecución. GridSplitter está disponible en el Panel biblioteca.

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

Volver al principio

Vea también

Conceptos

Agregar o quitar una fila o columna

Cambiar la opción de tamaño de una fila o columna