Usar el panel de diseño Grid

El panel de diseño Grid es el contenedor de diseño más flexible, en comparación con otros contenedores que se han diseñado 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 diseño Grid :

• Modo de diseño de cuadrícula (modo predeterminado)    Ofrece una experiencia de edición que es similar al comportamiento de ajuste del tamaño en tiempo de ejecución de Grid . En este modo, al mover los divisores de columna y fila que haya creado, los objetos que están dentro de esas filas y columnas cambian de tamaño para preservar sus propiedades Margin .

• Modo de diseño de lienzo   Ofrece una experiencia de edición que es similar a la edición dentro de un panel de lienzo. En este modo, al mover los divisores de columna y fila que haya creado, los objetos que están dentro de esas filas y columnas permanecen en su lugar, pero sus propiedades Margin se actualizan.

Para alternar entre ambos modos, haga clic en el icono de modo situado en la esquina superior izquierda al seleccionar un objeto Grid o active o desactive la casilla Usar modo de diseño de cuadrícula en 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 objeto Grid a un documento, seleccione Grid   desde el panel Activos o desde el botón de contenedor de diseño del panel Herramientas y, a continuación, arrástrelo con el puntero hasta la mesa de trabajo. El siguiente código XAML se agrega al proyecto:

<Grid/>

Para obtener más información acerca de cómo trabajar con objetos Grid , vea Agregar o quitar una fila o columna y Cambiar la opción de tamaño de una fila o columna.

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

El objetivo del diseño en un panel Grid es colocar, organizar y cambiar el tamaño de los objetos eficazmente mediante el uso de las propiedades Alignment , Margin , Width y Height :

• Alignment    Determina la posición de un objeto con respecto al objeto primario.

• Margins    Determina la cantidad de espacio vacío que rodea al control, entre el borde externo del objeto secundario y los límites del panel.

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

Organizar objetos secundarios

Para organizar objetos en un panel de diseño Grid , 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 objetos en la cuadrícula. Cuando el panel de diseño Grid es el contenedor activo del documento, aparecen reglas azules en los lados superior e izquierdo de la cuadrícula. Cuando el puntero se desplaza sobre las reglas con la herramienta Selección, 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á una 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 objetos secundarios en un panel de diseño Grid para que los objetos se superpongan los unos a los otros. Los objetos superpuestos estarán visibles en función del orden Z (el orden en que se dibujaron o se colocaron los objetos en el objeto primario). Para cambiar el orden Z de los objetos, use Ordenar en el menú Objeto, o bien haga clic con el botón secundario en elementos del panel Objetos y escala de tiempo, seleccione Ordenar y, a continuación, haga clic en el comando deseado. Los objetos secundarios también pueden abarcar varias columnas o filas.

Además, puede activar el ajuste para organizar mejor los objetos ajustándolos 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 pertenecientes al mismo objeto contenedor, tales como un panel de diseño o los divisores de columna y de fila de un panel de cuadrícula.

Para obtener más información, vea Activar o desactivar el ajuste.

Ajustar el tamaño de filas y columnas

En el modo de diseño de cuadrícula de un panel de diseño Grid , se muestran 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 objetos 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 los proyectos de 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) . La variación de tamaño proporcional tiene un efecto similar al ajuste de tamaño en porcentajes de HTML.

• Ajuste automático de tamaño    No usa ninguna propiedad Width o Height definida y, para configurarlo, se debe hacer clic en el icono de candado y establecerlo en Redimensionado automáticamente. Con el ajuste automático de tamaño, los objetos del panel de cuadrícula cambian de tamaño cuando cambia el tamaño del objeto primario.

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

Si se ha seleccionado 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 Width cuando se usa la variación de tamaño proporcional 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.

Colocar objetos secundarios

En el modo de diseño de lienzo, puede colocar objetos visualmente si trabaja directamente en la mesa de trabajo y arrastra objetos a cualquier parte del panel de cuadrícula (incluso fuera de los límites) o bien puede escribir valores precisos para la posición en Diseño, en el panel Propiedades.

En el modo de diseño de cuadrícula, las posiciones de los objetos secundarios en la cuadrícula se establecen mediante la configuración de márgenes para cada objeto. Los márgenes especifican la cantidad de desplazamiento para un objeto respecto a las filas y columnas que definen la cuadrícula o con respecto a los bordes de la celda dentro de la cuadrícula. Puede establecer los márgenes inicialmente cuando arrastra y coloca un objeto secundario en una cuadrícula, y representan la distancia desde el borde del objeto 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 el control Adorner de margen está abierto ( o ), ese margen no está establecido. Si el control Adorner de margen está cerrado ( o ), ese margen está establecido. Si se cambia el tamaño de la cuadrícula en tiempo de ejecución, los objetos sin márgenes establecidos permanecerán en el mismo lugar. Los objetos 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 objeto secundario que dibuja o cuyo tamaño va a cambiar pasa por el medio de una fila o columna, las propiedades Width y Height se establecerán en Auto ; de lo contrario, la alineación será fija. 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 en un panel Grid enlazado (márgenes establecidos; con el valor de margen indicado) a la izquierda y derecha, y sin enlazar (márgenes no establecidos) en la parte superior e inferior.

• Alineación horizontal

  • Izquierda   Se ancla a la izquierda, pero se ajusta en 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 ajusta en la izquierda al cambiar de tamaño.

  • Ajustar   Se ajusta en ambas direcciones horizontales al cambiar de tamaño.

• Alineación vertical

  • Inferior   Se ancla en la parte inferior, pero se ajusta 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 ajusta hasta la parte inferior al cambiar de tamaño.

  • Ajustar   Se ajusta en ambas direcciones verticales al cambiar de tamaño.

• Configuración de Margin   Valores fijos indicados en píxeles (unidades sin la participación de un dispositivo que tienen un tamaño aproximado de 1/96 pulgadas) para los márgenes Superior, Izquierdo, Derecho e Inferior. Puede establecerlos cuando arrastra y coloca un objeto secundario en una cuadrícula, y representan la distancia desde el borde del objeto seleccionado a la siguiente línea de cuadrícula.

Ajustar el tamaño de objetos secundarios

Puede usar dos opciones principales de ajuste de tamaño para los objetos secundarios: tamaño fijo o tamaño automático. Los objetos de tamaño fijo tienen establecidos valores de ancho y alto específicos en la categoría Diseño. Los objetos 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 objeto 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 objeto 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 objetos secundarios.

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 elementos de una cuadrícula en tiempo de ejecución. GridSplitter está disponible en el panel Activos.

Para obtener más información acerca del panel de cuadrícula, el control GridSplitter o la creación de paneles de diseño personalizados, vea la sección System.Windows.Controls (Espacio de nombres)  de la biblioteca de clases de .NET Framework para Windows Presentation Foundation (WPF), o bien la sección System.Windows.Controls (Espacio de nombres)  (puede estar en inglés) de la biblioteca de clases de .NET Framework para Microsoft Silverlight.

Vea también

Tareas

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

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.