Trabajar con elementos en el Diseñador XAML

Puedes agregar elementos (controles, diseños y formas) a tu aplicación en XAML, en código o mediante el Diseñador XAML. En este tema se describe cómo trabajar con elementos en el Diseñador XAML en Visual Studio o Blend para Visual Studio.

Agregar un elemento a un diseño

El diseño es el proceso de ajuste de tamaño y posicionamiento de elementos en una interfaz de usuario. Para posicionar elementos visuales, debe colocarlos en un Panel de diseño. Un Panel tiene una propiedad hija que es una colección de tipos FrameworkElement. Puede usar varios Panel elementos secundarios, como Canvas, StackPanel y Grid, para actuar como contenedores de diseño y para colocar y organizar los elementos en una página.

De forma predeterminada, se usa un Grid panel como contenedor de diseño de nivel superior dentro de una página o formulario. Puede agregar paneles de diseño, controles u otros elementos dentro del diseño de página de nivel superior.

Para agregar un elemento a un diseño en el Diseñador XAML, realice una de las acciones siguientes:

• Haga doble clic en un elemento del Cuadro de herramientas (o seleccione un elemento en el Cuadro de herramientas y presione Entrar).

• Arrastre un elemento desde el Cuadro de herramientas hasta la mesa de trabajo.

• En el Cuadro de herramientas, seleccione una de las herramientas de dibujo (por ejemplo, Ellipse o Rectangle) y, a continuación, dibuje un elemento en el panel activo.

Cambiar el orden de capas de los elementos

Cuando hay dos elementos en la mesa de trabajo en el Diseñador XAML, aparecerá un elemento delante del otro en el orden de capas. En la parte inferior de la lista de elementos, en la ventana de Esquema del documento, está el elemento más frontal (excepto cuando se establece la propiedad ZIndex para un elemento). Al insertar un elemento en una página, formulario o contenedor de diseño, el elemento se coloca automáticamente delante de otros elementos del elemento contenedor activo. Para cambiar el orden de los elementos, puede usar los comandos Order o arrastrar los elementos en el árbol de objetos en la ventana Esquema del documento.

Para cambiar el orden de capas, realice una de las acciones siguientes:

• En la ventana Esquema del documento , arrastre los elementos hacia arriba o hacia abajo para crear el orden de capas deseado.

• Haga clic con el botón derecho en el elemento de la ventana Esquema del documento o en la mesa de trabajo para la que desea cambiar el orden de capas, seleccione Orden y, a continuación, haga clic en uno de los siguientes:

  • Traer al frente para mover el elemento al principio del orden.

  • Traer adelante para que el elemento avance un nivel en el orden.

  • Enviar hacia atrás para mover el elemento un nivel hacia atrás en el orden.

  • Enviar a Atrás para enviar el elemento hasta la parte posterior del pedido.

• Cambie la propiedad ZIndex en la sección Diseño de la ventana Propiedades. Para los elementos superpuestos, la propiedad ZIndex tiene prioridad sobre el orden de los elementos que se muestran en la ventana Esquema del documento. Un elemento que tiene un valor ZIndex superior aparece delante cuando los elementos se superponen.

Cambiar la alineación de un elemento

Puede alinear elementos en la mesa de trabajo mediante comandos de menú o arrastrando elementos a líneas guía.

Una línea de ajuste es una indicación visual que ayuda a alinear un elemento con respecto a otros elementos de la aplicación.

Para alinear dos o más elementos mediante comandos de menú:

1. Seleccione los elementos que desea alinear. Puede seleccionar más de un elemento presionando y manteniendo presionada la tecla Ctrl mientras selecciona los elementos.

2. Seleccione una de las siguientes propiedades en HorizontalAlignment en la sección Diseño de la ventana Propiedades: Izquierda, Centro, Derecha o Stretch.

3. Seleccione una de las siguientes propiedades en VerticalAlignment en la sección Diseño de la ventana Propiedades: Superior, Centro, Inferior o Stretch.

Para alinear dos o más elementos mediante líneas de ajuste, en el Diseñador XAML, en un diseño que contiene al menos dos elementos, arrastre o cambie el tamaño de uno de los elementos para que el borde esté alineado con otro elemento.

Cuando los bordes están alineados, aparece un límite de alineación para indicar la alineación. El límite de alineación es una línea discontinua roja. Los límites de alineación solo aparecen cuando el ajuste a las líneas guía está habilitado. Para obtener una ilustración de la mesa de trabajo que muestra un límite de alineación, consulta Crear una interfaz de usuario mediante el Diseñador XAML.

Cambiar los márgenes de un elemento

Los márgenes del Diseñador XAML determinan la cantidad de espacio vacío alrededor de un elemento en la mesa de trabajo. Por ejemplo, los márgenes especifican la cantidad de espacio entre los bordes externos de un elemento y los límites de un Grid panel que contiene el elemento . Los márgenes también especifican la cantidad de espacio entre los elementos contenidos en un StackPanel.

Para cambiar los márgenes de un elemento en la ventana Propiedades:

1. Seleccione el elemento cuyos márgenes desea cambiar.

2. En Diseño en la ventana Propiedades, cambie el valor (en píxeles o unidades independientes del dispositivo, que son aproximadamente de 1/96 pulgadas) para cualquiera de las propiedades Margin (Top, Left, Right o Bottom).

En la mesa de trabajo, para cambiar los márgenes de un elemento en relación con el contenedor de diseño del elemento, haga clic en los adornos de margen que aparecen alrededor del elemento cuando se selecciona el elemento y se encuentra dentro de un contenedor de diseño. Para obtener una ilustración que muestra adornos de margen, consulta Crear una interfaz de usuario mediante el Diseñador XAML.

Si un adorno de margen está abierto, tanto vertical como horizontalmente, ese margen no está fijado. Si se cierra un adornador de margen, se fija ese margen.

Cuando abres un adorno de margen y el margen opuesto no está configurado, el margen opuesto se ajusta al valor correcto según la ubicación del elemento en el lienzo de trabajo. Para los márgenes opuestos, como los márgenes Izquierdo y Derecho , siempre se establece al menos una propiedad.

Agrupar y desagrupar elementos

La agrupación de dos o más elementos en el Diseñador XAML crea un nuevo contenedor de diseño y coloca esos elementos dentro de ese contenedor. Colocar dos o más elementos juntos en un contenedor de diseño le permite seleccionar, mover y transformar fácilmente el grupo como si los elementos de ese grupo fueran un elemento. La agrupación también es útil para identificar elementos relacionados entre sí de alguna manera, como los botones que componen un elemento de navegación. Al desagrupar elementos, simplemente elimina el contenedor de diseño que contenía los elementos.

Para agrupar elementos en un nuevo contenedor de diseño:

1. Seleccione los elementos que desea agrupar. (Para seleccionar varios elementos, mantenga presionada la tecla Ctrl mientras hace clic en ellos).

2. Haga clic con el botón derecho en los elementos seleccionados, seleccione Agrupar en y, a continuación, haga clic en el tipo de contenedor de diseño en el que desea que resida el grupo.

   Sugerencia

   Si selecciona Viewbox, Border o ScrollViewer para agrupar los elementos, los elementos se colocan en un nuevo panel Grid dentro de viewbox, Border o ScrollViewer. Si desagrupa los elementos de uno de estos contenedores de diseño, solo se elimina el Viewbox, Border o ScrollViewer y el panel Grid permanece. Para eliminar el Grid panel, desagrupe los elementos de nuevo.

Para desagrupar elementos y eliminar el diseño, haga clic con el botón derecho en el grupo que desea desagrupar y haga clic en Desagrupar. También puede agrupar o desagrupar elementos haciendo clic con el botón derecho en los elementos seleccionados en la ventana Esquema del documento y haciendo clic en Agrupar en o Desagrupar.

Restablecer el diseño del elemento

Puede restaurar valores predeterminados para propiedades de diseño específicas de un elemento mediante los comandos Restablecimiento de diseño. Con este comando, puede restablecer el margen, la alineación, el ancho, el alto y el tamaño de un elemento de forma individual o colectiva.

Para restablecer el diseño del elemento, haga clic con el botón derecho en el elemento en la ventana Esquema del documento o en la mesa de trabajo y, a continuación, elija Layout>ResetPropertyName, donde PropertyName es la propiedad que desea restablecer (o elija Layout>Reset All para restablecer todas las propiedades de diseño del elemento).

Contenido relacionado

• Creación de una interfaz de usuario mediante el Diseñador XAML