Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original. Más información.
Traducción
Original

Organizar objetos

Los paneles de diseño son objetos que controlan la posición, el tamaño, las dimensiones y la organización de los elementos que contienen. El funcionamiento de los paneles de diseño es muy similar al de los contenedores y facilitan la organización y agrupación de los objetos de la aplicación. En esta sección se incluyen temas sobre cómo establecer el diseño de la aplicación de Blend para Visual Studio.

Para obtener información sobre el sistema de diseño en las aplicaciones de Windows Presentation Foundation (WPF), vea Diseño en MSDN.

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 Nota

En los proyectos de Microsoft Silverlight solamente están disponibles los paneles de diseño Grid, Canvas, StackPanel, ScrollViewer y Border.

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 compila 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 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.

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

JJ170057.a87ee957-7fbf-4135-a6ab-6de7e63160aa(es-es,VS.120).png

Grid

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 Usar el panel de diseño de cuadrícula.

JJ170057.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(es-es,VS.120).png

Canvas

Organiza los elementos secundarios según las coordenadas X e Y absolutas. Canvas 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 Usar el panel de diseño de lienzo.

JJ170057.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(es-es,VS.120).png

StackPanel

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 Usar el panel de diseño StackPanel.

JJ170057.91486eda-6173-4ce8-9610-4f296dcb83d7(es-es,VS.120).png

WrapPanel

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 objeto 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 Usar el panel de diseño WrapPanel.

JJ170057.db9f1ff5-6bca-441d-b289-c6781a478a5b(es-es,VS.120).png

DockPanel

Organiza los elementos secundarios para que permanezcan, o se acoplen, en uno de los bordes del panel.

Para obtener más información, vea Usar el panel de diseño DockPanel.

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

Border

Elemento simple que dibuja un borde, un fondo o ambos alrededor de un elemento. Border tiene sólo 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 sobre Border, vea Otros contenedores de diseño.

JJ170057.0cc3e2a4-7a8b-48ef-abad-c3673ac774d8(es-es,VS.120).png

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 sobre BulletDecorator, vea Otros contenedores de diseño.

JJ170057.5d9046cc-9edb-45eb-8c59-30af398f7b6c(es-es,VS.120).png

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.

JJ170057.5ca26a94-31cd-4fda-83c5-a9564b5b019d(es-es,VS.120).png

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 dentro de un elemento 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 sobre ScrollViewer, vea Otros contenedores de diseño.

JJ170057.f14d64f5-fb79-4d1d-a29e-05dd6f440e98(es-es,VS.120).png

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 sobre UniformGrid, vea Otros contenedores de diseño.

JJ170057.16691128-7f3d-45e0-b532-45e8a7162416(es-es,VS.120).png

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 sobre Viewbox, vea Otros contenedores de diseño.

En el panel Objetos y escala de tiempo, verá un elemento denominado LayoutRoot. Este elemento representa el panel de diseño raíz de un documento de 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).

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 clic en el panel de diseño. Un resaltado azul alrededor del panel indica que este es ahora el elemento activo. El resaltado azul aparece en la mesa de trabajo y en el panel Objetos y escala de tiempo. 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 objeto colors2 StackPanel es el panel de diseño activo actual, al que se agregarán nuevos objetos secundarios

JJ170057.a3b049ca-8d4c-417c-88e7-786a583c699a(es-es,VS.120).png

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.

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

JJ170057.95d9db96-a236-4ed6-b6ba-a141a8168dde(es-es,VS.120).png

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 en el Kit de desarrollo de software de Windows (SDK).

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft