Información general acerca del diseño

Microsoft Expression Blend facilita el diseño de página tanto simple como complejo mediante varios paneles de diseño integrados o paneles personalizados del usuario. Los paneles de diseño son elementos que controlan la posición, el tamaño y las dimensiones, además de la organización de otros elementos que contienen. Los paneles de diseño actúan fundamentalmente como contenedores. Una de las ventajas prácticas de los paneles de diseño es que permiten organizar los elementos en su interior.

[!NOTA]

Sólo el panel de diseño Canvas está disponible en los proyectos de Microsoft Silverlight 1.0. Además, sólo los paneles de diseño Grid, Canvas, StackPanel, ScrollViewer y Border están disponibles en proyectos de Silverlight 2.

Los paneles de diseño son adaptables en el sentido de que se pueden implementar de forma implícita. Este significa que el diseño general cambia automáticamente de tamaño, o se redimensiona automáticamente, de acuerdo con el tamaño de la ventana. Esto supone una ventaja en varios escenarios, como cuando se genera una interfaz de usuario que permite varios tamaños de pantalla y resoluciones, y también resuelve necesidades de localización. Además, puede elegir usar tamaños fijos mediante la implementación de los paneles de diseño de forma explícita, es decir, asignando al diseño atributos fijos de Width y Height de modo que el tamaño del área del diseño permanezca inalterado incluso cuando se cambia el tamaño de la ventana de la aplicación.

[!NOTA]

Cuando se cambia la propiedad Width o Height de un objeto de un valor fijo a uno Auto, la propiedad se establece en el valor mínimo predeterminado.

Además, se puede transformar un elemento en un panel de diseño para establecer una posición de representación posterior al diseño. Esto resulta útil en las animaciones (por ejemplo, para mover un elemento fuera de los límites de un panel de cuadrícula y hacer que se vuelva a colocar en su sitio). Las transformaciones son relativas a la posición de diseño. Por lo tanto, la categoría Transformación del panel Propiedades muestra la posición predeterminada como (0,0). En la mayoría de los casos, no deseará aplicar transformaciones a un elemento en un panel de diseño, excepto en las animaciones, donde deseará que un elemento se mueva respecto a la posición de diseño final.

Paneles de diseño

Expression Blend tiene cinco paneles de diseño principales, cada uno de ellos diseñado para administrar un tipo diferente de diseño. En la siguiente tabla se describen estos paneles de diseño.

Panel	Nombre	Descripción
	Cuadrícula	Organiza los elementos secundarios en un diseño muy flexible de filas y columnas que forman una cuadrícula. Para obtener más información, vea Panel de cuadrícula.
	Lienzo	Organiza los elementos secundarios según las coordenadas X e Y absolutas. Lienzo permite tener posiciones fijas para elementos de la pantalla en tiempo de ejecución, como un lienzo en blanco. Para obtener más información, vea Panel de lienzo.
	Apilamiento	Organiza los elementos secundarios en una sola línea que se puede orientar, o apilar, de forma horizontal o vertical. Para obtener más información, vea Panel StackPanel.
	Ajustar	Organiza los elementos secundarios en una posición secuencial de izquierda a derecha y, cuando no queda más espacio en el extremo derecho del panel, ajusta el contenido en la línea siguiente y así sucesivamente de izquierda a derecha y de arriba abajo. La orientación de un panel WrapPanel también puede ser vertical, de modo que los elementos secundarios fluyan de arriba hacia abajo, de izquierda a derecha. Para obtener más información, vea Panel WrapPanel.
	Acoplamiento	Organiza los elementos secundarios para que permanezcan, o se acoplen, en uno de los bordes del panel. Para obtener más información, vea Panel DockPanel.

Volver al principio

Otros contenedores de diseño

Otros contenedores de diseño también afectan a la disposición de los elementos que contienen. Sin embargo, estos contenedores no están optimizados para admitir los escenarios de la interfaz de usuario más eficaces, que los paneles de diseño principales pueden manejar con más éxito. En la siguiente tabla se describen estos otros contenedores de diseño.

Elemento	Nombre	Descripción
	Borde	Elemento simple que dibuja un borde, un fondo o ambos alrededor de un elemento. Borde sólo admite un elemento secundario. Es posible que desee colocar en él un panel de cuadrícula o de lienzo para poder trabajar con varios elementos secundarios. Para obtener más información acerca del Borde, vea Otros contenedores de diseño.
	BulletDecorator	Un elemento que sólo puede tener dos elementos secundarios, normalmente una cadena de texto y un glifo (que representa un control como, por ejemplo, una casilla). Para obtener más información acerca de BulletDecorator, vea Otros contenedores de diseño.
	Popup	Una ventana que representa en primer plano contenido de una aplicación con respecto a otro elemento. Puede usar un menú emergente para proporcionar opciones e información adicional a los usuarios que interactúan con la parte principal de la interfaz de usuario con la que está relacionado el menú emergente. Popup admite un único elemento secundario y su posición viene determinada por un elemento de destino. De forma predeterminada, Popup tiene un panel de cuadrícula como único elemento secundario. El panel de cuadrícula permite trabajar con varios elementos secundarios dentro del elemento Popup inmediatamente después de dibujarlo. En la mayoría de los casos, no tendrá que crear directamente un menú emergente. En su lugar, puede usar un control, como un cuadro combinado o menú, en cuya plantilla haya un menú emergente. Para obtener más información acerca de Popup, vea Otros contenedores de diseño.
	ScrollViewer	Un elemento que permite habilitar el desplazamiento de los elementos secundarios que contiene. Sólo admite un único elemento secundario. Por lo tanto, la mayor parte del tiempo deseará usar en él un panel de diseño como un panel de apilamiento, de lienzo o de cuadrícula. ScrollViewer se usa en las plantillas de otros controles (por ejemplo, cuadros de lista) para admitir el desplazamiento de contenido. Cuando el contenido de un control ScrollViewer es demasiado grande, puede habilitarlo para que se recorte. Además, puede controlar que las barras de desplazamiento estén ocultas, visibles, no disponibles o que se muestren de forma automática sólo cuando se necesiten. Para obtener más información acerca de ScrollViewer, vea Otros contenedores de diseño.
	UniformGrid	Organiza los elementos secundarios dentro de regiones de cuadrícula iguales o uniformes. UniformGrid no es una variación del panel de cuadrícula, sino que puede describirse de forma más precisa como un elemento de diseño de mosaicos, ya que crea espacios iguales entre cada uno de los elementos que contiene en función del número de filas y columnas que se especifiquen. A medida que se agregan elementos secundarios a UniformGrid, cada elemento se coloca en un área siguiendo un orden de arriba abajo y de izquierda a derecha hasta terminar de rellenar la cuadrícula. Esto es útil para un control del tipo de lista de imágenes. Para obtener más información acerca de UniformGrid, vea Otros contenedores de diseño.
	Viewbox	Escala todos sus elementos secundarios de forma similar a un control de zoom. Puesto que Viewbox sólo acepta un elemento secundario, normalmente se coloca en él un panel de lienzo o de cuadrícula para poder usar el efecto de zoom en varios elementos secundarios. Para obtener más información acerca de Viewbox, vea Otros contenedores de diseño.

Volver al principio

Contenedor de diseño raíz

Debajo de Objetos y escala de tiempo en el panel Interacción, verá un elemento llamado LayoutRoot. Este elemento representa el panel de diseño raíz de un documento de Expression Blend. La raíz de diseño predeterminada es un panel de cuadrícula. El panel de cuadrícula suele ser suficiente para el diseño de página de nivel superior en casi todos los casos. No obstante, la raíz de diseño puede cambiarse a otro panel de diseño; para ello, haga clic con el botón secundario en ella, seleccione Cambiar tipo de diseño y elija otro panel de diseño. Asimismo, se puede tener un panel de lienzo como LayoutRoot predeterminado, en lugar de un panel de cuadrícula, si se desactiva la casilla Usar un panel de cuadrícula como diseño predeterminado para elementos nuevos en la sección Proyecto del cuadro de diálogo Opciones (en el menú Herramientas).

Volver al principio

Capas

Las capas son una forma rápida y fácil de crear contenedores de diseño de nivel de página para organizar contenido. Las capas son especialmente útiles para importar contenido de otros programas, como Microsoft Expression Design 2. El material importado de Expression Design 2 usa un panel de lienzo para cada capa importada.

Se puede crear una nueva capa mediante el comando Crear capa nueva en el menú Herramientas. Expression Blend crea una nueva capa basada en los parámetros que especifique LayoutRoot para el documento actual.

Dibujo conceptual de capas

Volver al principio

Trabajar con elementos secundarios

Expression Blend intenta agregar elementos secundarios al panel raíz (o superior) en un documento. No obstante, si hay otro contenedor de diseño activo en otra parte del árbol de objetos, el elemento secundario se agregará a ese contenedor. Para activar un elemento, haga doble clic en el panel de diseño. Un resaltado amarillo alrededor del panel indica que éste es ahora el elemento activo. El resaltado amarillo aparece tanto en la mesa de trabajo como en Objetos y escala de tiempo en el panel Interacción. Cuando se crea un nuevo panel y, a continuación, se dibujan inmediatamente elementos secundarios dentro de los bordes de ese panel, tenga en cuenta que los elementos secundarios se colocarán dentro del panel que acaba de crear. Esto se debe a que un panel recién creado se convierte automáticamente en el elemento activo.

El elemento magGlass es el elemento activo actual, al que se agregarán los objetos secundarios nuevos

Expression Blend también facilita arrastrar elementos secundarios entre paneles para reasignar esos elementos a un contenedor de diseño diferente. En la siguiente imagen se muestra una elipse de color naranja que se mueve del panel de diseño raíz de cuadrícula a otro panel de cuadrícula. Un rectángulo de selección con guiones y un mensaje de texto aparecerán alrededor del panel si el panel puede aceptar un elemento secundario. Mantenga presionada la tecla ALT antes de soltar el botón del mouse para completar la acción de cambio del valor primario del nodo.

Cambio del valor primario del nodo de un objeto del panel raíz de cuadrícula a otro panel de cuadrícula

Volver al principio

Diseño complejo

A la hora de diseñar una página, a menudo es necesario disponer de mayor flexibilidad de la que se obtiene con un solo panel de diseño. Una forma de crear diseños complejos es mediante el uso paneles de diseño como contenedores para otros paneles de diseño. Por ejemplo, puede que desee usar un panel de acoplamiento en LayoutRoot (que, de forma predeterminada, es el panel de cuadrícula). Esto divide la página en una colección de áreas donde cada área normalmente contiene uno o más controles.

Para obtener más información acerca de la programación del diseño, vea la sección acerca del desarrollo de .NET (puede estar en inglés) en el kit de desarrollo de software (SDK) de Windows.

Volver al principio