Trabajar con elementos en el Diseñador XAML

Para agregar elementos (controles, distribuciones y formas) a una aplicación, puedes usar XAML, código o XAML Designer. En este tema se describe cómo trabajar con elementos en el diseñador XAML.

Agregar un elemento a un diseño

La distribución es el proceso de ajustar el tamaño y la colocación de los elementos en una interfaz de usuario. Para colocar elementos visuales, debe colocarlos en un diseño Panel. Panel tiene una propiedad secundaria, que es una colección de tipos FrameworkElement. Puedes usar distintos elementos secundarios Panel, como Canvas, StackPanel y Grid, para que actúen como contenedores de diseño y para colocar y organizar los elementos en una página.

De forma predeterminada, se usa un panel Grid como contenedor de distribución de nivel superior para un documento de página en una Aplicación de la Tienda Windows compilada para Windows mediante JavaScript.. Puedes agregar paneles de diseño, controles u otros elementos en el diseño de página de nivel superior.

Para agregar un elemento a un diseño

• En un proyecto de Visual Studio, en la ventana Esquema del documento, haz lo siguiente:

  • Haz doble clic en un elemento del cuadro de herramientas (o selecciona un elemento en el cuadro de herramientas y presiona Intro).

  • Arrastra un elemento del cuadro de herramientas a la mesa de trabajo.

  • En el cuadro de herramientas, selecciona una de las herramientas de dibujo (como Elipse o Rectángulo) y dibuja un elemento en el panel activo.

Cambiar el orden de distribución en capas de los elementos

Cuando haya dos elementos en la mesa de trabajo en XAML Designer, aparecerá un elemento delante del otro en el orden de distribución en capas. En la parte inferior de la lista de elementos en la ventana Esquema del documento está el elemento en primer plano (salvo que se haya establecido la propiedad ZIndex para un elemento). Al insertar un elemento en un documento o en un contenedor de diseño, este se coloca automáticamente delante de los demás elementos en el elemento contenedor que está activo. Para cambiar el orden de los elementos, puedes usar los comandos de Ordenar o arrastrar los elementos en el árbol de objetos de la ventana Esquema del documento.

Para cambiar el orden de distribución en capas

• Realiza alguno de los siguientes procedimientos:

  • En la ventana Esquema del documento, arrastra los elementos en sentido ascendente o descendente para crear el orden de distribución de las capas que desees.

  • Haz clic con el botón secundario en el elemento en la ventana Esquema del documento o en la mesa de trabajo para el que deseas cambiar el orden de distribución de las capas, elige Ordenar y haz clic en una de las siguientes opciones:

    • Traer al frente para traer el elemento a la primera posición del orden.

    • Traer adelante para avanzar el elemento un nivel en el orden.

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

    • Enviar al fondo para enviar el elemento a la última posición del orden.

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

Cambiar la alineación de un elemento

Puedes alinear elementos en la mesa de trabajo mediante comandos de menú o arrastrando elementos hasta las guías de alineación.

Una guía de alineación representa una indicación visual que ayuda a alinear un elemento con respecto a otros elementos de una aplicación.

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

1. Selecciona los elementos que desees alinear. Puedes seleccionar más de un elemento si mantienes presionada la tecla Ctrl mientras selecciona los elementos.

2. Selecciona una de las siguientes propiedades en HorizontalAlignment en la sección Diseño de la ventana Propiedades: Izquierda, Centrar, Derecha o Ajustar.

3. Selecciona una de las siguientes propiedades en VerticalAlignment en la sección Diseño de la ventana Propiedades: Superior, Centrar, Inferior o Ajustar.

Para alinear dos o más elementos mediante guías de alineación

• En XAML Designer, en una distribución que contiene al menos dos controles, arrastra o cambia el tamaño de uno de ellos para que el borde se alinee con otro elemento.

  Cuando los bordes estén alineados, aparecerá un límite de alineación para indicar la alineación. El límite de alineación es una línea roja discontinua. Los límites de alineación aparecen solamente cuando se habilita el ajuste a las guías de alineación. Para ver una ilustración de la mesa de trabajo que muestre un límite de alineación, consulta Tutorial: Crear una UI usando el Diseñador XAML.

Cambiar los márgenes de un elemento

En XAML Designer, los márgenes determinan la cantidad de espacio vacío que hay alrededor de un elemento en la mesa de trabajo. Por ejemplo, los márgenes especifican la cantidad de espacio entre los bordes exteriores de un elemento y los límites de un panel de Grid que contiene el elemento. Los márgenes también especifican la cantidad de espacio que hay entre los objetos que están contenidos en un StackPanel.

Para cambiar los márgenes de un elemento

1. Selecciona el elemento cuyos márgenes deseas cambiar.

2. En Diseño en la ventana Propiedades, cambia el valor (en píxeles o unidades independientes del dispositivo, que son aproximadamente un 1/96 de pulgada) para cualquiera de las propiedades Margen (Superior, Izquierda, Derecha o Inferior).

Para cambiar los márgenes de un elemento en la mesa de trabajo

• Para cambiar los márgenes de un elemento con respecto a su contenedor de distribución, haz clic en los adornos del margen que aparecen en torno al elemento en la mesa de trabajo cuando se selecciona el elemento y se encuentra dentro de un contenedor de distribución. Para obtener un ejemplo que muestra adornos del margen, consulta Tutorial: Crear una UI usando el Diseñador XAML.

  Si el adorno del margen está abierto, ya sea vertical u horizontalmente, el margen no está establecido. Si el adorno del margen está cerrado, ese margen está establecido.

  Cuando se abre un adorno del margen y el margen opuesto no se establece, este último quedará establecido según el valor correcto de acuerdo con la ubicación del elemento en la mesa de trabajo. Para márgenes opuestos, como Izquierdo y Derecho, se establece siempre al menos una propiedad.

  Importante
  Los elementos incluidos dentro de algunos contenedores de distribución, como Canvas, no tienen adornos del margen. Los elementos incluidos dentro de StackPanel tienen adornos del margen para los márgenes izquierdo y derecho o para los márgenes superior e inferior, en función de la orientación de StackPanel.

Agrupar y desagrupar elementos

Al agrupar dos o más elementos en XAML Designer se crea un nuevo contenedor de distribución y esos elementos quedan colocados en ese contenedor. Cuando se colocan dos o más elementos juntos en un contenedor de diseño, se podrá seleccionar, mover y transformar fácilmente el grupo como si los elementos de este fuesen un único elemento. La agrupación también permite identificar elementos que están relacionados entre sí de alguna manera, como los botones que constituyen un elemento de navegación. Cuando se desagrupan elementos, simplemente se elimina el contenedor de diseño que los contiene.

Para agrupar elementos en un nuevo contenedor de distribución

1. Selecciona los elementos que desees agrupar. (Para seleccionar varios elementos, mantén presionada la tecla Ctrl mientras haces clic en ellos).

2. Haz clic en los elementos seleccionados, selecciona Agrupar en y después haz clic en el tipo de contenedor de distribución en el que deseas que se encuentre el grupo.

   Sugerencia
   Si seleccionas Viewbox, T:Windows.UI.Xaml.Controls.Border o ScrollViewer para agrupar los elementos, estos se colocan en un nuevo panel Grid dentro de Viewbox, Border o ScrollViewer. Si desagrupas elementos en uno de estos contenedores de distribución, solo se elimina Viewbox, Border o ScrollViewer y se mantiene el panel Grid. Para eliminar el panel Grid, vuelve a desagrupar los elementos.

Para desagrupar elementos y eliminar el diseño

• Haz clic con el botón secundario en el grupo que desees desagrupar y haz clic en Desagrupar.

También puedes agrupar o desagrupar elementos si haces clic con el botón secundario en los elementos seleccionados en la ventana Esquema del documento y haces clic en Agrupar en o en Desagrupar.

Restablecer la distribución del elemento

Puedes restaurar los valores predeterminados para determinadas propiedades de distribución de un elemento mediante el comando Restablecer diseño. Con este comando puedes restablecer el margen, la alineación, el ancho, el alto y el tamaño de un elemento, ya sea de forma individual o colectiva.

Para restablecer el diseño del elemento

• En la ventana Esquema del documento o en la mesa de trabajo, haz clic con el botón secundario en el elemento, selecciona Restablecer diseño y, después, haz clic en la propiedad que deseas restablecer (o haz clic en Todas para restablecer todas las propiedades de distribución del elemento).

Vea también

Conceptos

Tutorial: Crear una UI usando el Diseñador XAML