Tutorial: Crear una UI usando el Diseñador XAML

XAML Designer en Visual Studio 2012 proporciona una interfaz visual para ayudarte a diseñar aplicaciones de la Tienda Windows compiladas mediante aplicaciones XAML, WPF y Silverlight. Para crear las interfaces de usuario de las aplicaciones, arrastra los controles del Cuadro de herramientas y establece las propiedades en la ventana Propiedades. También puedes editar directamente XAML en la vista XAML.

Área de trabajo del diseñador XAML

El área de trabajo en el diseñador XAML de Visual Studio se compone de varios elementos de la interfaz visual. Estos incluyen la mesa de trabajo, el Cuadro de herramientas, la ventana Dispositivo, la ventana Esquema del documento, el Explorador de soluciones, la ventana Propiedades y el editor XAML. Para abrir el diseñador XAML, haz clic con el botón secundario en una página XAML en el Explorador de soluciones y selecciona Diseñador de vistas.

Crear vistas

El diseñador XAML proporciona una vista XAML y una Vista de diseño sincronizada del marcado XAML que presenta la aplicación. Con un documento XAML abierto en Visual Studio, puedes alternar entre la Vista de diseño y la Vista XAML mediante las pestañas Diseño y XAML. En la Vista de diseño, la ventana que contiene la mesa de trabajo es la ventana activa y se puede utilizar como superficie de trabajo principal. Se puede utilizar para diseñar visualmente una página en la aplicación agregando o dibujando elementos y, a continuación, modificándolos. Para obtener más información, consulta Trabajar con elementos en el Diseñador XAML. Esta ilustración muestra la mesa de trabajo en la Vista de diseño.

Puedes usar el botón Intercambiar paneles para cambiar a la ventana que aparece en la parte superior: bien la mesa de trabajo o el editor XAML.

Estas características están disponibles en la mesa de trabajo:

• Guías de alineación
  Las guías de alineación son límites de alineación que aparecen en forma de líneas discontinuas de color rojo para mostrar cuando se alinean los bordes de los controles o las líneas base del texto. Los límites de alineación aparecen solamente cuando se habilita el ajuste a las guías de alineación.

• Raíles de la cuadrícula
  Los raíles de Grid se usan para administrar las filas y columnas en un panel de cuadrícula. Puedes crear y eliminar columnas y filas, y puedes ajustar el alto y el ancho relativos. El raíl de la cuadrícula vertical, que aparece a la izquierda de la mesa de trabajo, se usa para las filas y la línea horizontal, que aparece en la parte superior, se usa para las columnas.

• Adornos de cuadrícula
  Los adornos de Grid tienen forma de triángulo con una línea asociada vertical u horizontal en el raíl de Grid. Cuando se arrastra un adorno de Grid, los anchos o altos de las columnas o filas adyacentes se actualizan al mover el mouse.

  Los adornos de Grid se usan para controlar el ancho y alto de filas y columnas de Grid. Haz clic en los raíles de Grid para agregar columnas o filas nuevas. Cuando se agrega una nueva fila o línea de columna para un panel Grid que tenga dos o más columnas o filas, aparece una pequeña barra de herramientas fuera del raíl con la que podrás establecer el ancho y el alto explícitamente. Con esta pequeña barra de herramientas, podrás establecer las opciones de tamaño fijo, proporcional y automático para las filas y columnas de Grid.

• Controladores para cambiar el tamaño
  Los controladores para cambiar el tamaño aparecen en determinados controles con los que podrás cambiar el tamaño del control. Cuando se cambia el tamaño de un control, normalmente aparecen valores de ancho y alto para ayudar a ajustar el tamaño del control. Para obtener más información sobre cómo manipular los controles en la Vista de diseño, consulta Trabajar con elementos en el Diseñador XAML.

• Márgenes
  Los márgenes representan la cantidad de espacio fijo comprendido entre el borde de un control y el borde de su contenedor. Puedes establecer los márgenes de un control con las propiedades Margin en Diseño en la ventana Propiedades.

• Adornos de margen
  Puedes usar adornos de margen con el fin de cambiar los márgenes de un elemento relativo a su contenedor de diseño. Cuando un adorno de margen está abierto, no se ha establecido un margen y el adorno de margen muestra una cadena interrumpida. Cuando el margen no se establece, los elementos no se mueven de su sitio cuando se cambia el tamaño del contenedor de diseño en tiempo de ejecución. Cuando un adorno de margen está cerrado, muestra una cadena intacta y los elementos se moverán con el margen según se vaya cambiando el tamaño del contenedor de diseño en tiempo de ejecución (el margen permanece fijo).

• Controladores de elemento
  Puedes modificar un elemento si usas los controladores de elemento que aparecen en la mesa de trabajo cuanto desplazas el puntero sobre las esquinas de cuadro azul que rodea un elemento. Con estos controladores podrás girar, cambiar el tamaño, voltear o agregar un radio de redondeo al elemento. El símbolo del control del elemento varía según la función y los cambios según la ubicación exacta del puntero. Si no ves los controladores del elemento, asegúrate de que el elemento está seleccionado.

En la Vista de diseño, hay disponibles comandos adicionales de la mesa de trabajo en el área inferior izquierda de la pantalla, como se muestra aquí:

En esta barra de herramientas, se encuentran disponibles los siguientes comandos:

• Zoom
  Con el Zoom, puedes ajustar el tamaño de la superficie de diseño. Puedes hacer zoom del 12,5 % al 800 % o seleccionar opciones como Ajustar a la selección y Ajustar todo.

• Mostrar u ocultar cuadrícula de ajuste
  Muestra u oculta la cuadrícula de ajuste que muestra las líneas de la cuadrícula. Se usan las líneas de la cuadrícula cuando se habilita el ajuste de líneas de la cuadrícula o el ajuste a las guías de alineación.

• Activar o desactivar ajuste a las líneas de la cuadrícula
  Si habilitas el ajuste a las líneas de la cuadrícula al arrastrar un elemento en la mesa de trabajo, el elemento tiende a alinearse con las líneas de cuadrícula horizontales y verticales más próximas.

• Activar o desactivar ajuste a las guías de alineación
  Las guías de alineación te ayudan a alinear los controles entre sí. Si las guías de alineación están habilitadas, al arrastrar un control en relación con otros controles, los límites de alineación aparecen cuando los bordes y el texto de algunos controles están alineados horizontal o verticalmente. Los límites de alineación aparecen en forma de línea roja discontinua.

En la vista XAML, la ventana donde está el editor XAML es la ventana activa y el editor de XAML es la herramienta principal para lo que crees. El lenguaje XAML proporciona un vocabulario declarativo, basado en XML, para especificar la interfaz de usuario de una aplicación. La vista XAML incluye IntelliSense, formato automático, resaltado de sintaxis y navegación por etiquetas. En esta ilustración se muestra la vista XAML:

• Barra de vista en dos paneles
  La barra de vista en dos paneles aparece en la parte superior de la vista XAML cuando el editor XAML está en la ventana inferior. La barra de vista en dos paneles permite controlar los tamaños relativos de la Vista de diseño y la vista XAML. También puedes cambiar las ubicaciones de las vistas (con el botón Intercambiar paneles), especificar si las vistas van a estar organizadas en horizontal o en vertical y contraer cualquiera de las vistas.

• Zoom de marcado
  El zoom de marcado te permite ajustar el tamaño de la vista XAML. Puedes usar el zoom desde 20 % hasta 400 %.

Ventana Dispositivo

La ventana Dispositivo en el diseñador XAML para Visual Studio te permite simular varias vistas, presentaciones y opciones de presentación en tiempo de diseño para la aplicación. Este es su aspecto:

Estas son las opciones disponibles en la ventana Dispositivo:

• Vista
  Especifica la orientación y el diseño de la aplicación. Las plantillas de proyecto para las aplicaciones de la Tienda Windows compiladas mediante XAML (cuadrícula, dividida y vacía) pueden detectar y retransmitir las vistas anteriormente mencionadas. Cada página de plantillas proporciona estas vistas:

  • Horizontal. Vista de pantalla completa (A x Al). Esta es la vista predeterminado.

  • Snapped. Se muestra cuando el usuario acopla la aplicación a un lado. La aplicación se efectúa un movimiento panorámico en verticalmente en todas las páginas. En esta vista, la aplicación tiene 320 píxeles de ancho.

  • Relleno. Se mostrará cuando el usuario desplace dos aplicaciones a un lado. En esta vista, el ancho de la aplicación está restringido a 322 píxeles.

  • Vertical. Vista de pantalla completa (Al x A). En esta vista, se intercambian los valores de ancho y alto de la aplicación.

  En función de la vista definida por el usuario, se pueden deshabilitar algunas vistas. Por ejemplo, si estableces la resolución de pantalla a 1280x800, se deshabilitará el relleno y la posibilidad acoplar. Respecto a los contratos, es posible que algunos estados visuales, que se describen en la sección siguiente, no estén disponibles.

• Estado visual
  Especifica el estado actual del grupo de estados visuales ApplicationViewState que se debe mostrar para la modificación de la vista actual. Esta opción se deshabilitará si no se encuentran estos estados en el documento actual. (Los estados están incluidos y definidos de forma predeterminada en la plantilla de elemento Página básica en Visual Studio).

• Pantalla
  Especifica la resolución de pantalla del dispositivo para el que estás diseñando la aplicación.

• Tema
  Especifica el tema de la aplicación.

• Mostrar cromo
  Activa y desactiva el marco simulado de una tableta en torno a la aplicación en la Vista de diseño. Activa la casilla para mostrar el marco.

• Invalidar ajuste de escala
  Activa o desactiva la emulación de un documento ajustando la escala dentro de la superficie de diseño. De esta forma, podrás aumentar el porcentaje de la escala en un factor. Activa la casilla para activar la emulación. Por ejemplo, si el porcentaje de escala es 100 %, el documento dentro de la superficie de diseño ajustará su escala hasta 140 %. Esta opción se deshabilita si el porcentaje actual de escala es 180.

• Recortar para mostrar
  Especifica el modo de presentación. Activa la casilla para recortar el tamaño del documento al tamaño de la pantalla.

Ventana Esquema del documento

La ventana Esquema del documento en el diseñador XAML ayuda a realizar estas tareas:

• Ver la estructura jerárquica de todos los elementos de la mesa de trabajo.

• Selecciona elementos para poder modificarlos (moverlos por la jerarquía, modificarlos en la mesa de trabajo, establecer sus propiedades en la ventana Propiedades, etc.). Para obtener más información, consulta Trabajar con elementos en el Diseñador XAML.

• Crea y modifica plantillas para elementos que son controles.

• Usa el menú contextual para los elementos seleccionados. El mismo menú también está disponible para los elementos seleccionados en la mesa de trabajo.

Entre las opciones disponibles en la ventana Esquema del documento, se incluyen:

• Esquema del documento
  La vista principal de la ventana Esquema del documento muestra la jerarquía de un documento en una estructura de árbol. Puedes usar la naturaleza jerárquica del esquema del documento para examinar el documento en los distintos niveles de detalle, y bloquear y ocultar elementos de forma independiente o en grupos.

• Mostrar u ocultar
  Muestra u oculta los elementos de la mesa de trabajo que corresponden a los elementos del Esquema del documento. Usa los botones Mostrar u ocultar (aparece un símbolo de un ojo si se muestra), o presiona CTRL+H para ocultar elementos y SHIFT+CTRL+H para mostrarlos.

• Bloquear y desbloquear
  Bloquea o desbloquea los elementos de la mesa de trabajo que corresponden a los elementos del Esquema del documento. Los elementos bloqueados no pueden modificarse. Usa los botones Bloquear y desbloquear (aparece un símbolo de un candado cuando están bloqueados) o presiona CTRL+L para bloquear elementos y SHIFT+CTRL+L para desbloquearlos.

• Devolver ámbito a
  La opción en la parte superior de la ventana Esquema de documento (aparece un símbolo de flecha arriba) devuelve el esquema del documento al ámbito anterior. Esta opción solo es aplicable cuando se está en el ámbito de un estilo o una plantilla.

Ventana Propiedades

La ventana Propiedades permite establecer valores de propiedad en los controles. Este es su aspecto:

En la parte superior de la ventana Propiedades, hay varias opciones. Puedes cambiar el nombre del elemento actualmente seleccionado en el cuadro Nombre. En la esquina superior izquierda, hay un icono que representa el elemento actualmente seleccionado. Para organizar las propiedades por categoría o alfabéticamente, haz clic en Categoría, Nombre u Origen en la lista Organizar por. Para ver la lista de eventos de un control, haz clic en el botón Eventos, que muestra un símbolo de rayo. Para buscar una propiedad, empieza a escribir su nombre en el cuadro Buscar. La ventana Propiedades muestra las propiedades que coinciden con su búsqueda cuando escribe. Algunas propiedades te permiten establecer propiedades avanzadas seleccionando un botón de flecha abajo. Para obtener más información sobre el uso de propiedades y el control de eventos, consulta Tutorial rápido: agregar controles y controlar eventos

A la derecha de cada valor de propiedad se encuentra un marcador de propiedad que aparece en forma de símbolo de cuadro. La apariencia de la propiedad indica si se ha aplicado a la propiedad un recurso o enlace de datos. Por ejemplo, un símbolo de cuadro blanco indica un valor predeterminado, un símbolo de cuadro negro indica, por lo general, que se ha aplicado a un recurso local, y un cuadro naranja suele indicar que se ha aplicado un enlace de datos. Al hacer clic en el marcador de propiedad, puedes navegar a la definición de un estilo, abrir el generador de enlaces de datos o abrir un selector de recursos.

Vea también

Tareas

Cómo crear y aplicar un recurso

Cómo: Enlazar datos en el diseñador de XAML

Conceptos

Trabajar con elementos en el Diseñador XAML

Otros recursos

How to set a gradient brush on a control

Resource dictionaries

Referencia de UI del Diseñador XAML