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. Lo más interesante de los paneles de diseño es que, para usarlos, sólo tiene que colocar elementos en ellos.

Los paneles de diseño son adaptables, es decir, se pueden implementar de forma implícita: todo su diseño cambia de tamaño automáticamente o el tamaño se ajusta automáticamente en función del tamaño de la ventana. Existen varias situaciones en las que esta adaptabilidad resulta beneficiosa, como por ejemplo, en la creación de interfaces de usuario (UI) para distintos tamaños y resoluciones de pantalla, y en la localización a otros idiomas. También pueden usarse 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 ancho y alto de modo que el tamaño del área de diseño permanezca inalterado incluso cuando se cambia el tamaño de la ventana de la aplicación.

También puede transformar un elemento dentro de 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 que la categoría Transformación del panel Propiedades muestra la posición predeterminada como (0,0). Salvo en las animaciones en las que desee que un elemento se mueva en relación a la posición de diseño final, en la mayoría de los casos no deseará aplicar transformaciones a un elemento de un panel de diseño.

Paneles de diseño

Existen cinco paneles de diseño principales en Expression Blend y cada uno de ellos se ha diseñado para administrar un tipo de diseño distinto. En la siguiente tabla se describen estos paneles de diseño.

Panel Descripción
Lienzo Organiza los elementos secundarios según las coordenadas x e y absolutas. El lienzo permite que los elementos de la pantalla tengan posiciones fijas en tiempo de ejecución: se trata literalmente de un lienzo en blanco. Para obtener más información sobre el lienzo, vea Panel Canvas.
Acoplamiento Organiza los elementos secundarios para que permanezcan, o se acoplen, en uno de los bordes del panel. Para obtener más información sobre el acoplamiento, vea Panel DockPanel.
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 sobre la cuadrícula, vea Panel Grid.
Apilamiento Organiza los elementos secundarios en una sola línea que se puede orientar, o apilar, horizontal o verticalmente. Para obtener más información sobre el apilamiento, 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 sobre Ajustar, vea Panel WrapPanel.

Otros contenedores de diseño

Existen otros contenedores de diseño que afectan a la organización de los elementos que contienen, aunque no están optimizados para admitir los escenarios de UI más complejos que tratan con mayor facilitad los paneles de diseño principales. En la siguiente tabla se describen estos otros contenedores de diseño.

Elemento Descripción
Border Elemento simple que dibuja un borde, un fondo o ambos alrededor de un elemento. El borde tiene sólo un elemento secundario. Probablemente 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 admitir 2 elementos secundarios, normalmente una cadena de texto y un glifo (lo que representa un control como, por ejemplo, una casilla de verificación). Para obtener más información acerca de BulletDecorator, vea Otros contenedores de diseño.
Popup Un elemento Popup es una ventana que se representa encima de todo el otro contenido de una aplicación, pero en relación con otro elemento. Puede utilizar un menú emergente para proporcionar opciones e información adicional a los usuarios que interactúan con la parte principal de la UI con la que está relacionado el menú emergente. Popup acepta un solo elemento secundario y se coloca en función de 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 necesitará crear directamente un Popup, porque puede usar en su lugar un control, como un menú o un cuadro combinado, que use un menú emergente en su plantilla. Para obtener más información acerca de Popup, vea Otros contenedores de diseño.
ScrollViewer Permite habilitar el desplazamiento de los elementos secundarios que contiene. Acepta un solo elemento secundario, por lo que en la mayoría de los casos le convendrá 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 dentro de un ScrollViewer es demasiado grande, puede habilitarlo para que se recorte. También 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 llenar UniformGrid. 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 parecida al control 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.

El contenedor de diseño raíz

En Objetos y escala de tiempo en el panel Interacción, observará un elemento denominado 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 un panel de diseño alternativo. También puede hacer que un panel de lienzo sea su LayoutRoot predeterminado, en lugar de un panel de cuadrícula; para ello, desactive la casilla de verificación 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).

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 resultan especialmente útiles para importar contenido de otros programas, como Microsoft® Expression® Design. El material importado de Expression Design usa un panel de lienzo para cada capa importada.

Para crear una nueva capa, puede usar el comando Crear capa nueva en el menú Herramientas. Expression Blend crea una capa en función del valor de LayoutRoot en el documento actual.

Dibujo conceptual de capas

Dibujo conceptual de capas

Trabajar con elementos secundarios

Expression Blend intenta agregar elementos secundarios al panel raíz (o superior) de un documento, pero si está activo otro contenedor de diseño en el árbol de objetos, el elemento secundario se agrega a ese contenedor. Para activar un elemento, haga doble clic en el panel o control al que desea cambiar el enfoque. Un resaltado amarillo alrededor del panel indica que éste es ahora el elemento activo. El resaltado amarillo se muestra tanto en el área de diseño como en Objetos y escala de tiempo en el panel Interacción. Cuando cree un panel e inmediatamente después dibuje elementos secundarios, se dibujarán directamente en el panel recién creado, por lo que no será necesario convertir el panel de diseño en el elemento activo.

1 Elemento activo en la vista de objetos bajo Objetos y escala de tiempo del panel Interacción.
2 Elemento activo en el área de diseño

Expression Blend también permite arrastrar elementos secundarios de un panel a otro para reasignarles como elemento principal otro contenedor de diseño. La siguiente imagen 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.

Reasignar el elemento principal de un elemento

Reasignar un objeto del panel raíz de cuadrícula a otro panel de cuadrícula

Diseño complejo

A menudo, es necesario disponer de mayor flexibilidad de la que se obtiene con un solo panel de diseño a la hora de diseñar una página. 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, si desea usar un panel de acoplamiento dentro de LayoutRoot (el panel de cuadrícula de forma predeterminada) para dividir una página en varias áreas que contienen a su vez uno o varios controles.

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