XML Documentation

Contents
Herramientas XAML en Visual Studio

Información general sobre XAML
Editor de código XAML
XAML Designer
Diseño de XAML en Visual Studio y Blend
Información general del Diseñador XAML
Trabajo con elementos
Organizar objetos en contenedores de diseño
Crear y aplicar un recurso
Tutorial: Enlazar a datos
Depuración o desactivación del código de proyecto
Datos en tiempo de diseño de XAML
Blend para Visual Studio
Información general
Dibujar formas y trazados
Modificación del estilo de objetos
Animar objetos
Mostrar datos
Referencia
Errores y advertencias de XAML
Métodos abreviados de teclado para el Diseñador XAML
Métodos abreviados de teclado para Blend
Teclas modificadoras de la mesa de trabajo (Blend)
Teclas modificadoras de la herramienta Lápiz (Blend)
Teclas modificadoras de la herramienta Selección directa (Blend)
Depuración de XAML
Inspeccionar las propiedades XAML durante la depuración
Recarga activa de XAML
Escribir y depurar código XAML en ejecución
Solucionar problemas
Depurar XAML en Blend
Depuración de aplicaciones para UWP >>
Windows Presentation Foundation (WPF)
Primeros pasos
Depuración de aplicaciones de WPF
Depurar WPF
Usar el visualizador de árboles de WPF
Mostrar información de seguimiento de WPF
Información general de XAML
14/05/2021 • 2 minutes to read
El lenguaje XAML (XAML) es un lenguaje declarativo basado en XML. XAML se usa mayoritariamente en estos
tipos de aplicaciones para crear interfaces de usuario:
Aplicaciones de Windows Presentation Foundation (WPF)
Aplicaciones de la Plataforma universal de Windows (UWP)
Aplicaciones de Xamarin.Forms
El código XAML siguiente define un control de botón sencillo.
<Button Click="ButtonClick">Show updates</Button>
XAML también se usa para definir flujos de trabajo en las aplicaciones de Windows WorkFlow Foundation (WF).

En el editor de código XAML del IDE de Visual Studio se incluyen todas las herramientas que necesita para crear
aplicaciones WPF y para UWP para la plataforma Windows y Xamarin.Forms. Aunque el IDE (Entorno de
desarrollo integrado) de Visual Studio tiene muchas características que puede usar para desarrollar aplicaciones
para otras plataformas, también tiene algunas que son exclusivas de XAML.
XAML Designer
Visual Studio y Blend para Visual Studio proporcionan un Diseñador XAML que facilita la creación de interfaces
de usuario (IU) para aplicaciones WPF, para UWP y Xamarin.Forms. Puede arrastrar controles desde la ventana
de Recursos o del cuadro de herramientas y establecer propiedades en la ventana Propiedades. Cuando lo haga,
Visual Studio y Blend para Visual Studio crean el código XAML correspondiente. Si prefiere editar directamente
el código XAML, también puede hacerlo.
Novedades
Consulte los recursos siguientes para obtener la información más reciente:
La entrada de blog Mejoras en las herramientas XAML en Visual Studio 2019 versión 16.7
Preview 1
La entrada de blog Novedades en las herramientas de desarrollo de XAML en Visual Studio 2019
El vídeo Nuevas características de XAML en Visual Studio en YouTube
Vea también
XAML en aplicaciones de WPF
XAML en aplicaciones de UWP
XAML en aplicaciones de Xamarin.Forms
El editor de código XAML del IDE de Visual Studio incluye todas las herramientas que necesita para crear
aplicaciones WPF y para UWP para la plataforma Windows y Xamarin.Forms. En este artículo se describe el
papel que desempeña el editor de código cuando se desarrollan aplicaciones basadas en XAML y las
características que son exclusivas del editor de código XAML de Visual Studio 2019.
Para empezar, se examinará el IDE (entorno de desarrollo integrado) con un proyecto de WPF abierto. En la
imagen siguiente se muestran algunas de las herramientas clave del IDE que se van a usar junto con el editor de
código XAML.
Desde la parte inferior izquierda de la imagen en sentido de las agujas del reloj, las herramientas clave del IDE
son las siguientes:
La ventana del editor de código de XAML (el tema de este artículo) donde se crea y edita el código.
La ventana Diseñador XAML , donde se diseña la interfaz de usuario.
La ventana acoplable Cuadro de herramientas , donde se agregan controles a la interfaz de usuario.
El botón Depurar , donde se ejecuta el código y se depura.
(También puede editar el código en tiempo real mientras realiza la depuración con Recarga activa de XAML).
La ventana Explorador de soluciones , donde se administran los archivos, los proyectos y las soluciones.
La ventana Propiedades , donde se cambia la apariencia de la interfaz de usuario y el funcionamiento de
sus controles.
Para continuar, obtendrá más información sobre el editor de código XAML.
Interfaz de usuario del editor de código XAML

Mientras que la ventana del editor de código para aplicaciones XAML comparte algunos elementos de la interfaz
de usuario (IU) que también aparecen en el IDE estándar, además incluye algunas características únicas que
facilitan el desarrollo de aplicaciones XAML.
A continuación se muestra la propia ventana del editor de código XAML.
Ahora se examinarán las funciones de cada uno de los elementos de la interfaz de usuario en el editor de
código.
Primera fila
En la primera fila de la parte superior de la ventana de código XAML, a la izquierda, hay una pestaña Diseño , un
botón Intercambiar paneles , una pestaña XAML y un botón XAML emergente.
Este es su funcionamiento:
La pestaña Diseño cambia el foco del editor de código XAML al Diseñador XAML.
El botón Intercambiar paneles invierte la ubicación del Diseñador XAML y el editor de código XAML en el
IDE.
La pestaña XAML vuelve a cambiar el foco al editor de código XAML.
El botón emergente XAML crea una ventana del editor de código XAML independiente fuera del IDE.
Continuando a la derecha, hay un botón División ver tical , un botón División horizontal y un botón
Contraer panel .
Este es su funcionamiento:
El botón División ver tical cambia la ubicación del Diseñador XAML y el editor de código XAML en el IDE de
una alineación horizontal a vertical.
El botón División horizontal cambia la ubicación del Diseñador XAML y el editor de código XAML en el IDE
de una alineación vertical a horizontal.
El botón Contraer panel permite contraer lo que se encuentra en el panel inferior, ya sea el editor de código
o el diseñador. (Para restaurar el panel inferior, vuelva a elegir el mismo botón, que ahora se denomina
Expandir panel ).
Segunda fila
En la segunda fila de la parte superior de la ventana de código XAML, hay dos listas desplegables Ventana. Pero
si observa la información sobre herramientas de estos elementos de la interfaz de usuario, los identifica como
"Elemento: Ventana" y "Miembro: Ventana".
Las listas desplegables Ventana tienen funciones diferentes, como se indica a continuación:
La lista Elemento: Ventana de la izquierda permite ver y navegar a elementos principales o del mismo
nivel.
En concreto, se muestra una vista de tipo esquema en la que se revela la estructura de etiquetas del
código. Al seleccionar en la lista, el foco en el editor de código se ajustará a la línea de código en la que se
incluya el elemento que ha seleccionado.
La lista Miembro: Ventana de la derecha permite ver y navegar a atributos o elementos secundarios.
En concreto, muestra una lista de las propiedades del código. Al seleccionar en la lista, el foco en el editor
de código se ajustará a la línea de código en la que se incluya la propiedad que ha seleccionado.
Panel central, editor de código

El panel central es la parte de "código" del editor de código XAML. Incluye la mayoría de las características que
encontrará en el editor de código del IDE. Se describirán algunas de las características del IDE universal que
pueden ayudarle a desarrollar el código XAML. También se resaltarán las características únicas de XAML en el
IDE.
Acciones rápidas
Puede usar Acciones rápidas para refactorizar, generar o modificar el código de otra manera con una sola
acción.
Por ejemplo, una tarea útil que puede realizar mediante Acciones rápidas es Eliminar instrucciones Using
innecesarias del código de C# en la pestaña MainWindow.xaml.cs .
A continuación se muestra cómo hacerlo:
1. Mantenga el puntero sobre una instrucción Using, elija el icono de bombilla y, después, seleccione
Eliminar instrucciones Using innecesarias en la lista desplegable.
2. Elija si quiere corregir todas las repeticiones en el Documento , el Proyecto o la Solución .
3. Vea el cuadro de diálogo Vista previa y después elija Aplicar .
También puede acceder a esta característica desde la barra de menús. Para ello, elija Editar > IntelliSense >
Eliminar y ordenar instrucciones Using .
Para obtener más información sobre la configuración de las instrucciones Using, vea la página Ordenación de
instrucciones Using. Para obtener más información sobre IntelliSense, vea la página IntelliSense en
Visual Studio. Y, para obtener más información sobre las formas típicas en que los desarrolladores usan
Acciones rápidas, vea la página Acciones rápidas comunes.
Seguimiento de cambios
El color del margen izquierdo le permite realizar un seguimiento de los cambios realizados en un archivo. Aquí
se muestra la relación de los colores con las acciones que se realizan:
Los cambios que haya realizado pero no se hayan guardado desde que se ha abierto el archivo se indican
mediante una barra amarilla en el margen izquierdo (conocido como margen de selección).
Una vez que haya guardado los cambios (pero antes de cerrar el archivo), la barra se volverá de color
verde .
Para activar o desactivar esta característica, cambie la opción Seguimiento de cambios en la configuración del
Editor de texto (Herramientas > Opciones > Editor de texto ).
Para obtener más información sobre el seguimiento de cambios, e incluir las líneas onduladas (también
conocidas como "garabatos") que aparecen bajo las cadenas de código, vea la sección Características del
editor de la página Características del editor de código de Visual Studio.
Clic con el botón derecho en el menú contextual
Al modificar el código en el editor de código XAML, hay varias características a las que se puede acceder
mediante el menú contextual. La mayoría de estas características están disponibles de forma universal en el IDE
de Visual Studio, mientras que otras son específicas del uso de un editor de código junto con una ventana de
diseño.
Esto es lo que hace cada característica y su utilidad:

Ver código : abre la ventana de código del lenguaje de programación, que normalmente se muestra junto a
la vista predeterminada que incluye la ventana Diseño y el editor de código XAML.
Diseñador de vistas : abre la vista predeterminada que incluye la ventana Diseño y el editor de código
XAML. (Si ya está en la vista predeterminada, no hace nada).
Acciones rápidas y refactorizaciones : permite refactorizar, generar o modificar el código con una sola
acción. Al mantener el mouse sobre el código, verá un icono de bombilla cuando haya disponible una acción
rápida o una refactorización.
Vea también: Acciones rápidas y Refactorización del código.
Cambiar nombre... : solo cambia el nombre de los espacios de nombres. Si no tiene un espacio de nombres
para cambiar el nombre, recibirá un mensaje de error que indica "Solo se puede cambiar el nombre de los
prefijos de espacio de nombres".
Quitar y ordenar espacios de nombres : quita los espacios de nombres sin usar y, después, ordena los
que queden.
Ver la definición : obtiene una vista previa de la definición de un tipo sin abandonar la ubicación actual en
el editor.
Vea también: Ver la definición y Visualización y edición de código mediante Ver la definición.
Ir a definición : se desplaza hasta el origen de un tipo o miembro, y abre el resultado en una pestaña nueva.
Vea también: Ir a definición.
Rodear con... : permite usar fragmentos de código envolventes, que se agregan alrededor de un bloque de
código seleccionado.
Vea también: Fragmentos de código de expansión y fragmentos de código Rodear con.
Inser tar fragmento de código : inserta un fragmento de código en la ubicación del cursor.
Cor tar : no necesita explicación.
Copiar : no necesita explicación.
Pegar : no necesita explicación.
Esquematización : sirve para expandir y contraer secciones de código.
Vea también: Esquematización.
Control de código fuente : permite ver el historial de las contribuciones de código a un repositorio de
código abierto.
Panel central, barra de desplazamiento
La barra de desplazamiento puede hacer más que desplazarse por el código. También se puede usar para abrir
otro panel del editor de código. Además, puede utilizar la barra de desplazamiento como ayuda para codificar
de forma más eficaz mediante la adición de anotaciones o el uso de otros modos de presentación.
División de la ventana de código
En la barra de desplazamiento del editor de código, hay un botón Dividir en la parte superior derecha. Al
elegirlo, puede abrir otro panel del editor de código. Esto resulta útil porque funcionan de forma independiente,
por lo que puede usarlos para trabajar en código en diferentes ubicaciones.
Para obtener más información sobre cómo dividir una ventana del editor, vea la página Administración de
ventanas del editor.
Uso de anotaciones o el modo de mapa
También puede cambiar la apariencia de la barra de desplazamiento y las características adicionales que
contiene. Por ejemplo, a muchos usuarios les gusta incluir anotaciones en la barra de desplazamiento, que
proporcionan indicaciones visuales como cambios de código, puntos de interrupción, marcadores, errores y la
posición del símbolo de inserción.
Otros prefieren usar el modo de mapa, que muestra líneas de código en miniatura en la barra de
desplazamiento. Es posible que los desarrolladores que tienen gran cantidad de código en un archivo
comprueben que el modo de mapa realiza un seguimiento más eficaz de las líneas de código que la barra de
desplazamiento predeterminada.
Para obtener más información sobre cómo cambiar la configuración predeterminada de la barra de
desplazamiento, vea la página Personalización de la barra de desplazamiento.
Características específicas de XAML

La mayoría de las características siguientes están disponibles de manera universal en el IDE de Visual Studio,
pero se han agregado dimensiones a algunas de ellas que facilitan la programación para los desarrolladores de
XAML.
Fragmentos de código de XAML
Los fragmentos de código son pequeños bloques de código reutilizable que se pueden insertar en un archivo de
código mediante el comando del menú contextual Inser tar fragmento de código , o bien una combinación de
métodos abreviados de teclado (Ctrl +K , Ctrl +X ). Se ha mejorado IntelliSense para admitir la visualización de
fragmentos de código XAML, lo que funciona tanto en fragmentos de código integrados como en los
fragmentos de código personalizados que agregue de forma manual. Algunos fragmentos de código XAML
predeterminados son #region , Column definition , Row definition , Setter y Tag .
Para obtener más información, vea las páginas Fragmentos de código y Fragmentos de código de C#.
Compatibilidad con #region de XAML
A partir de Visual Studio 2015, la compatibilidad con #region se puso a disposición de los desarrolladores de
XAML en WPF y UWP, y más recientemente, también en Xamarin.Forms. En Visual Studio 2019, se siguen
realizando mejoras incrementales para admitir #region. Por ejemplo, en la versión 16.4 y posteriores, las
opciones de #region se muestran cuando comienza a escribir <! .
Puede usar las regiones si quiere agrupar las secciones del código que también quiere expandir o contraer.

Your code is here

Para obtener más información sobre las regiones, vea la página #region (referencia de C#). Y para obtener más
información sobre cómo expandir y contraer secciones de código, vea la página Esquematización.
Comentarios de XAML
A menudo, los desarrolladores prefieren documentar el código mediante comentarios. Puede agregar
comentarios al código XAML que se encuentra en la pestaña MainWindow.xaml de las siguientes maneras:
Escriba  después del comentario.
Escriba <! y, luego, elija !-- en la lista de opciones.
Seleccione el código que quiera rodear con un comentario y, después, elija el botón Comentario de la
barra de herramientas del IDE. Para invertir la acción, elija el botón Quitar marca de comentario .
Seleccione el código que quiera rodear con un comentario y, después, presione Ctrl +K , Ctrl +C . Para
quitar el comentario del código seleccionado, presione Ctrl +K , Ctrl +U .
Para obtener más información sobre cómo usar los comentarios en el código de C# que se encuentra en la
pestaña MainWindow.xaml.cs , vea la página Comentarios de documentación.
Bombillas de XAML
Los iconos de bombilla que aparecen en el código XAML forman parte de las Acciones rápidas que puede usar
para refactorizar, generar o modificar el código.
Estos son algunos ejemplos de cómo puede mejorar la experiencia de programación de XAML:
Quitar espacios de nombres no necesarios . En el editor de código XAML, los espacios de nombres
innecesarios aparecen en texto atenuado. Si mantiene el cursor sobre un uso innecesario, aparecerá una
bombilla. Al elegir la opción Quitar espacios de nombres innecesarios de la lista desplegable, verá
una vista previa de los que puede quitar.
Cambiar el nombre del espacio de nombres . Esta característica, que está disponible en el menú
contextual después de resaltar un espacio de nombres, facilita el cambio de varias instancias de un valor
al mismo tiempo. También puede acceder a esta característica mediante la barra de menús, Editar >
Refactorizar > Cambiar nombre , o bien si presiona Ctrl +R y después Ctrl +R de nuevo.
Para obtener más información, vea la página Refactorización de cambio de nombre de un símbolo de
código.
Código XAML condicional para UWP
El XAML condicional ofrece una manera de usar el método ApiInformation.IsApiContractPresent en el marcado
XAML. Esto te permite establecer las propiedades y crear instancias de objetos en el marcado en función de la
presencia de una API, sin tener que usar código subyacente.
Para obtener más información, vea las páginas XAML condicional y Hospedaje de controles XAML para UWP en
aplicaciones de escritorio (islas XAML).
Visualizador de estructura de XAML
La característica Visualizador de estructura del editor de código muestra líneas guía de estructura, que son
líneas discontinuas verticales que indican los elementos de etiqueta de apertura y cierre coincidentes en el
código. Estas líneas verticales facilitan ver dónde empiezan y acaban los bloques lógicos.
Para obtener más información, vea la página Navegación por el código.
IntelliCode para lenguaje XAML
Cuando se agrega una etiqueta XAML al código, normalmente se empieza con un corchete angular de apertura
< . Al escribir ese corchete angular, aparece un menú de IntelliCode en el que se enumeran algunas de las
etiquetas XAML más populares. Elija la que quiera agregar rápidamente al código.
Puede reconocer las selecciones de IntelliCode porque aparecen en la parte superior de la lista y tienen estrellas.
Para obtener más información, vea la página Introducción a IntelliCode.

Configuración
Para obtener más información sobre todos los valores del IDE de Visual Studio, vea la página Características del
editor de código.
Valores opcionales de XAML

Puede usar el cuadro de diálogo Opciones para cambiar los valores predeterminados del editor de código de
XAML. Para ver los valores, elija Herramientas > Opciones > Editor de texto > XAML .
NOTE
También puede usar métodos abreviados de teclado para acceder al cuadro de diálogo Opciones. Esta es la manera de
hacerlo: Presione Ctrl+Q para buscar en el IDE, escriba Opciones y, después, presione Entrar . A continuación, presione
Ctrl+E para buscar en el cuadro de diálogo Opciones, escriba Editor de texto , presione Entrar , escriba XAML y,
después, presione Entrar .
Para obtener más información sobre los métodos abreviados de teclado, vea Sugerencias de accesos directos para
Visual Studio.
Opciones universales del editor de texto

En el cuadro de diálogo Opciones para XAML, los tres primeros elementos siguientes son universales para todos
los lenguajes de programación que admite el IDE de Visual Studio. Visite la información con vínculos de la tabla
siguiente para obtener más información sobre estas opciones y cómo usarlas.
N O M B RE M Á S IN F O RM A C IÓ N
General Cuadro de diálogo Opciones: Editor de texto > Todos los

lenguajes
Barras de desplazamiento Opciones, Editor de texto, Todos los idiomas, Barras de

desplazamiento
Tabulaciones Opciones, editor de texto, todos los lenguajes, pestañas
Opciones del editor de texto específicas de XAML

En la tabla siguiente se enumeran los valores del cuadro de diálogo Opciones que pueden mejorar la
experiencia de edición al desarrollar aplicaciones basadas en XAML. Visite la información con vínculos para
obtener más información sobre estas opciones y cómo usarlas.
N O M B RE M Á S IN F O RM A C IÓ N
Formato Opciones, Editor de texto, XAML, Formato
Varios Opciones, editor de texto, XAML y varios
TIP
La opción Poner en mayúscula el nombre de método del controlador de eventos de la sección Varios es
especialmente útil para los desarrolladores de XAML. Esta opción está desactivada de forma predeterminada porque es
nueva, pero se recomienda activarla para admitir el uso de mayúsculas adecuado en el código.
Pasos siguientes
Para obtener más información sobre cómo editar el código en tiempo real mientras ejecuta la aplicación en
modo de depuración, vea la página Recarga activa de XAML.
Vea también
Características del editor de código de Visual Studio
Desarrollo de aplicaciones móviles de Xamarin (Mac)
Visual Studio 2019 para Mac: paseo por el IDE (Mac)
Diseño de XAML en Visual Studio y Blend para
Visual Studio
Las herramientas visuales de Visual Studio y Blend para Visual Studio permiten crear interfaces de usuario
atractivas y experiencias multimedia enriquecidas con XAML para diversos tipos de aplicaciones. Ambos
entornos de desarrollo integrado (IDE) comparten un conjunto de características en común, incluido un editor
de XAML visual (diseñador). Blend para Visual Studio, que admite las plataformas WPF y UWP, brinda
herramientas adicionales para diseñar estados visuales y crear animaciones.
Puede alternar entre Visual Studio y Blend para Visual Studio e incluso puede tener el mismo proyecto abierto
en ambos IDE al mismo tiempo. Los cambios guardados en los archivos XAML en un IDE pueden aplicarse a
través de recarga automática cuando se cambia al otro IDE. Puede controlar el comportamiento de recarga Si
navega a herramientas > Opciones > entorno > documentos en cualquiera de los dos IDE.
Instalación
Para crear aplicaciones de WPF, instale la carga de trabajo Desarrollo de escritorio de .NET en
Visual Studio. También se instalará Blend para Visual Studio.
Para crear aplicaciones de UWP, instale la carga de trabajo Desarrollo de Plataforma universal de
Windows en Visual Studio. También se instalará Blend para Visual Studio.
Para crear aplicaciones de Xamarin.Forms, instale la carga de trabajo Desarrollo para dispositivos
móviles con .NET en Visual Studio. Blend para Visual Studio no se instala. Blend no admite las
aplicaciones de Xamarin.Forms.
Funcionalidades compartidas
Para realizar las tareas de desarrollo más fundamentales, Visual Studio y Blend para Visual Studio comparten el
mismo conjunto de ventanas y funcionalidades, con ciertas diferencias sutiles. Estos son algunos de los aspectos
destacados:
IntelliSense: Ambos IDE admiten funciones de IntelliSense, como la finalización de instrucciones.
Depuración: Puede depurar en Visual Studio y Blend para Visual Studio, incluida la configuración de
puntos de interrupción en el código para depurar una aplicación en ejecución y usar la recarga activa
para cambiar el código XAML mientras se ejecuta la aplicación. Para mantener una experiencia de
depuración coherente con Visual Studio, Blend para Visual Studio incluye la mayoría de las barras de
herramientas y ventanas de depuración de Visual Studio.
Recarga de archivos: Puede editar los archivos XAML en Visual Studio o en Blend para Visual Studio.
Los archivos editados guardados se recargan automáticamente cuando cambia entre los IDE. Puede
controlar el comportamiento de recarga Si navega a herramientas > Opciones > entorno >
documentos en cualquiera de los dos IDE.
Diseños y configuraciones sincronizados: Los diseños y las preferencias de configuración de la
ventana de herramientas de personalización de diseño para Visual Studio o Blend para Visual Studio se
sincronizan en los dispositivos y versiones cuando se inicia sesión con la misma cuenta de
personalización. Vea Sincronizar la configuración de Visual Studio en varios equipos.
Funcionalidades avanzadas de Blend para Visual Studio

Para aumentar la productividad, considere el uso de Blend para Visual Studio para las siguientes tareas. Estas
son las áreas en las que Blend para Visual Studio ofrece más funcionalidad que el diseñador de Visual Studio o
el código por sí solos.
P RO GRA M A PA RA L A B L EN D PA RA VISUA L
TA REA M E JO RA ST UDIO M Á S IN F O RM A C IÓ N
Diseñar estados visuales No hay ninguna Use las herramientas de Estados visuales
herramienta que lo ayude a diseño para cambiar la
diseñar estados visuales, apariencia de un control
debe crearlos mediante según su estado.
programación.
Crear animaciones No hay ninguna Puede crear animaciones Animar objetos

herramienta de diseño para visualmente y verlas
animaciones; debe crearse previamente en Blend para
mediante programación. Visual Studio. Esto es más
Esto requiere tener rápido y preciso que la
conocimientos del sistema compilación de las
de animación y animaciones en el código.
temporización en WPF y Puede agregar
una amplia experiencia en desencadenadores para
codificación. controlar la interacción del
usuario y puede cambiar al
código para agregar
controladores de eventos y
otras funciones.
Conver tir formas y No compatible. Puede realizar cambios Dibujar formas y trazados
texto en trazados para sutiles o espectaculares en
una manipulación más las formas (como
fácil rectángulos y elipses) si las
convierte en trazados,
logrando así un mejor
control de la edición. Puede
cambiar la forma de los
trazados, combinarlo y crear
trazados compuestos de
varias formas.
También puede convertir

bloques de texto en
trazados para manipularlos
como imágenes vectoriales.
Editar controles, Requiere codificación y Convierta cualquier imagen Modificación del estilo de
plantillas y estilos conocimientos de plantillas en un control. objetos
y estilos WPF.
Utilice las herramientas de
edición de plantillas para
realizar cambios en
controles, estilos y plantillas
con unos pocos clics del
ratón.
Por ejemplo, puede usar

recursos de estilo de Blend
para Visual Studio para
implementar controles WPF
comunes (como botones,
cuadros de lista, barras de
desplazamiento, menús,
etc.) y cambiar su color,
estilo o plantilla subyacente
directamente en Blend para
Visual Studio. A
continuación, puede
cambiar a código para dar
los últimos retoques si lo
desea.
Conectar la interfaz de Puede crear un origen a En el caso de las Mostrar datos

usuario a los datos partir de recursos como aplicaciones de
SQL Server Database, WCF .NET Framework, cree datos
o un servicio web, objeto o de ejemplo de manera
lista de SharePoint y, luego, sencilla para crear
enlace el origen de datos a prototipos y realizar
los controles de la interfaz pruebas. y cambie a datos
de usuario. reales cuando esté listo.
Los datos en tiempo de Las capacidades de

diseño deben crearse generación de datos de
manualmente para una Blend para Visual Studio
experiencia de diseño son excepcionales (puede
interactivo. agregar nombres, números,
direcciones URL y
fotografías de manera fácil y
rápida) y pueden ahorrarle
mucho tiempo.
Para datos reales, puede

enlazar los controles de
interfaz de usuario a un
archivo XML o a cualquier
origen de datos CLR.
Para obtener más información sobre el diseño XAML avanzado, vea Creación de una interfaz de usuario con
Blend para Visual Studio.
Vea también
Introducción a XAML
Introducción de Blend para Visual Studio
Crear una IU con el Diseñador XAML
El Diseñador XAML en Visual Studio y Blend para Visual Studio proporciona una interfaz visual para ayudarle a
diseñar aplicaciones basadas en XAML, como WPF y UWP. Puede crear interfaces de usuario para sus
aplicaciones arrastrando controles desde la ventana Cuadro de herramientas (ventana Recursos en Blend para
Visual Studio) y estableciendo propiedades en la ventana Propiedades. También puede modificar el XAML
directamente en la vista XAML.
En el caso de los usuarios avanzados, incluso es posible personalizar el Diseñador XAML.
NOTE
Xamarin.Forms no admite un diseñador XAML. Para ver las uri de XAML de Xamarin.Forms y editarlas mientras se ejecuta
la aplicación, use Recarga activa de XAML para Xamarin.Forms. Para obtener más información, vea la página Recarga activa
de XAML para Xamarin.Forms (versión preliminar).
Área de trabajo del Diseñador XAML

El área de trabajo en el Diseñador XAML consta de varios elementos de la interfaz visual. Estos incluyen la mesa
de trabajo (que es la superficie de diseño visual), el editor XAML, la ventana Esquema del documento (la ventana
Objetos y escala de tiempo en Blend para Visual Studio) y la ventana Propiedades. Para abrir el Diseñador XAML,
haga clic con el botón derecho en un archivo XAML en el Explorador de soluciones y elija Ver diseñador .
El Diseñador XAML proporciona una vista XAML y una vista Diseño sincronizada del marcado XAML
representado de la aplicación. Con un archivo XAML abierto en Visual Studio o en Blend para Visual Studio,
puede cambiar entre la vista Diseño y la vista XAML mediante las pestañas Diseño y XAML . Puede usar el
botón Intercambiar paneles para cambiar la ventana que aparece en la parte
superior: la mesa de trabajo o el editor XAML.
Vista de diseño
En la vista Diseño, la ventana que contiene la mesa de trabajo es la ventana activa y se puede usar como
superficie de trabajo principal. Puede usarla para diseñar visualmente una página en la aplicación si agrega,
dibuja o modifica elementos. Para más información, consulte Trabajar con elementos en el Diseñador XAML. Esta
ilustración muestra la mesa de trabajo en la vista Diseño.
Las siguientes 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 como líneas discontinuas de color rojo para
mostrar cuándo se alinean los bordes de los controles o cuándo se alinean las líneas base de texto. Los límites
de alineación aparecen solamente cuando está habilitado el ajuste a las guías de alineación .
Raíles Grid
Los raíles de cuadrícula se usan para administrar las filas y columnas en un panel de cuadrícula. Puede crear y
eliminar filas y columnas, así como ajustar el alto y el ancho relativos. El raíl Grid vertical, que aparece a la
izquierda de la mesa de trabajo, se usa para las filas, mientras que la línea horizontal, que aparece en la parte
superior, se usa para las columnas.
Controles Adorner de Grid
Un control Adorner de Grid aparece como un triángulo con una línea vertical u horizontal asociada a él en el raíl
Grid. Cuando se arrastra un control Adorner de Grid, el ancho o el alto de las filas o las columnas adyacentes se
actualiza al mover el mouse.
Los controles Adorner de Grid se usan para controlar el ancho y alto de las filas y las columnas de Grid. Puede
agregar una columna o fila nuevas haciendo clic en el raíl Grid. Cuando se agrega una línea de fila o columna
nueva para un panel Grid que tiene dos o más columnas o filas, aparece una minibarra de herramientas fuera
del raíl que permite establecer explícitamente el ancho y el alto. La minibarra de herramientas permite
establecer las opciones de ajuste de tamaño de las filas y columnas Grid.
Controladores de tamaño
Los controladores de tamaño aparecen en los controles seleccionados y le permiten cambiar el tamaño del
control. Cuando cambia el tamaño de un control, suelen aparecer los valores de ancho y alto para ayudarle a
ajustar el tamaño del control. Para más información sobre cómo manipular los controles en la vista Diseño ,
consulte 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. Puede establecer los márgenes de un control mediante propiedades Margin en Diseño en la
ventana Propiedades .
Controles Adorner de margen
Use los controles Adorner de margen para cambiar los márgenes de un elemento con respecto a su contenedor
de diseño. Cuando un control Adorner de margen está abierto, no se establece un margen y el control Adorner
de margen muestra una cadena rota. Cuando el margen no está establecido, los elementos permanecen en su
lugar cuando se cambia el tamaño del contenedor de diseño en tiempo de ejecución. Cuando el control Adorner
de margen está cerrado, dicho control muestra una cadena intacta y los elementos se mueven con el margen
cuando se cambie el tamaño del contenedor de diseño en tiempo de ejecución (el margen permanece fijo).
Manipuladores de elemento
Puede modificar un elemento con los manipuladores de elemento que aparecen en la mesa de trabajo cuando
se mueve el puntero del mouse sobre los vértices del cuadro azul que rodea al elemento. Estos manipuladores
permiten girar, cambiar el tamaño, voltear, mover o agregar un radio de redondeo al elemento. El símbolo del
manipulador de elemento varía según la función y cambia según la ubicación exacta del puntero. Si no ve los
manipuladores de elemento, asegúrese de que el elemento está seleccionado.
En la vista Diseño , en el área inferior izquierda de la ventana, están disponibles otros comandos de la mesa de
trabajo, tal como se muestra aquí:
Estos comandos están disponibles en esta barra de herramientas:

Zoom
El zoom le permite cambiar el tamaño de la superficie de diseño. Puede usar un zoom con un valor del 12,5 % al
800 %, o bien seleccionar opciones como Ajustar a la selección y Ajustarse a todos .
Mostrar u ocultar cuadrícula de ajuste
Muestra u oculta la cuadrícula de ajuste que hace visibles las líneas de cuadrícula. Las líneas de cuadrícula se
usan al habilitar Ajustar a las líneas de cuadrícula o Ajustar a las guías de alineación .
Activar o desactivar el ajuste a las líneas de cuadrícula
Si el ajuste a las líneas de cuadrícula está habilitado, un elemento tiende a alinearse con las líneas de
cuadrícula horizontales y verticales más cercanas al arrastrarlo a la mesa de trabajo.
Alternar el fondo de la mesa de trabajo
Alterna entre un fondo claro y uno oscuro.
Activar o desactivar el ajuste a las guías de alineación
Las guías de alineación le ayudan a alinear los controles entre sí. Si el ajuste a las guías de alineación está
habilitado, al arrastrar un control en relación con otros controles, aparecerán los límites de alineación cuando
los bordes y el texto de algunos controles estén alineados horizontal o verticalmente. El límite de alineación es
una línea roja discontinua.
Deshabilitar el código de proyecto
Deshabilita el código de proyecto, por ejemplo, los controles personalizados y los convertidores de valores, y
recarga el diseñador.
Vista XAML
En la vista XAML , la ventana que contiene el editor XAML es la ventana activa, y el Editor XAML es la
herramienta de creación principal. 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 la imagen siguiente se muestra una vista XAML con un
menú de IntelliSense abierto:
Ventana Esquema del documento

La ventana Esquema del documento de Visual Studio es similar a la ventana Objetos y escala de tiempo de
Blend para Visual Studio. Esquema de documento le ayuda a realizar estas tareas:
Ver la estructura jerárquica de todos los elementos de la mesa de trabajo.
Seleccione elementos para poder modificarlos. Por ejemplo, puede moverlos por la jerarquía o establecer
sus propiedades en el ventana Propiedades. Para más información, consulte Trabajar con elementos en el
Diseñador XAML.
Crear y modificar plantillas para elementos que son controles.
Crear animaciones (solo en Blend para Visual Studio).
Para ver la ventana Esquema del documento en Visual Studio, en la barra de menús, seleccione Ver otro >
esquema de documento de Windows. >
Para ver la ventana Objetos y escala de tiempo en Blend para Visual Studio, en la barra de menús, seleccione Ver
esquema > del documento.
La vista principal de la ventana Esquema del documento/Objetos y escala de tiempo muestra la jerarquía de un
documento en una estructura de árbol. Puede usar la naturaleza jerárquica del esquema del documento para
examinar el documento en los distintos niveles de detalle y para bloquear y ocultar elementos individualmente
o en grupos. Las siguientes opciones están disponibles en la ventana Esquema del documento/Objetos y escala
de tiempo documento:
Mostrar u ocultar
Muestra u oculta los elementos de la mesa de trabajo. Cuando se muestra, aparece como el símbolo de un ojo.
También puede presionar Ctrl + H para ocultar un elemento y + Mayús Ctrl + H para mostrarlo.
Bloquear o desbloquear
Bloquea o desbloquea los elementos de la mesa de trabajo. Los elementos bloqueados no se pueden modificar.
Cuando se bloquea un elemento, aparece un símbolo de candado. También puede presionar Ctrl + L para
bloquear un elemento y + Mayús Ctrl + L para desbloquearlo.
Devolver ámbito a pageRoot
La opción que aparece en la parte superior de la ventana Esquema del documento/Objetos y escala de tiempo,
que muestra un símbolo de flecha hacia arriba, se mueve al ámbito anterior. Esta opción solo es aplicable
cuando se está en el ámbito de un estilo o una plantilla.
Propiedades (ventana)
La ventana Propiedades permite establecer valores de propiedad en los controles. Este es su aspecto:
Hay varias opciones en la parte superior de la ventana Propiedades :
Cambie 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, haga clic en Categoría , Nombre u Origen
en la lista Organizar por .
Para ver la lista de eventos de un control, haga clic en el botón Eventos , que aparece como un símbolo de
rayo.
Para buscar una propiedad, empiece a escribir el nombre de la propiedad en el cuadro de búsqueda. La
ventana Propiedades muestra las propiedades que coinciden con la búsqueda a medida que escribe.
Algunas propiedades permiten establecer propiedades avanzadas si selecciona un botón de flecha hacia abajo.
A la derecha de cada propiedad de valor se encuentra un marcador de propiedad que aparece como un símbolo
de cuadro. La apariencia del marcador de propiedad indica si se aplicó a la propiedad un enlace de datos o un
recurso. Por ejemplo, un símbolo de cuadro blanco indica un valor predeterminado, un símbolo de cuadro negro
suele indicar que se ha aplicado un recurso local y un símbolo de cuadro naranja suele indicar que se ha
aplicado un enlace de datos. Al hacer clic en el marcador de propiedad, puede navegar a la definición de un
estilo, abrir el generador de enlace de datos o abrir el selector de recursos.
Para más información sobre cómo usar las propiedades y controlar los eventos, consulte Introducción a los
controles y patrones.
Consulte también
Trabajo con elementos en el Diseñador XAML
Cómo crear y aplicar un recurso
Tutorial: Enlace a datos en el Diseñador XAML
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 en Visual Studio o Blend
para Visual Studio.
Adición de un elemento a un diseño

El diseño es el proceso de ajustar el tamaño de los elementos y colocarlos en una interfaz de usuario. Para
colocar elementos visuales, debe colocarlos en un Panel de diseño. Panel tiene una propiedad secundaria, que
es una colección de tipos FrameworkElement. Se pueden usar distintos elementos secundarios de 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, un panel Grid sirve como contenedor de diseño de nivel superior dentro de una
página o formulario. 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 el Diseñador XAML, realice una de estas acciones:
Haga doble clic en un elemento del Cuadro de herramientas (o seleccione un elemento del Cuadro de
herramientas y presione Entrar ).
Arrastre un elemento del Cuadro de herramientas a la mesa de trabajo.
En el Cuadro de herramientas , seleccione una de las herramientas de dibujo (como Elipse o
Rectángulo) y después dibuje un elemento en el panel activo.
Cambio del 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 de la ventana Esquema del
documento se encuentra el elemento que se sitúa en primer plano (excepto cuando se establece la propiedad
ZIndex de un elemento). Cuando se inserta un elemento en una página, un formulario o un contenedor de
diseño, el elemento se coloca automáticamente delante de los demás elementos en el elemento de contenedor
activo. Para cambiar el orden de los elementos, puede 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, realice una de estas acciones:
En la ventana Esquema del documento , arrastre los elementos hacia arriba o hacia abajo para crear el
orden de distribución en capas deseado.
En la ventana Esquema del documento o en la mesa de trabajo, haga clic con el botón derecho en el
elemento cuyo orden de distribución en capas quiere cambiar, elija Orden y, después, haga clic en una de
las opciones siguientes:
Traer al frente para traer el elemento al primer plano del orden.
Traer adelante para traer el elemento un nivel hacia adelante en el orden.
Enviar atrás para enviar el elemento un nivel hacia atrás en el orden.
Enviar al fondo para enviar el elemento a la última posición del orden.
Cambie la propiedad ZIndex en la sección Diseño en la ventana Propiedades. En el caso de los
elementos superpuestos, la propiedad ZIndex tiene prioridad sobre el orden de los elementos que se
muestran en la ventana Esquema del documento. Cuando los elementos se superponen, aparece un
elemento con un valor ZIndex más alto delante.
Cambio de la alineación de un elemento

Puede alinear los elementos en la mesa de trabajo usando comandos de menú o arrastrando los elementos a las
guías de alineación.
Una guía de alineación 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 los comandos de menú:
1. Selecciona los elementos que desees alinear. Puede seleccionar varios elementos si mantiene presionada
la tecla Ctrl mientras los selecciona.
2. Seleccione una de las propiedades siguientes en HorizontalAlignment en la sección Diseño de la
ventana Propiedades: Izquierda , Centro , Derecha o Ajustar .
3. Seleccione una de las propiedades siguientes en Ver ticalAlignment en la sección Diseño de la ventana
Propiedades: Superior , Centro , Inferior o Ajustar .
Para alinear dos o más elementos mediante guías de alineación, en el Diseñador XAML, en un diseño que
contenga al menos dos elementos, arrastre o cambie el tamaño de uno de los elementos de modo 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 está habilitado el
ajuste a las guías de alineación . Para ver una ilustración de la mesa de trabajo que muestra los límites de
alineación, vea Crear una IU con el Diseñador XAML.
Cambio de 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 en la ventana Propiedades:
1. Selecciona el elemento cuyos márgenes deseas cambiar.
2. En Diseño , en la ventana Propiedades, cambie el valor (en píxeles o unidades independientes del
dispositivo, que tienen un tamaño aproximado de 1/96 de pulgada) de cualquiera de las propiedades de
Margen (Superior , Izquierdo , Derecho o Inferior ).
En la mesa de trabajo, para cambiar los márgenes de un elemento con respecto a su contenedor de diseño, haga
clic en los adornos de margen que aparecen alrededor del elemento cuando el elemento esté seleccionado y se
encuentre dentro de un contenedor de diseño. Para obtener una ilustración que muestra los adornos de margen,
vea Crear una IU con 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 el control Adorner de margen y el margen opuesto no está establecido, el margen opuesto se
establece en el valor correcto de acuerdo con la ubicación del elemento en la mesa de trabajo. Para los
márgenes opuestos, como Izquierdo y Derecho , siempre se establece al menos una propiedad.
IMPORTANT
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 .
Agrupación y desagrupación de 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 diseño:
1. Selecciona los elementos que desees 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, después, haga
clic en el tipo de contenedor de diseño en el que quiera incluir el grupo.
TIP
Si selecciona Viewbox, Border o ScrollViewer para agrupar los elementos, estos se colocarán en un panel de
cuadrícula nuevo dentro del elemento Viewbox, Border o ScrollViewer. Si desagrupa los elementos en uno de estos
contenedores de diseño, solo se eliminan los elementos Viewbox, Border o ScrollViewer y el panel de cuadrícula se
conservará. Para eliminar el panel Grid , vuelve a desagrupar los elementos.
Para desagrupar elementos y eliminar el diseño, haga clic con el botón derecho en el grupo que quiere
desagrupar y elija 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 .
Restablecimiento del diseño de un elemento

Puede restaurar los valores predeterminados de las propiedades de diseño específicas 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 de los elementos, haga clic con el botón secundario en el elemento en la ventana
esquema del documento o en la mesa de presentación y, a continuación, seleccione diseño > restablecer
PropertyName, donde PropertyName es la propiedad que desea restablecer (o elija diseño > restablecer
todo para restablecer todas las propiedades de diseño del elemento).
Vea también
Organizar objetos en contenedores de diseño en el
Diseñador XAML
En este artículo se describen los paneles y controles de diseño del Diseñador XAML.
Piense en qué parte de la página desea que aparezcan los objetos—como imágenes, botones y vídeos. Tal vez
desee que aparezcan en filas y columnas, en una sola línea vertical u horizontal, o en posiciones fijas.
Después de que haya considerado el aspecto que tendría la página, seleccione un panel de diseño. Todas las
páginas tienen uno como punto de partida, ya que se necesita algo donde agregar los objetos. De manera
predeterminada, es una Cuadrícula , pero puede cambiar esta configuración.
Los paneles de diseño le ayudarán a organizar los objetos en una página, pero no solo sirven para eso. Además,
facilitan el diseño en diferentes tamaños y resoluciones de pantalla. Cuando los usuarios ejecutan la aplicación,
todo lo que contiene el panel de diseño cambia de tamaño para coincidir con el espacio real en pantalla de sus
dispositivos. Por supuesto, si no desea que el diseño actúe de ese modo, puede invalidar este comportamiento
en todo o parte del diseño. Para controlarlo, puede utilizar propiedades de alto y ancho.
Paneles de diseño
Para empezar su página, elija uno de estos paneles de diseño. La página puede tener más de uno. Por ejemplo,
puede comenzar con un panel de diseño de Cuadrícula y, después, agregar un elemento StackPanel a un área
de la Cuadrícula ; así, podrá organizar los controles verticalmente en ese elemento.
Los siguientes paneles de diseño son los usados más habitualmente, pero hay otros. Puede encontrarlos todos
en Cuadro de herramientas en Visual Studio o en el panel Activos en Blend para Visual Studio.
Cuadrícula
Organice los objetos en filas y columnas.
UniformGrid
Organice los objetos en regiones de cuadrícula iguales o uniformes. Este panel es excelente para organizar una
lista de imágenes.
(Disponible solo para proyectos de WPF).
Lienzo
Organice los objetos como desee. Cuando los usuarios ejecuten la aplicación, estos elementos tendrán una
posición fija en la pantalla.
StackPanel
Organice los objetos en una sola línea horizontal o verticalmente.
WrapPanel
Organice los objetos en secuencia de izquierda a derecha. Cuando el panel se queda sin espacio en el borde de
la derecha, ajusta el contenido a la línea siguiente, y así sucesivamente de izquierda a derecha y de arriba abajo.
También puede hacer que la orientación de un panel de ajuste (WrapPanel) sea vertical para que los objetos
fluyan de arriba abajo y de izquierda a derecha.
DockPanel
Organice los objetos para que permanezcan, o se acoplen, en uno de los bordes del panel.
Vea un vídeo cor to: WPF - DockPanel
Controles de diseño
También puede agregar los objetos a controles de diseño. No tienen tantas características como un panel de
diseño, pero pueden resultar útiles en determinados escenarios.
Los siguientes controles de diseño son los más populares, pero hay otros. Puede encontrarlos todos en Cuadro
de herramientas en Visual Studio o en el panel Activos en Blend para Visual Studio.
Borde
Cree un borde, un fondo o ambos alrededor de un objeto. Solo puede agregar un objeto a un elemento Border .
Si quiere aplicar un borde o un fondo a más de un objeto, agregue un panel de diseño al elemento Border . A
continuación, agregue objetos a ese panel o control.
Popup
Muestre información u opciones a los usuarios en una ventana. Solo puede agregar un objeto a un elemento
Popup . De manera predeterminada, un elemento Popup contiene una Cuadrícula , pero se puede cambiar esta
configuración.
ScrollViewer
Permita que los usuarios se desplacen hacia abajo en una página o parte de una página. Puede agregar un solo
objeto a un control ScrollViewer así que resulta adecuado agregar un panel de diseño como una Cuadrícula
o StackPanel .
Cuadro de vídeo
Escale objetos igual que haría con un control de zoom. Solo puede agregar un objeto a un elemento Viewbox .
Si quiere aplicar ese efecto a más de un objeto, agregue un panel de diseño al control ViewBox y, después,
agregue los controles a dicho panel de diseño.
Vea también
Trabajo con elementos en el Diseñador XAML
Cómo crear y aplicar un recurso
Los estilos y las plantillas de elementos del diseñador XAML se almacenan en entidades reutilizables
denominadas recursos. Los estilos permiten establecer las propiedades de los elementos y volver a usar esos
valores para lograr una apariencia coherente entre distintos elementos. Una propiedad ControlTemplate define
la apariencia de un control y también puede aplicarse como un recurso. Para más información, consulte Estilos
XAML y Plantillas de control.
Siempre que crea un recurso a partir de una propiedad existente, Style o ControlTemplate, el cuadro de diálogo
Crear recurso permite definir el recurso en el nivel de aplicación, el nivel de documento o el nivel de elemento.
Estos niveles determinan dónde se puede usar el recurso. Por ejemplo, si define el recurso en el nivel de
elemento, solo se podrá aplicar el recurso al elemento para el que lo creó. También puede almacenar el recurso
en un diccionario de recursos: un archivo independiente que puede volver a usar en otro proyecto.
Crear un nuevo recurso

1. Con un archivo XAML abierto en el diseñador XAML, cree un elemento o elija uno en la ventana Esquema
del documento.
2. En la ventana Propiedades , seleccione el marcador de propiedad (aparece como un símbolo de cuadro a
la derecha de un valor de propiedad) y, después, pulse Conver tir en nuevo recurso . Un símbolo de
cuadro blanco indica un valor predeterminado y un símbolo de cuadro negro indica normalmente que se
ha aplicado un recurso local.
Aparece el cuadro de diálogo correspondiente para crear un recurso. Este cuadro de diálogo aparece
cuando se crea un recurso de pincel:
3. En el cuadro Nombre (clave) , escriba un nombre de clave. Este es el nombre que puede usar si desea
que otros elementos hagan referencia al recurso.
4. En Definir en , seleccione la opción en la que quiere definir el recurso:
Para que el recurso esté disponible en cualquier documento de la aplicación, seleccione
Aplicación .
Para que el recurso esté disponible únicamente en el documento actual, seleccione Este
documento .
Para que el recurso esté disponible únicamente en el elemento desde el que creó el recurso o en
sus elementos secundarios, seleccione Este documento y, en la lista desplegable, seleccione
elemento : nombre .
Para definir el recurso en un archivo de diccionario de recursos que se pueda reutilizar en otros
proyectos, haga clic en Diccionario de recursos . A continuación, seleccione un archivo de
diccionario de recursos existente, como StandardStyles.xaml , en la lista desplegable.
5. Haga clic en el botón Aceptar para crear el recurso y aplicarlo al elemento a partir del cual se ha creado.
Aplicación de un recurso a un elemento o propiedad

1. En la ventana Esquema del documento, elija el elemento al que quiere aplicar un recurso.
2. Realice una de las siguientes acciones:
Aplique un recurso a una propiedad. En la ventana Propiedades , seleccione el marcador de
propiedad al lado del valor de la propiedad, seleccione Recurso local o Recurso del sistema , y
luego seleccione un recurso de los disponibles en la lista que aparece.
Si no ve un recurso que espera ver, es posible que el tipo de ese recurso no coincida con el tipo de
la propiedad.
Aplique un recurso de plantilla de control o estilo a un control. Abra el menú contextual de un
control en la ventana Esquema del documento, seleccione Editar plantilla o Editar plantillas
adicionales , haga clic en Aplicar recurso y, después, seleccione el nombre de la plantilla de
control en la lista que aparece.
NOTE
Editar plantilla se aplica a las plantillas de control. Editar plantillas adicionales se aplica a otros tipos
de plantilla.
Puede aplicar recursos siempre que sean compatibles. Por ejemplo, puede aplicar un recurso de
pincel a la propiedad Foreground de un control TextBox.
Edición de un recurso
1. Elija un elemento en la mesa de trabajo o en la ventana Esquema del documento.
2. En la ventana Propiedades , seleccione el marcador de propiedad predeterminado o local y, después,
seleccione Editar recurso para abrir el cuadro de diálogo Editar recurso .
3. Modifique las opciones del recurso.
Vea también
Tutorial: Crear una UI usando el Diseñador XAML
Tutorial: Enlace a datos en el Diseñador XAML
En el diseñador XAML, puedes establecer las propiedades de enlace de datos con la mesa de trabajo y la ventana
Propiedades. En el ejemplo de este tutorial se muestra cómo enlazar datos a un control. En concreto, el tutorial
muestra cómo crear una clase simple de carro de la compra que tenga una propiedad DependencyProperty
denominada ItemCount y luego enlazar la propiedad ItemCount a la propiedad Text de un control TextBlock.
Para crear una clase con el fin de usarla como origen de datos
1. En el menú Archivo , elija Nuevo > Proyecto .
2. En el cuadro de diálogo Nuevo proyecto , elija el nodo de Visual C# o Visual Basic , expanda el nodo
Escritorio de Windows y después elija la plantilla Aplicación WPF .
3. Asigne un nombre al proyecto BindingTest y después elija el botón Aceptar .
4. Abra el archivo MainWindow.xaml.cs (o MainWindow.xaml.vb ) y agregue el código siguiente. En C#,
agrega el código en el espacio de nombres BindingTest (antes del paréntesis de cierre final del archivo).
En Visual Basic, simplemente agrega la nueva clase.
public class ShoppingCart : DependencyObject

{
public int ItemCount
{
get { return (int)GetValue(ItemCountProperty); }
set { SetValue(ItemCountProperty, value); }
}
public static readonly DependencyProperty ItemCountProperty =

DependencyProperty.Register("ItemCount", typeof(int),
typeof(ShoppingCart), new PropertyMetadata(0));
}
Public Class ShoppingCart

Inherits DependencyObject
Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(

"ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
Public Property ItemCount As Integer
Get
ItemCount = CType(GetValue(ItemCountProperty), Integer)
End Get
Set(value As Integer)
SetValue(ItemCountProperty, value)
End Set
End Property
End Class
Este código establece un valor de 0 como el número predeterminado de elementos mediante el objeto
PropertyMetadata.
5. En el menú Archivo , elija Compilar > Compilar solución .
Para enlazar la propiedad ItemCount a un control TextBlock
1. En el Explorador de soluciones, abra el menú contextual de MainWindow.xaml y elija Diseñador de
vistas .
2. En el cuadro de herramientas, elija un control Grid y agréguelo al formulario.
3. Con el control Grid seleccionado, en la ventana Propiedades, elija el botón Nuevo situado junto a la
propiedad DataContext .
4. En el cuadro de diálogo Seleccionar objeto , asegúrese de que la casilla Mostrar todos los
ensamblados está desactivada, elija ShoppingCar t en el espacio de nombres BindingTest y después
elija el botón Aceptar .
En la siguiente ilustración, se muestra el cuadro de diálogo Seleccionar objeto con ShoppingCar t
seleccionado.
5. En el cuadro de herramientas , elija un control TextBlock para agregar al formulario.

6. Con el control TextBlock seleccionado, en la ventana Propiedades, elija el marcador de propiedad
situado a la derecha de la propiedad Text y después elija Crear enlace de datos . (El marcador de
propiedad tiene el aspecto de un cuadro pequeño).
7. En el cuadro de diálogo Crear enlace de datos, en el cuadro Ruta de acceso , seleccione la propiedad
ItemCount: (int32) y después elija el botón Aceptar .
En la siguiente ilustración, se muestra el cuadro de diálogo Crear enlace de datos con la propiedad
ItemCount seleccionada.
8. Presione F5 para ejecutar la aplicación.
El control TextBlock debe mostrar el valor predeterminado de 0 como texto.
Vea también
Agregar convertidor de valores (Cuadro de diálogo)
Depuración o deshabilitación de código de
proyecto en el Diseñador XAML
En muchos casos, las excepciones no controladas del Diseñador XAML pueden deberse a un código de proyecto
que intenta acceder a propiedades o métodos que devuelven valores distintos o funcionan de manera diferente
cuando se ejecuta la aplicación en el diseñador. Puede depurar el código del proyecto en otra instancia de Visual
Studio para resolver estas excepciones o evitarlas temporalmente al deshabilitar el código del proyecto en el
diseñador.
El código del proyecto incluye:
Controles personalizados y controles de usuario
Bibliotecas de clases
Convertidores de valores
Enlaces con datos en tiempo de diseño generados a partir de código del proyecto
Cuando se deshabilita el código del proyecto, Visual Studio muestra marcadores de posición. Por ejemplo, Visual
Studio muestra el nombre de la propiedad para un enlace donde los datos ya no están disponibles o un
marcador de posición para un control que ya no se ejecuta.
Para determinar si el código del proyecto está provocando una

excepción
1. En el cuadro de diálogo de excepción no controlada, elija el vínculo Haga clic aquí para recargar el
diseñador .
2. En la barra de menús, elija depurar > iniciar depuración para compilar y ejecutar la aplicación.
Si la aplicación se compila y se ejecuta correctamente, la excepción en tiempo de diseño puede deberse a
que su código de proyecto se está ejecutando en el diseñador.
Para depurar código de proyecto que se ejecuta en el diseñador

1. En el cuadro de diálogo de excepción no controlada, elija el vínculo Haga clic aquí para deshabilitar
la ejecución de código del proyecto y volver a cargar el diseñador .
2. En el Administrador de tareas de Windows, elija el botón Finalizar tarea para cerrar todas las instancias
del Diseñador de XAML de Visual Studio que se estén ejecutando actualmente.
3. En Visual Studio, abra la página XAML, que contiene el código o el control que desea depurar.
4. Abra una nueva instancia de Visual Studio, y luego abra una segunda instancia del proyecto.
5. Establezca un punto de interrupción en el código del proyecto.
6. En la nueva instancia de Visual Studio, en la barra de menús, elija depurar > asociar al proceso .
7. En el cuadro de diálogo Asociar al proceso , en la lista Procesos disponibles , elija XDesProc.exe y
luego seleccione el botón Asociar .
Este es el proceso para el Diseñador XAML en la primera instancia de Visual Studio.

8. En la primera instancia de Visual Studio, en la barra de menús, elija depurar > iniciar depuración .
Ahora puede entrar en el código que se ejecuta en el diseñador.
Para deshabilitar el código del proyecto en el diseñador

En el cuadro de diálogo de excepción no controlada, elija el vínculo Haga clic aquí para deshabilitar
la ejecución de código del proyecto y volver a cargar el diseñador .
Como alternativa, en la barra de herramientas en el Diseñador XAML , haga clic en el botón
Deshabilitar código de proyecto .
Puede alternar el botón de nuevo para volver a habilitar el código del proyecto.
NOTE
Para proyectos destinados a procesadores X64 o ARM, Visual Studio no puede ejecutar el código del proyecto en
el diseñador, por lo que el botón Deshabilitar código de proyecto está deshabilitado en el diseñador.
Cualquiera de las opciones hace que el diseñador se vuelva a cargar, y luego deshabilita todo el código
para el proyecto asociado.
NOTE
Deshabilitar el código del proyecto puede provocar una pérdida de datos en tiempo de diseño. Una alternativa es
depurar el código que se ejecuta en el diseñador.
Opciones de visualización de controles

NOTE
Opciones de visualización de controles solo está disponible para aplicaciones de Plataforma universal de Windows
que tienen como destino Windows 10 Fall Creators Update (compilación 16299) o posterior. La característica Opciones
de visualización de controles está disponible en Visual Studio 2017, versión 15.9 o posterior.
En el diseñador XAML, puede cambiar las opciones de visualización de controles para que solo se muestren los
controles de plataforma desde Windows SDK. Esto puede mejorar la confiabilidad del diseñador XAML.
Para cambiar las opciones de visualización de controles, haga clic en el icono que se encuentra en la parte
inferior izquierda de la ventana del diseñador y, luego, seleccione una opción en Opciones de visualización
de controles :
Cuando selecciona Mostrar solo los controles de la plataforma , todos los controles personalizados que
provienen de los SDK, controles de usuario de cliente, etc. no se representarán por completo. En su lugar, los
reemplazan controles de reserva para mostrar el tamaño y la posición del control.
Vea también
Diseño de XAML en Visual Studio y Blend para Visual Studio
Uso de datos de tiempo de diseño con el Diseñador
XAML en Visual Studio
Algunos diseños son difíciles de visualizar sin datos. En este documento, revisaremos uno de los enfoques que
pueden usar los desarrolladores que trabajan en proyectos de escritorio para simular datos en el diseñador
XAML. Este enfoque se realiza mediante el espacio de nombres "d:" omitible existente. Con este enfoque puede
agregar rápidamente datos en tiempo de diseño a las páginas o controles sin necesidad de crear un modelo de
presentación ficticio completo, o simplemente probar cómo puede afectar un cambio de propiedad a la
aplicación sin preocuparse de que estos cambios tengan un impacto en las compilaciones de versión. Todos los
datos de d: los usa únicamente el diseñador XAML y los valores de espacio de nombres que no se pueden omitir
se compilan en la aplicación.
NOTE
Si usa Xamarin.Forms, consulte Datos de tiempo de diseño de Xamarin.Forms
Aspectos básicos de los datos en tiempo de diseño

Los datos en tiempo de diseño son datos ficticios que se establecen para que los controles sean más fáciles de
visualizar en el diseñador XAML. Para empezar, agregue las siguientes líneas de código al encabezado del
documento XAML si todavía no están presentes:
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Después de agregar los espacios de nombres, puede colocar d: delante de cualquier atributo o control para
mostrarlo solo en el diseñador XAML pero no en tiempo de ejecución.
Por ejemplo, puede agregar texto a un TextBlock que normalmente tiene datos enlazados a él.
<TextBlock Text="{Binding Name}" d:Text="Name!" />
En este ejemplo, sin d:Text , el diseñador XAML no mostraría nada para el TextBlock. En su lugar, muestra
"Name!" donde el TextBlock tendrá datos reales en tiempo de ejecución.
Puede usar d: con atributos para cualquier control de .NET Core para UWP o WPF, como colores, tamaños de
fuente y espaciado. Incluso puede agregarlos al control en sí.
<d:Button Content="Design Time Button" />

En este ejemplo, el botón solo aparece en tiempo de diseño. Utilice este método para colocar un marcador de
posición para un control personalizado o para probar distintos controles. Todos los atributos y controles de d:
se omitirán durante el tiempo de ejecución.
Vista previa de imágenes en tiempo de diseño

Puede establecer un origen de tiempo de diseño para las imágenes enlazadas a la página o cargadas
dinámicamente. Agregue al proyecto la imagen que quiere mostrar en el diseñador XAML. Después, puede
mostrar dicha imagen en el diseñador XAML en tiempo de diseño:
<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />
NOTE
La imagen de este ejemplo debe existir en la solución.
Datos en tiempo de diseño para ListView

Los controles ListView son una manera popular de mostrar los datos en la aplicación de escritorio, pero son
difíciles de visualizar sin datos. Puede usar esta característica para crear elementos o un ItemSource de datos en
tiempo de diseño en línea. En el diseñador XAML se muestra lo que hay en esa matriz en el objeto ListView en
tiempo de diseño.
Ejemplo de .NET Core para WPF
Para usar el tipo system:String, asegúrese de incluir xmlns:system="clr-namespace:System;assembly=mscorlib en el
encabezado XAML.
<StackPanel>
<ListView ItemsSource="{Binding Items}">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type system:String}">
<system:String>Item One</system:String>
<system:String>Item Two</system:String>
<system:String>Item Three</system:String>
</x:Array>
</d:ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ItemName}" d:Text="{Binding .}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
En el ejemplo anterior se muestra un control ListView con tres TextBlock en el diseñador XAML.
También puede crear una matriz de objetos de datos. Por ejemplo, las propiedades públicas de un objeto de
datos City se pueden construir como datos en tiempo de diseño.
namespace Cities.Models
{
public class City
{
public string Name { get; set; }
public string Country { get; set; }
}
}
Para usar la clase en XAML, debe importar el espacio de nombres en el nodo raíz.
xmlns:models="clr-namespace:Cities.Models"
<StackPanel>
<ListView ItemsSource="{Binding Items}">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type models:City}">
<models:City Name="Seattle" Country="United States"/>
<models:City Name="London" Country="United Kingdom"/>
<models:City Name="Panama City" Country="Panama"/>
</x:Array>
</d:ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding Name}" Margin="0,0,5,0" />
<TextBlock Text="{Binding Country}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
La ventaja es que puede enlazar los controles a una versión estática en tiempo de diseño del modelo.
Ejemplo de UWP
x:Array no se admite en UWP. Por lo tanto, podemos usar <d:ListView.Items> en su lugar. Para usar el tipo
system:String, asegúrese de incluir http://schemas.microsoft.com/winfx/2009/xaml en el encabezado XAML.
<StackPanel>
<ListView>
<d:ListView.Items>
<system:String>Item One</system:String>
<system:String>Item Two</system:String>
<system:String>Item Three</system:String>
</d:ListView.Items>
</ListView>
</StackPanel>
Uso de datos en tiempo de diseño con tipos y propiedades

personalizados
De forma predeterminada, esta característica solo funciona con controles y propiedades de plataforma. En esta
sección se habla de los pasos necesarios para que pueda usar sus propios controles personalizados como
controles en tiempo de diseño, una nueva capacidad disponible para los clientes que usan Visual Studio 2019,
versión 16.8 o posterior. Hay tres requisitos para habilitarla:
Un espacio de nombres xmlns personalizado.
xmlns:myControls="http://MyCustomControls"
Una versión en tiempo de diseño del espacio de nombres. Para conseguirlo, basta con anexar /design al
final.
xmlns:myDesignTimeControls="http://MyCustomControls/design"
Incorporación del prefijo en tiempo de diseño a mc:Ignorable
mc:Ignorable="d myDesignTimeControls"
Una vez realizados todos estos pasos, puede usar el prefijo myDesignTimeControls para crear los controles en
tiempo de diseño.
<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>
Creación de un espacio de nombres xmlns personalizado

Para crear un espacio de nombres xmlns personalizado en WPF para .NET Core, debe asignar el espacio de
nombres XML personalizado al espacio de nombres CLR en el que se encuentran los controles. Para ello,
agregue el atributo de nivel de ensamblado XmlnsDefinition al archivo AssemblyInfo.cs . El archivo se
encuentra en la jerarquía raíz del proyecto.
[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]
Solución de problemas
Si experimenta un problema que no aparece en esta sección, háganoslo saber mediante la herramienta Notificar
un problema.
Requisitos
Los datos en tiempo de diseño requieren la versión 16.7 de Visual Studio 2019 o posterior.
Admite proyectos de escritorio de Windows dirigidos a Windows Presentation Foundation (WPF) para
.NET Core y UWP. Esta característica también está disponible para .NET Framework en el canal de versión
preliminar. Para habilitarla, vaya a Herramientas > Opciones > Entorno > Características en
versión preliminar , seleccione Nuevo Diseñador XAML de WPF para .NET Framework y, luego,
reinicie Visual Studio.
A partir de la versión 16.7 de Visual Studio 2019, esta característica funciona con todos los controles
integrados de los marcos de trabajo de WPF y UWP. La compatibilidad con controles de terceros ahora
está disponible en la versión 16.8.
El diseñador de consultas dejó de funcionar
Pruebe a cerrar y volver a abrir el archivo XAML, y limpie y vuelva a compilar el proyecto.
Consulte también
Datos de tiempo de diseño con el controlador de vista previa de Xamarin.Forms
XAML en aplicaciones de WPF
Introducción de Blend para Visual Studio
Blend para Visual Studio le ayuda a diseñar aplicaciones web y de Windows basadas en XAML. Proporciona la
misma experiencia de diseño XAML básica que Visual Studio y agrega diseñadores visuales para tareas
avanzadas como animaciones y comportamientos. Para ver una comparación entre Blend y Visual Studio, vea
Diseño de XAML en Visual Studio y Blend para Visual Studio.
Blend para Visual Studio es un componente de Visual Studio. Para instalar Blend, en el instalador de Visual
Studio elija la carga de trabajo Desarrollo de la plataforma universal de Windows o Desarrollo de
escritorio de .NET . Ambas cargas de trabajo incluyen el componente Blend para Visual Studio.
Si no ha trabajado nunca con Blend para Visual Studio, tómese un momento para familiarizarse con las
características exclusivas del área de trabajo. Este tema le servirá de paseo introductorio.
Panel Herramientas
Puede usar el panel Herramientas en Blend para Visual Studio para crear y modificar objetos en la aplicación.
El panel Herramientas aparece a la izquierda del Diseñador XAML cuando se tiene un archivo .xaml abierto.
Para crear objetos, seleccione una herramienta y dibuje en la mesa de trabajo utilizando el mouse.
TIP
Algunas de las herramientas del panel Herramientas tienen variaciones. Por ejemplo, en lugar de un rectángulo, puede
elegir una elipse o una línea. Para obtener acceso a estas variantes, haga clic con el botón derecho o haga clic y mantenga
presionado el botón en la herramienta.
Herramientas de selección
Seleccione objetos y trazados. Use la herramienta Selección directa para seleccionar objetos anidados y
segmentos de trazados.
Herramientas de vista
Ajuste la vista de la mesa de trabajo, por ejemplo para movimiento panorámico y zoom.
Herramientas de pincel
Trabaje con los atributos visuales de un objeto, como la transformación de un pincel o la aplicación de un
degradado.
Herramientas de objeto
Dibuje en la mesa de trabajo los objetos más habituales, como trazados, formas, paneles de diseño, texto y
controles.
Herramientas de recursos
Acceda a la ventana Recursos y muestre el recurso usado más recientemente de la biblioteca.
Ventana Activos
La ventana Activos contiene todos los objetos visuales disponibles y es similar al cuadro de herramientas de
Visual Studio. Además de los objetos visuales, encontrará todo lo que puede agregar a la mesa de trabajo en la
ventana Activos , como, por ejemplo, estilos, elementos multimedia, comportamientos y efectos. Para abrir la
ventana Activos , elija Ver > Ventana Activos o presione Ctrl +Alt +X .
Escriba texto en el cuadro Buscar recursos para filtrar la lista de recursos.
Cambie entre el modo de cuadrícula y el modo de lista para ver los recursos mediante los botones que
aparece en la parte superior derecha.
Ventana Objetos y escala de tiempo

Utilice esta ventana para organizar los objetos en la mesa de trabajo y, si quiere, para animarlos. Para abrir la
ventana Objetos y escala de tiempo , elija Ver > Esquema del documento . Además de la funcionalidad
proporcionada en la ventana Esquema del documento en Visual Studio, la ventana Objetos y escala de tiempo
de Blend para Visual Studio tiene un área de composición de la escala de tiempo a la derecha. Use la escala de
tiempo al crear y editar animaciones.
Use los botones de guion gráfico para crear, eliminar, cerrar o seleccionar un guion gráfico. Use el
área de composición de la escala de tiempo que se encuentra a la derecha para ver la escala de tiempo y mover
fotogramas clave.
Mantenga el puntero sobre cada botón de la ventana para obtener más información sobre la funcionalidad
disponible.
Consulte también
Animar objetos
Diseño de XAML en Visual Studio y Blend para Visual Studio
En Diseñador XAML, una forma es exactamente lo que cabría esperar. por ejemplo: un rectángulo, un círculo o
una elipse. Un trazado es una versión más flexible de una forma Puede cambiar su apariencia o combinarlos
para crear formas nuevas.
Las formas y los trazados usan gráficos vectoriales, por lo que se adaptan bien a pantallas de alta resolución.
Dibujar una forma

Busque formas en la ventana Recursos .
Arrastre la forma que desee a la mesa de trabajo. Después, use los controladores de la forma para escalar, girar,
mover o sesgar la forma.
Dibujar un trazado
Un trazado se compone de varias líneas y curvas conectadas. Use un trazado para crear formas interesantes que
no están disponibles en la ventana Recursos .
Los trazados se pueden dibujar con una línea, una pluma o un lápiz, Puede encontrar estas herramientas en la
ventana Herramientas .
Dibujar una línea recta
Use la herramienta Pluma o la herramienta Línea .
Uso de la herramienta Pluma
En la mesa de trabajo, haga clic una vez para definir el punto inicial y vuelva a hacer clic para definir el final de la
línea.
Uso de la herramienta Línea
En la mesa de trabajo, arrastre desde el punto en el que desea que empiece la línea y después suelte en el punto
en el que desea que finalice.
Dibujar una curva
Use la herramienta Pluma .
En la mesa de trabajo, haga clic una vez para definir el punto inicial de una línea y, a continuación, haga clic y
arrastre el puntero para crear la curva deseada.
Si desea cerrar el trazado, haga clic en el primer punto en la línea.
Cambiar la forma de una curva
Use la herramienta Selección directa .
Haga clic en la forma y después arrastre cualquier punto de la forma para cambiar la curva.
Dibujar un trazado de forma libre
Use la herramienta Lápiz .
En la mesa de trabajo, dibuje un trazado de forma libre como si estuviera usando un lápiz real.
Quitar parte de un trazado
Use la herramienta Selección directa .
Seleccione el trazado que contiene el segmento que desea eliminar y después haga clic en el botón Eliminar .
Quitar un punto de un trazado
Use la herramienta Selección para seleccionar el trazado. A continuación, use la herramienta Pluma para hacer
clic en el punto que desea quitar.
Agregar un punto en un trazado
Use la herramienta Selección para seleccionar el trazado. Use la herramienta Pluma para hacer clic en
cualquier lugar del trazado en el que desee agregar el punto.
Convertir una forma en un trazado

Para modificar una forma de la misma forma que se modifica un trazado, convierta la forma en un trazado.
Seleccione la forma y, a continuación, seleccione Format > path > conver tir en trazado .
Vea un vídeo cor to: Trabajar con trazados: convertir una forma en un trazado.
NOTE
Actualmente, Conver tir en trazado no está disponible para las aplicaciones de UWP con una TargetPlatformVersion
de 10.0.16299.0 o posterior, como mínimo.
Combinar trazados
Los trazados y las formas se pueden combinar en un único trazado.
N UM B ER A C C IÓ N
Dos formas antes de su combinación
Unir
Dividir
Formar intersección
Excluir superposición
Restar
Vea un vídeo cor to: Trabajar con trazados: combinar trazados.
Crear un trazado compuesto

Cuando se crea un trazado compuesto, las partes en intersección de los trazados se restan del resultado final y
el trazado resultante adopta las propiedades visuales del trazado situado al fondo.
Una vez creados, los trazados compuestos se pueden separar en cualquier momento.
Vea un vídeo cor to: Trabajar con trazados: crear un trazado compuesto.
Crear un trazado de recorte

Un trazado de recorte es un trazado o forma que se aplica a otro objeto, ocultando así las partes del objeto con
máscara que sobresalen del trazado de recorte.
Vea un vídeo cor to: Trabajar con trazados: crear un trazado de recorte.
Modificación del estilo de los objetos en Blend para
Visual Studio
La manera más fácil de personalizar un objeto es establecer propiedades en el panel Propiedades .

Si desea volver a utilizar la configuración o un conjunto de configuraciones, cree un recurso reutilizable. Podría
tratarse de un estilo, una plantilla o algo simple como un color personalizado. También puede hacer la
apariencia de un control sea distinta en función de su estado. Por ejemplo, que un botón se vuelva verde cuando
el usuario haga clic en él.
Pinceles: modificar la apariencia de un objeto

Aplique un pincel a un objeto si desea cambiar su apariencia.
Pintar una imagen o patrón repetitivos en un objeto
Pinte una imagen o patrón repetitivos en un objeto con un pincel de diseño en mosaico.
Para crear un pincel de diseño en mosaico, empiece por crear un recurso de pincel de imagen, pincel con dibujo
o pincel visual.
Cree un pincel de imagen con una imagen. Las ilustraciones siguientes muestran el pincel de imagen, el pincel
de imagen en mosaico y el pincel de imagen volteado.
Cree un pincel con dibujo mediante un dibujo vectorial como un trazado o forma. Las ilustraciones siguientes
muestran el pincel con dibujo, el pincel con dibujo en mosaico y el pincel con dibujo volteado.
Cree un pincel visual a partir de un control como un botón. Las ilustraciones siguientes muestran el pincel visual
y el pincel visual en mosaico.
Estilos y plantillas: crear una apariencia coherente en todos los

controles
Puede diseñar la apariencia y el comportamiento de un control una vez y aplicar ese diseño a otros controles
para no tener que hacerlo de manera individual.
¿Debe usar un estilo? : Si quiere establecer las propiedades predeterminadas (como el color de un botón), use
un estilo. Puede modificar un control incluso después de aplicarle un estilo.
¿Debe usar una plantilla? : Si quiere cambiar la estructura de un control, use una plantilla. Imagine que
convierte un gráfico o un logotipo en un botón. El control no se puede modificar después de aplicarle una
plantilla.
Crear una plantilla o un estilo
Hay dos maneras de crear una plantilla. puede convertir cualquier objeto de la mesa de trabajo en un control o
puede basar la plantilla en un control existente.
Para convertir cualquier objeto en una plantilla de control, seleccione el objeto y, después, en el menú
Herramientas , pulse Crear en control .
Si desea basar la plantilla en un control existente, seleccione un objeto en la mesa de trabajo. Después, en la
parte superior de la mesa de trabajo, pulse el botón de ruta de navegación, pulse Editar plantilla y, después,
seleccione Editar una copia o Crear vacío .
Para crear un estilo, seleccione el objeto y, después, en el menú Objeto , pulse Editar estilo y, después, pulse
Editar una copia o Crear vacío .
Seleccione Editar una copia para empezar con el estilo o la plantilla predeterminados del control.
Seleccione Crear vacío para empezar desde cero.
La opción Editar actual solo aparece si edita un estilo o plantilla que ya ha creado, pero no aparecerá para un
control que sigue usando una plantilla predeterminada del sistema.
En el cuadro de diálogo Crear recurso de estilo , puede ponerle un nombre al estilo o a la plantilla para poder
usarlo más adelante, o puede aplicar el estilo o la plantilla a todos los controles de ese tipo.
NOTE
No es posible crear estilos o plantillas para todos los tipos control. Si un control no los admite, el botón de ruta de
navegación no aparecerá sobre la mesa de trabajo. Para volver al ámbito de edición del documento principal, haga clic en
Devolver ámbito a .
Aplicar un estilo o una plantilla a un control

Haga clic con el botón derecho en un objeto en la ventana Objetos y escala de tiempo, elija Editar plantilla y,
luego, Aplicar recurso .
Restaurar el estilo o la plantilla predeterminados de un control

Seleccione el control y, en la ventana Propiedades **, busque la propiedad Estilo o Plantilla . Elija Opciones
avanzadas y, después, haga clic en Restablecer en el menú contextual.
Estados visuales
Los estados visuales le permiten cambiar la apariencia de un control según su estado. Los controles pueden
tener una apariencia visual distinta según las interacciones del usuario. Por ejemplo, cuando un usuario hace clic
en un botón, puede hacer que este se vuelva verde o que se ejecute una animación. El tiempo entre estados
visuales se puede alargar o acortar mediante el uso de las transiciones.
Vea un vídeo cor to: Administrar el estado de los controles WPF.
Recursos: crear colores, estilos y plantillas y volver a usarlos más

adelante
Prácticamente cualquier elemento del proyecto se puede convertir en un recurso. Un recurso es tan solo un
objeto que se puede volver a usar en diferentes sitios de la aplicación. Por ejemplo, puede crear un color,
convertirlo en un recurso y después usar ese color en varios objetos. Para cambiar el color de todos esos
objetos, simplemente cambie el recurso de color.
Vea también
Crear una IU con Blend para Visual Studio
Animar objetos en el Diseñador XAML
Blend para Visual Studio le permite crear fácilmente animaciones cortas para el movimiento y el fundido de
objetos, por ejemplo.
Para crear una animación, necesita un guion gráfico. que puede contener una o más escalas de tiempo.
Establezca fotogramas clave en una escala de tiempo para marcar los cambios de propiedad. Luego, al ejecutar
la animación, Blend para Visual Studio interpola los cambios de propiedad durante el período de tiempo
designado, lo que produce una transición fluida. Se puede animar cualquier propiedad que pertenezca a un
objeto, incluso las propiedades no visuales.
En las imágenes siguientes se muestra un guion gráfico denominado Stor yboard1 . La escala de tiempo
contiene fotogramas clave que marcan la posición X e Y de un rectángulo. Cuando se ejecuta esta animación, el
rectángulo se mueve de una posición a otra de manera fluida.
Creación de una animación

1. Para crear un guion gráfico, seleccione el botón Opciones de guion gráfico en la ventana Objetos y
escala de tiempo y, luego, seleccione Nuevo .
2. En el cuadro de diálogo Create Stor yboard Resource (Crear recurso Guion gráfico), escriba un
nombre para el guion gráfico.
3. En el panel Recursos de la vista Diseño, agregue un rectángulo en la parte inferior izquierda de la
página.
4. En la ventana Objetos y escala de tiempo , mueva el puntero de hora amarillo a 3 segundos.
5. En la vista Diseño de la página, arrastre el rectángulo hasta el lado derecho de la página.

6. Presione Reproducir para ver que el rectángulo se mueve de izquierda a derecha en la página.
Juegue con otros cambios en el rectángulo en distintos momentos. Por ejemplo, puede cambiar el color de
relleno o voltear la orientación en la ventana Propiedades.
Vea también
Creación de una interfaz de usuario con Blend para Visual Studio
Visualización de datos en Blend para Visual Studio
Mientras personaliza el diseño de sus páginas, puede ver datos de ejemplo en el diseñador. Estos datos de
ejemplo se pueden generar desde cero o mediante una clase existente. También puede conectarse a Datos en
directo que aparecen en la aplicación al ejecutarla.
NOTE
El panel datos de Blend solo se admite para los proyectos que tienen como destino .NET Framework. No se admite para
proyectos o proyectos de UWP que tengan como destino .NET Core.
Generación de datos de ejemplo

Para generar datos de ejemplo, abra un documento XAML. En el panel Datos , elija el botón Crear datos de
ejemplo y, después, elija Nuevos datos de ejemplo .
Defina la estructura de los datos en el panel Datos y, a continuación, enlácelos a los elementos de interfaz de
usuario de cualquier página.
Si desea que los datos de ejemplo aparezcan en las páginas al ejecutar la aplicación, elija Opciones de origen
de datos y, a continuación, Habilitar al ejecutar la aplicación .
Vea un vídeo cor to: Crear datos de ejemplo desde cero.

Generar datos de ejemplo desde una clase
Si ya ha creado las clases que describen la estructura de los datos, puede generar datos de ejemplo a partir de
ellas.
Para generar datos de ejemplo desde una clase, abra un documento XAML y, en el panel Datos , haga clic en el
botón Crear datos de ejemplo y, después, haga clic en Crear datos de ejemplo desde clase .
Vea un vídeo cor to: Mezclar algunos enlaces de datos con Blend.
Vea también
Creación de una interfaz de usuario con Blend para Visual Studio
Errores y advertencias de XAML
Al crear XAML, Visual Studio analiza el código a medida que lo escribe. Cuando se detecta un error, aparece un
subrayado ondulado en una línea de código. Al mantener el mouse sobre el subrayado ondulado se
proporciona más información sobre el error o la advertencia. En el caso de algunos errores y advertencias, se
muestra una bombilla de acción rápida y el uso de Ctrl + . se muestran las opciones para corregir el problema.
Tipos de errores
En segundo plano, varias herramientas analizan el código XAML en paralelo. Los errores de XAML se
categorizan en uno de los tres tipos siguientes, en función de la herramienta que detectó el error:
ERRO R DET EC TA DO P O R C Ó DIGO DEL C Ó DIGO DE ERRO R VERSIÓ N DE VISUA L ST UDIO
Servicio de lenguaje XAML (editor XLSxxxx Todas las versiones

XAML)
XAML Designer XDGxxxx Todas las versiones
Editar XAML y continuar XECxxxx Visual Studio 2019 versión 16,1 o

anterior
Recarga activa de XAML XHRxxxx Visual Studio 2019 versión 16,2 o

posterior
Para obtener más información sobre cómo cambiar la personalización de marca de la edición XAML & continúe
como la recarga en caliente de XAML, consulte las notas de la versión
NOTE
No todos los errores o advertencias tienen un código correspondiente. Tales errores suelen ser errores del Diseñador
XAML.
Supresión de los errores del Diseñador XAML

Abra el cuadro de diálogo Opciones seleccionando Herramientas > Opciones y luego seleccione Editor de
texto > XAML > Varios .
Desactive la casilla Show errors detected by the XAML designer (Mostrar errores detectados por el
Diseñador XAML).
Métodos abreviados de teclado para el Diseñador
XAML
Los métodos abreviados de teclado en el Diseñador XAML pueden agilizar el trabajo al reducir una acción que
requiere varios clics del botón del mouse a un solo método abreviado de teclado.
Métodos abreviados de elementos

Esta tabla enumera los métodos abreviados que están disponibles para trabajar con elementos en la mesa de
trabajo.
PA RA REA L IZ A R ESTA A C C IÓ N H A GA ESTO
Creación de un elemento Presione Ctrl + N
Duplicar un elemento Mantenga presionada la tecla Alt y presione una tecla de

dirección.
Modificar el texto de un control Presione F2 (presione Esc para salir).
Seleccionar un elemento único Presione Tab para seleccionar elementos en el orden en que
aparecen en el documento. (también puede seleccionar
elementos mediante las teclas de dirección).
Seleccionar varios elementos Mantenga presionada la tecla Mayús mientras selecciona

cada elemento.
Seleccionar varios elementos no adyacentes Mantenga presionada la tecla Ctrl mientras selecciona los
primeros y últimos elementos.
Mover elementos seleccionados Presione las teclas de dirección. (Puede mantener presionada
la tecla Mayús para aumentar la distancia para desplazarse
por pulsación de tecla).
Girar un elemento en incrementos de 15 grados Mantenga presionada la tecla Mayús al girar el elemento.
Seleccionar todos los elementos Presione Ctrl + A
Desactivar la selección de todos los elementos Presione Ctrl + MAYÚS + A
Mostrar u ocultar manipuladores de elementos Presione F9
Seleccionar una propiedad de un elemento Con un elemento seleccionado y el foco en el ventana

Propiedades, presione Tab . (Usar Ctrl + Para cambiar el
foco a la ventana Propiedades). Puede utilizar las teclas de
dirección para seleccionar los valores de propiedad de las
listas desplegables.
Métodos abreviados a la ventana Esquema del documento

La tabla siguiente enumera los métodos abreviados disponibles al trabajar con elementos en la ventana
Esquema del documento.
Ocultar objetos de la mesa de trabajo mientras el foco está Ctrl+H

en la ventana Esquema del documento
Mostrar objetos de la mesa de trabajo mientras el foco está Desplazamiento + Ctrl + H

Bloquear objetos de la mesa de trabajo mientras el foco está Ctrl + L

Desbloquear objetos de la mesa de trabajo mientras el foco Desplazamiento + Ctrl + L

está en la ventana Esquema del documento
Vea también
Tutorial: Crear una UI usando el Diseñador XAML
Métodos abreviados de teclado de Blend para
Visual Studio
Métodos abreviados del proyecto

PA RA H A C ER ESTO H A GA ESTO
Creación de un nuevo proyecto Ctrl + Desplazamiento + N
Abrir un proyecto o una solución (no un sitio) Ctrl + Desplazamiento + O
Cerrar una solución Ctrl + Desplazamiento + C
Guardar una copia de la solución o el sitio Ctrl + Desplazamiento + P
Agregar un elemento existente al proyecto Ctrl + I
Agregar una referencia a un archivo DLL (WPF) Alt + Desplazamiento + R
Compilación del proyecto Ctrl + Desplazamiento + B
Probar el proyecto o el sitio F5
Métodos abreviados del documento

Cambiar entre los documentos abiertos Ctrl+Tab
Guardar el documento activo Ctrl + S
Guardar todos los documentos Ctrl + Desplazamiento + S
Cerrar el documento activo Ctrl + W
Cerrar todos los documentos abiertos Ctrl + Desplazamiento + W
Deshacer la última acción Ctrl+ Z
Rehacer la última acción deshecha Ctrl+Y o Ctrl+Mayús +Z
Crear una anotación en tiempo de diseño Ctrl + Desplazamiento + T
Cortar Ctrl + X
Copiar Ctrl + C
Pegar Ctrl + V
Eliminar Eliminar
Buscar texto (sólo vista XAML o editor de JavaScript) Ctrl+F
Buscar la siguiente aparición de texto (sólo vista XAML o F3 o Ctrl+H

editor de JavaScript)
Métodos abreviados de objetos

Creación de un elemento Ctrl + N
Duplicar un objeto Mantener presionada la tecla Alt y arrastrar el objeto
Cambiar el valor primario de un objeto Arrastrar el objeto sobre un panel de diseño y presionar Alt
Modificar el texto de un control F2 (Esc para salir)
Editar un control (WPF) Ctrl+E
Igualar el ancho de los objetos seleccionados Ctrl + Desplazamiento + 1
Igualar el alto de los objetos seleccionados Ctrl + Desplazamiento + 2
Igualar el tamaño de los objetos seleccionados Ctrl + Desplazamiento + 9
Voltear horizontalmente el objeto seleccionado Ctrl + Desplazamiento + 3
Voltear verticalmente el objeto seleccionado Ctrl + Desplazamiento + 4
Seleccionar varios objetos Mantener presionada la tecla Ctrl
Seleccionar varios objetos adyacentes Mantener presionada la tecla Mayús
Ajustar la selección al tamaño de la pantalla Ctrl + 9
Anclar el contenedor activo Ctrl + Desplazamiento + D
Desplazar los objetos seleccionados Teclas de Dirección
Ajustar ancho automáticamente Ctrl + Desplazamiento + 5
Ajustar alto automáticamente Ctrl + Desplazamiento + 6
Agrupar objetos en un panel de diseño Ctrl+G
Desagrupar objetos Ctrl + Desplazamiento + G

Traer al frente el objeto seleccionado Ctrl + Desplazamiento + ]
Traer adelante Ctrl + ]
Enviar atrás el objeto seleccionado Ctrl + Desplazamiento + [
Enviar atrás Ctrl + [
Crear un control de usuario con los objetos seleccionados F8

(WPF)
Restringir las proporciones de los objetos Mantener presionada la tecla Mayús al arrastrar el objeto
Girar un objeto en incrementos de 15 grados Mantener presionada la tecla Mayús al girar el objeto
Crear un trazado de recorte Ctrl + 7
Separar un trazado de recorte Ctrl + Desplazamiento + 7
Crear un trazado compuesto Ctrl + 8
Separar un trazado compuesto Ctrl + Desplazamiento + 8
Bloquear selección Ctrl + L
Desbloquear todos los objetos Ctrl + Desplazamiento + L
Mostrar selección Ctrl+T
Ocultar selección Ctrl + 3
Seleccionar todos los objetos Ctrl+A
Desactivar la selección de todos los objetos Ctrl + Desplazamiento + Un
Métodos abreviados de vistas

Cambiar entre las vistas Diseño , Código y Dos paneles F11
Acercar en la mesa de trabajo Ctrl + Signo igual ( = )
Alejar en la mesa de trabajo Ctrl + Signo menos ( - )
Acercar o alejar en la mesa de trabajo Girar la rueda del mouse
Mover la mesa de trabajo hacia la izquierda o hacia la Mantener presionada la tecla Mayús y girar la rueda del
derecha mouse
Mover la mesa de trabajo hacia arriba o hacia abajo Mantener presionada la tecla Ctrl y girar la rueda del mouse
Ajustar la selección al tamaño de la pantalla Ctrl + 0
Ver la mesa de trabajo a tamaño real Ctrl + 1
Mostrar u ocultar manipuladores F9
Mostrar u ocultar los límites de los objetos Ctrl+Mayús +H
Cambiar entre las vistas Diseño , XAML y Dos paneles F11
Métodos abreviados del área de trabajo

Cambiar entre las áreas de trabajo Animación y Diseño Ctrl + F11
Mostrar u ocultar el panel Activos Ctrl + Período de
Mostrar u ocultar el panel Resultados F12
Mostrar u ocultar todos los paneles F4
Restablecer diseño del área de trabajo activa Ctrl + Desplazamiento + R
Desplazar el área de trabajo Mantener presionada la barra espaciadora
Usar temporalmente la herramienta Selección (al mismo Mantener presionada la tecla Ctrl
tiempo que permanece seleccionada otra herramienta)
Teclas modificadoras de la mesa de trabajo en
Blend
Algunos métodos abreviados de teclado no tienen elementos de menú asociados, lo que significa que no puede
usar la interfaz de usuario de Blend para descubrirlos. La siguiente tabla contiene los métodos abreviados que
modifican una acción, por ejemplo, cambiar el tamaño de un objeto.
Seleccionar de forma temporal la herramienta Selección al Mantener presionada la tecla Ctrl

mismo tiempo que se mantiene seleccionada otra
herramienta (esto reduce el número de veces que tiene que
hacer clic en algo en el panel Herramientas y cambiar de
este panel a la herramienta Selección y otras herramientas,
y viceversa)
Desplazar objetos seleccionados mientras está seleccionada Presionar las teclas de dirección
la herramienta Selección
Desplazar la mesa de trabajo Mantener presionada la barra espaciadora y arrastrar la

mesa de la mesa
Acercar y alejar en la mesa de trabajo Girar la rueda del mouse
Acercar en la mesa de trabajo Mantener presionada + la barra espaciadora mientras

hace clic en cualquier parte de la mesa de la mesa
Alejar en la mesa de trabajo Mantener presionada la tecla Ctrl + Alt + mientras se hace
clic en cualquier parte de la mesa de la mesa
Mover la mesa de trabajo hacia la izquierda o hacia la Mantener presionada la tecla Mayús y girar la rueda del
derecha mouse
Mover la mesa de trabajo hacia arriba o hacia abajo Mantener presionada la tecla Ctrl y girar la rueda del
mouse
Restringir las proporciones de los objetos que se están Mantener presionada la tecla Mayús
dibujando o transformando
Girar un objeto en incrementos de 15 grados Mantener presionada la tecla Mayús
Duplicar un objeto Mantener presionada la tecla Alt y arrastrar el objeto
Cambiar el valor primario de un objeto Arrastrar el objeto sobre un panel de diseño y presionar Alt
antes de soltar el botón del mouse
Seleccionar varios objetos Mantener presionada la tecla Ctrl mientras selecciona cada
objeto
Seleccionar varios objetos adyacentes Mantener presionada la tecla Mayús mientras selecciona el
primer y el último objeto
Seleccionar mediante el dibujo de una marquesina Mantener presionada la tecla Mayús y arrastrar
Seleccionar un objeto debajo de otro objeto Mantenga presionada la tecla Alt y haga clic una vez para
cada capa de objetos.
Cambiar entre los documentos abiertos Presione la tecla Ctrl +
Abrir el panel Activos Presione Ctrl + period
Vea también
Métodos abreviados de teclado
Teclas modificadoras de la herramienta Pluma
Teclas modificadoras de la herramienta Selección directa
Teclas modificadoras de la herramienta Pluma en
Blend para Visual Studio
En la tabla siguiente se enumeran los métodos abreviados que se pueden usar para modificar un trazado al
crearlo con la herramienta Pluma . También se puede usar la herramienta Pluma para agregar o eliminar
puntos de un trazado existente, o para unir dos trazados existentes.
PA RA REA L IZ A R ESTA A C C IÓ N H A GA ESTO P UN T ERO
Crear un punto para iniciar un Haga clic para crear el punto nuevo
segmento de línea recta
Puntero de pluma
Crear un punto para iniciar un Haga clic para crear el punto nuevo y,
segmento de línea curva a continuación, arrastre para ajustar
los manipuladores de tangente antes Puntero de pluma
de soltar el botón del mouse
Ajustar la última tangente sin Hacer clic para crear el nuevo punto y,
restricción suave, lo que permite crear después, presionar Alt antes de soltar
un vértice agudo el botón del mouse Puntero de pluma para ajustar
Dividir la última tangente de modo Hacer clic para crear el nuevo punto y,
que los extremos de la tangente sean después, mantener presionada la tecla
independientes, lo que permite crear Alt y arrastrar antes de soltar el botón Puntero de pluma para ajustar
un vértice agudo del mouse
Mover el extremo de la tangente Haga clic para crear el nuevo punto y,

alrededor del nuevo punto en a continuación, mantenga presionada
incrementos de 15 grados la tecla Mayús + y arrastre antes de Puntero de pluma para ajustar
soltar el botón del mouse.
Reducir a cero la longitud de la Haga clic en el extremo

tangente en un extremo
Puntero de pluma para ajustar
Agregar un nuevo punto a un trazado Haga clic en el trazado en el lugar

existente donde desea agregar el punto nuevo
Puntero de pluma para insertar
Quitar un punto de un trazado Mantenga el mouse sobre un punto

existente y haga clic
Puntero de pluma para eliminar
Cerrar un trazado con un vértice Haga clic en el extremo inicial

agudo
Puntero de pluma para cerrar
Cerrar un trazado con una curva suave Haga clic en el punto inicial y arrastre
en el vértice para modificar el manipulador de
tangente antes de soltar el botón del Puntero de pluma para cerrar
mouse
Crear un vértice agudo al unir dos Seleccione dos trazados, haga clic en la
trazados herramienta Pluma , haga clic en un
extremo de uno de los trazados y Puntero de unión de la pluma
después en un extremo del otro
trazado
Crear un vértice suavizado al unir dos Seleccione dos trazados, haga clic en la
trazados herramienta Pluma , haga clic en un
extremo de uno de los trazados y, Puntero de unión de la pluma
después, arrastre un extremo del otro
trazado
Crea un trazado nuevo Mantener presionada la tecla Ctrl y

hacer clic fuera del trazado anterior
para que no se agreguen más puntos Puntero de inicio de la pluma
a dicho trazado; después, hacer clic en
el punto donde quiere que empiece el
nuevo trazado (o arrastrar)
Vea también
Teclas modificadoras de la mesa de trabajo
Teclas modificadoras de la herramienta Selección directa
Teclas modificadoras de la herramienta Selección
directa en Blend para Visual Studio
En la tabla siguiente se muestran los accesos directos que puede usar para modificar la forma de un trazado
existente con la herramienta Selección directa . Para agregar puntos a un trazado, quitar puntos de un
trazado o unir dos trazados existentes, use la herramienta Pluma .
Hacer que aparezcan los Haga clic en un punto de un trazado

manipuladores de tangente de un
punto en un trazado Puntero para mover un punto
Mover un punto de un trazado Arrastre un punto de un trazado
Puntero para mover un punto
Hacer que aparezcan los Haga clic en un segmento de un

manipuladores de tangente de un trazado
segmento entre dos puntos de un Puntero para mover un segmento
trazado
Mover un segmento entre dos puntos Arrastrar un segmento de un trazado

de un trazado
Puntero para mover un segmento
Cambiar el ángulo de una tangente Hacer clic en un punto o segmento de

para un punto de un trazado un trazado para que aparezcan los
manipuladores de tangente y, a Puntero para mover una tangente
continuación, arrastrar uno de los
extremos de tangente
Crear un punto en un vértice agudo o Mantener el puntero sobre un punto,

reducir la tangente a cero mantener presionada la tecla Alt y
hacer clic en el punto Puntero para convertir un punto
Suavizar un vértice agudo (o, si ya está Mantener el mouse sobre un punto y,

suavizado, cambiar el ángulo de la manteniendo presionada la tecla Alt ,
curva que pasa por el punto en el que arrastrar el punto Puntero para convertir un punto
ha hecho clic)
Convertir un segmento curvo en una Mantener el mouse sobre un

línea recta segmento del trazado y, manteniendo
presionada la tecla Alt , hacer clic en el Puntero para convertir un segmento
segmento
Seleccionar un segmento y curvarlo Desplazar el puntero sobre un

para que pase por la posición del segmento de un trazado, mantener
puntero presionada la tecla Alt y arrastrar el Puntero para convertir un segmento
segmento
Ajustar un extremo de una tangente Seleccionar directamente un punto o

de manera independiente del otro un segmento, mantener presionada la
extremo tecla Alt y arrastrar un extremo de la Puntero para convertir una tangente
tangente
Vea también
Teclas modificadoras de la mesa de trabajo
Teclas modificadoras de la herramienta Pluma
Inspeccionar las propiedades XAML durante la
depuración
Puede obtener una vista en tiempo real del código XAML en ejecución con Árbol visual dinámico y Live
Proper ty Explorer . Estas herramientas le proporcionan una vista de árbol de los elementos de interfaz de
usuario de la aplicación XAML en ejecución y le muestran las propiedades en tiempo de ejecución de cualquier
elemento de interfaz de usuario que seleccione.
Puede usar estas herramientas en las siguientes configuraciones:
T IP O DE A P L IC A C IÓ N SIST EM A O P ERAT IVO Y H ERRA M IEN TA S
Aplicaciones de Windows Presentation Foundation (4.0 y Windows 7 y versiones posteriores

versiones posteriores)
Aplicaciones universales de Windows Windows 10 y posteriores, con el SDK de Windows 10
Buscar elementos en el árbol visual en directo

Comencemos con una aplicación WPF muy sencilla que tiene una vista de lista y un botón. Al hacer clic en el
botón, se agrega otro elemento a la lista. Los elementos con números pares se muestran en color gris, mientras
que los elementos con números impares se muestran de color amarillo.
Creación del proyecto
1. Cree una nueva aplicación WPF de C#( Archivo nuevo proyecto, escriba "C# WPF", elija la plantilla de
proyecto Aplicación WPF, asigne al proyecto el nombre TestXAML y compruebe que > > .NET Core 3.1
aparece en la lista desplegable Plataforma de destino.
1. Cree una nueva aplicación WPF de C#( Archivo nuevo proyecto , escriba "WPF de C# " y elija > > Aplicación
WPF (.NET Framework). Asígnele el nombre TestXAML .
1. Cambie el archivo MainWindow.xaml por lo siguiente:
<Window x:Class="TestXAML.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestXAML"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button x:Name="button" Background="LightBlue" Content="Add Item" HorizontalAlignment="Left"
Margin="216,206,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<ListBox x:Name="listBox" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top"
Width="100" Margin="205,80,0,0"/>
</Grid>
</Window>
2. Agregue el siguiente controlador de comandos al archivo MainWindow.xaml.cs:

int count;
private void button_Click(object sender, RoutedEventArgs e)

{
ListBoxItem item = new ListBoxItem();
item.Content = "Item" + ++count;
if (count % 2 == 0)
{
item.Background = Brushes.LightGray;
}
else
{
item.Background = Brushes.LightYellow;
}
listBox.Items.Add(item);
}
3. Compile la solución y comience la depuración. La configuración de compilación debe ser Depurar, no

Liberar. Para obtener más información sobre las configuraciones de compilación, vea Descripción de las
configuraciones de compilación).
Cuando aparezca la ventana, debería ver que la barra de herramientas en la aplicación aparece dentro de
la aplicación en ejecución.
4. Ahora, haga clic varias veces en el botón Agregar elemento para agregar nuevos elementos a la lista.
Inspección de propiedades XAML
1. A continuación, abra la ventana Árbol visual en directo; para ello, haga clic en el botón izquierdo de la
barra de herramientas de la aplicación (o vaya a Depurar > Windows > Live Visual Tree ). Una vez abierto,
arrástrelo fuera de su posición de acoplamiento para que podamos ver esta ventana y la ventana
Propiedades activas en paralelo.
2. En la ventana Árbol visual dinámico , expanda el nodo ContentPresenter . Debe contener nodos para
el botón y el cuadro de lista. Expanda el cuadro de lista (y luego ScrollContentPresenter e
ItemsPresenter ) para buscar los elementos del cuadro de lista.
Si no ve el nodo ContentPresenter, alterne el icono Mostrar solo mi XAML en la barra de
herramientas. A partir Visual Studio versión 16.4 de 2019, la vista de elementos XAML se simplifica de
forma predeterminada mediante la característica XAML Just My. También puede deshabilitar esta
configuración en opciones para mostrar siempre todos los elementos XAML.
La ventana debe ser similar a la que se muestra a continuación:
3. Vuelva a la ventana de la aplicación y agregue algunos elementos más. Debería ver más elementos del
cuadro de lista en Live Visual Tree .
4. Ahora, echemos un vistazo a las propiedades de uno de los elementos del cuadro de lista.
Seleccione el primer elemento del cuadro de lista de Live Visual Tree y haga clic en el icono Mostrar
propiedades de la barra de herramientas. Debería aparecer Live Proper ty Explorer . Tenga en cuenta
que el campo Contenido es "Item1" y que el campo Color > de fondo #FFFFFFE0 .
5. Vuelva a Live Visual Tree y seleccione el segundo elemento del cuadro de lista. El Explorador de
propiedades en directo debe mostrar que el campo Contenido es "Item2" y que el campo Color de >
fondo #FFD3D3D3 (según el tema).
NOTE
Un borde amarillo alrededor de una propiedad en el Explorador de propiedades live significa que el valor de
propiedad se establece a través de un enlace, como Color = {BindingExpression} . Un borde verde significa
que el valor se establece mediante un recurso, como Color = {StaticResource MyBrush} .
La estructura real del XAML tiene muchos elementos que probablemente no le interesen, y si no conoce
bien el código tal vez tenga que perder bastante tiempo navegando por el árbol para encontrar lo que
está buscando. Live Visual Tree tiene un par de maneras que le permiten usar la interfaz de usuario de
la aplicación para poder encontrar el elemento que desea examinar.
Seleccione el elemento en la aplicación en ejecución. Puede habilitar este modo al seleccionar el
botón situado más a la izquierda de la barra de herramientas de Live Visual Tree . Con este modo
activado puede seleccionar un elemento de interfaz de usuario en la aplicación; Live Visual Tree (y Live
Proper ty Viewer ) se actualiza automáticamente para mostrar el nodo en el árbol correspondiente a
dicho elemento y sus propiedades. A partir Visual Studio versión 16.4 de 2019, puede configurar el
comportamiento de la selección de elementos.
Mostrar adornos de diseño en la aplicación en ejecución . Puede habilitar este modo al seleccionar
el botón que está justo a la derecha del botón Habilitar selección. Cuando la opción Mostrar adornos
de diseño está activada, la ventana de la aplicación muestra líneas horizontales y verticales a lo largo de
los límites del objeto seleccionado para que pueda ver lo que alinea, así como rectángulos que muestran
los márgenes. Por ejemplo, active el elemento Seleccionar y mostrar diseño y seleccione el bloque de
texto Agregar elemento en la aplicación. Debería ver el nodo del bloque de texto en Live Visual Tree y
las propiedades del bloque de texto en Live Proper ty Viewer , así como las líneas horizontales y
verticales en los límites del bloque de texto.
Obtener una vista previa de la selección . Puede habilitar este modo seleccionando el tercer botón
de la izquierda en la barra de herramientas de Live Visual Tree. Este modo muestra el XAML donde se ha
declarado el elemento, siempre y cuando tenga acceso al código fuente de la aplicación. Seleccione
Select element (Seleccionar elemento) y Preview selection (Vista previa) y, a continuación,
seleccione el botón en nuestra aplicación de prueba. Se abre el archivo MainWindow.xaml en Visual
Studio y se coloca el cursor en la línea en la que se define el botón.
Habilitar la selección en la aplicación en ejecución . Puede habilitar este modo al seleccionar el
botón situado más a la izquierda de la barra de herramientas de Live Visual Tree . Con este modo
activado puede seleccionar un elemento de interfaz de usuario en la aplicación; Live Visual Tree (y Live
Proper ty Viewer ) se actualiza automáticamente para mostrar el nodo en el árbol correspondiente a
dicho elemento y sus propiedades.
Mostrar adornos de diseño en la aplicación en ejecución . Puede habilitar este modo al seleccionar
el botón que está justo a la derecha del botón Habilitar selección. Cuando la opción Mostrar adornos
de diseño está activada, la ventana de la aplicación muestra líneas horizontales y verticales a lo largo de
los límites del objeto seleccionado para que pueda ver lo que alinea, así como rectángulos que muestran
los márgenes. Por ejemplo, active Habilitar selección y Mostrar diseño , y seleccione el bloque de
texto Agregar elemento en la aplicación. Debería ver el nodo del bloque de texto en Live Visual Tree y
las propiedades del bloque de texto en Live Proper ty Viewer , así como las líneas horizontales y
verticales en los límites del bloque de texto.
Obtener una vista previa de la selección . Puede habilitar este modo seleccionando el tercer botón
de la izquierda en la barra de herramientas de Live Visual Tree. Este modo muestra el XAML donde se ha
declarado el elemento, siempre y cuando tenga acceso al código fuente de la aplicación. Seleccione
Habilitar selección y Obtener una vista previa de la selección y, luego, seleccione el botón de
nuestra aplicación de prueba. Se abre el archivo MainWindow.xaml en Visual Studio y se coloca el cursor
en la línea en la que se define el botón.
Uso de herramientas XAML con aplicaciones en ejecución

Puede usar estas herramientas XAML, aunque no disponga del código fuente. Al adjuntar a una aplicación XAML
en ejecución, también puede usar Live Visual Tree en los elementos de interfaz de usuario de la aplicación.
Esto es un ejemplo, en el que se ha usado la misma aplicación de prueba WPF que hemos usado antes.
1. Inicie la aplicación TestXaml en la configuración Liberar. No puede adjuntar a un proceso que se está
ejecutando en una configuración Depurar .
2. Abra una segunda instancia de Visual Studio y haga clic en Depurar > Adjuntar al proceso . Busque
TestXaml.exe en la lista de procesos disponibles y haga clic en Adjuntar .
3. La aplicación comienza a ejecutarse.
4. En la segunda instancia de Visual Studio, abra Live Visual Tree (Depurar > Ventanas > Live Visual
Tree ). Debería ver los elementos de interfaz de usuario TestXaml y debería poder manipularlos como lo
hizo al depurar directamente la aplicación.
Vea también
Escritura y depuración de código XAML en ejecución con Recarga activa de XAML
Escritura y depuración de código XAML en
ejecución con Recarga activa de XAML en
Visual Studio
La recarga activa de XAML le ayuda a compilar la interfaz de usuario (UI) de la aplicación para UWP o de UWP
permitiéndole realizar cambios en el código XAML mientras se ejecuta la aplicación. La recarga activa está
disponible en Visual Studio y Blend para Visual Studio. Esta característica le permite compilar y probar
incrementalmente el código XAML con la ventaja de que el contexto de datos de la aplicación en ejecución, el
estado de autenticación y otras complejidades del mundo real son difíciles de simular durante el tiempo de
diseño. Si necesita ayuda para solucionar problemas de recargas activas de XAML, consulte solución de
problemas de la recarga activa de XAML en su lugar.
NOTE
Si usa Xamarin. Forms, consulte recarga activa de XAML para Xamarin. Forms.
La recarga activa de XAML es especialmente útil en estos escenarios:

Corrección de los problemas de la interfaz de usuario encontrados en el código XAML después de que la
aplicación se iniciara en modo de depuración.
Compilar un nuevo componente de interfaz de usuario para una aplicación que está en desarrollo,
mientras se aprovecha el contexto de tiempo de ejecución de la aplicación.
T IP O S DE A P L IC A C IÓ N A DM IT IDO S SIST EM A O P ERAT IVO Y H ERRA M IEN TA S
Windows Presentation Foundation (WPF) .NET Framework 4.6 y .NET Core

Windows 7 y versiones posteriores
Aplicaciones universales de Windows (UWP) Windows 10 y versiones posteriores, con elSDK de Windows
10 14393 +
En la ilustración siguiente se muestra el uso del árbol visual dinámico para abrir el código fuente y, a
continuación, la recarga activa de XAML para cambiar el color del botón y el texto del botón.
NOTE
La recarga activa de XAML de Visual Studio solo se admite actualmente cuando se ejecuta la aplicación en Visual Studio o
Blend para Visual Studio con el depurador adjunto (F5 o iniciar depuración ). No puede habilitar esta experiencia
mediante asociar al proceso a menos que establezca manualmente una variable de entorno.
Restricciones conocidas
A continuación se indican las limitaciones conocidas de la recarga activa de XAML. Para evitar cualquier
limitación en la que se ejecute, simplemente detenga el depurador y, a continuación, complete la operación.
L IM ITA C IÓ N WPF UW P N OTA S
Cableado de eventos a No compatible No compatible Consulte error: error al

controles mientras la comprobar el evento. Tenga
aplicación se está en cuenta que en WPF
ejecutando puede hacer referencia a un
controlador de eventos
existente. En aplicaciones
UWP, no se admite la
referencia a un controlador
de eventos existente.
L IM ITA C IÓ N WPF UW P N OTA S
Crear objetos de recursos Se admite a partir de Visual Compatible Ejemplo: agregar un

en un diccionario de Studio 2019 Update 2 SolidColorBrush a un
recursos como los de la diccionario de recursos para
página o la ventana de la su uso como
aplicación o app. Xaml StaticResource .
Nota: los recursos estáticos,
convertidores de estilo y
otros elementos que se
escriben en un diccionario
de recursos se pueden
aplicar/usar al usar la
recarga activa de XAML.
Solo se admite la creación
del recurso.
Cambiar la propiedad del
Diccionario de recursos
Source .
Agregar nuevos controles, No compatible No compatible None

clases, ventanas u otros
archivos al proyecto
mientras la aplicación se
está ejecutando
Administración de paquetes No compatible No compatible None

NuGet (agregar, quitar o
actualizar paquetes)
Cambiar el enlace de datos N/D Se admite a partir de Visual Esto requiere la versión
que usa la extensión de Studio 2019 1809 de Windows 10
marcado {x:Bind} (compilación 10.0.17763).
No se admite en Visual
Studio 2017 o versiones
anteriores.
No se admite el cambio de N/A No admitido None

directivas x:Uid
Varios procesos Compatible Compatible Compatible con Visual

Studio 2019, versión 16,6 y
versiones posteriores
Mensajes de error
Es posible que se produzcan los siguientes errores al usar la recarga activa de XAML.
M EN SA JE DE ERRO R DESC RIP C IÓ N
Error al comprobar el evento Error indica que está intentando conectar un evento a uno
de los controles, lo que no se admite mientras la aplicación
se está ejecutando.
M EN SA JE DE ERRO R DESC RIP C IÓ N
Este cambio no es compatible con la recarga activa de XAML Error indica que el cambio que está intentando no es
y no se aplicará durante la sesión de depuración. compatible con la recarga activa de XAML. Detenga la sesión
de depuración, realice el cambio y, a continuación, reinicie la
sesión de depuración. Si encuentra un escenario no admitido
que le gustaría ver como compatible, use la nueva opción
"sugerir una característica" de la comunidad de
desarrolladores de Visual Studio.
Vea también
Solución de problemas con la recarga activa de XAML
Recarga activa de XAML para Xamarin.Forms
Editar y continuar (Visual C#)
Solución de problemas con la recarga activa de
XAML
Esta guía de solución de problemas incluye instrucciones detalladas que deben resolver la mayoría de los
problemas que impiden que la recarga activa de XAML funcione correctamente.
La recarga activa de XAML es compatible con aplicaciones de WPF y UWP. Para obtener más información sobre
los requisitos del sistema operativo y las herramientas, vea escribir y depurar código XAML en ejecución con la
recarga activa de XAML.
La recarga activa no está disponible

Si ve el mensaje "la recarga activa no está disponible" en la barra de herramientas de la aplicación durante la
depuración de la aplicación, siga las instrucciones que se describen en este artículo para resolver el problema.
Comprobar que la recarga activa de XAML está habilitada

La característica está habilitada de forma predeterminada. Cuando empiece a depurar la aplicación, asegúrese
de que ve la barra de herramientas de la aplicación, que confirma que la recarga activa de XAML está disponible:
Si no ve la barra de herramientas en la aplicación, abra opciones de depuración > > General . Asegúrese de
que están seleccionadas las dos opciones, habilitar las herramientas de depuración de la interfaz de
usuario para XAML y Habilitar la recarga activa de XAML .
Si estas opciones están seleccionadas, vaya al árbol visual dinámico (depurar > > árbol visual de Windows
Live) y asegúrese de que la opción Mostrar herramientas en tiempo de ejecución en la aplicación (en el
extremo izquierdo) está seleccionada.
Compruebe que usa iniciar depuración en lugar de asociar al proceso.

La recarga activa de XAML requiere que la variable de entorno ENABLE_XAML_DIAGNOSTICS_SOURCE_INFO esté
establecida en 1 en el momento en que se inicia la aplicación. Visual Studio lo establece automáticamente como
parte del comando depurar > iniciar depuración (o F5 ). Si desea usar la recarga activa de XAML con el
comando depurar > asociar al proceso en su lugar, establezca la variable de entorno usted mismo.
NOTE
Para establecer una variable de entorno, use el botón Inicio para buscar "variable de entorno" y elija editar las variables
de entorno del sistema . En el cuadro de diálogo que se abre, elija variables de entorno , agréguelo como variable de
usuario y establezca el valor en 1 . Para limpiar, quite la variable cuando termine la depuración.
Comprobar que las propiedades de MSBuild son correctas

De forma predeterminada, la información de origen se incluye en una configuración de depuración. Se controla
mediante las propiedades de MSBuild en los archivos de proyecto (por ejemplo, *. csproj). En WPF, la propiedad
es XamlDebuggingInformation , que debe establecerse en True . En el caso de UWP, la propiedad es
DisableXbfLineInfo , que debe establecerse en False . Por ejemplo:
WPF:
<XamlDebuggingInformation>True</XamlDebuggingInformation>
UWP
<DisableXbfLineInfo>False</DisableXbfLineInfo>
Compruebe que está usando el nombre de la configuración de

compilación correcto
Debe establecer manualmente la propiedad de MSBuild correcta para admitir la recarga activa de XAML
(consulte la sección anterior), o bien debe usar el nombre de la configuración de compilación predeterminada
(depurar). Si no establece la propiedad de MSBuild correctamente, el nombre de una configuración de
compilación personalizada no funcionará ni se generará una versión de lanzamiento.
Comprobar que el archivo XAML no tiene errores

Si el archivo XAML muestra errores en el lista de errores , es posible que la recarga activa de XAML no
funcione.
Vea también
Escribir y depurar código XAML en ejecución con recarga activa de XAML
Depurar XAML en Blend
Puede usar las herramientas de Blend para Visual Studio para depurar el XAML en la aplicación. Al compilar un
proyecto, los errores se muestran en el panel Resultados . Haz doble clic en un error para buscar el marcado
relacionado con el error. Si necesita más espacio para trabajar, puede ocultar el panel resultados presionando
F12 .
Errores de sintaxis
Los errores de sintaxis se producen cuando el código XAML o los archivos de código subyacente no cumplen las
reglas de formato del lenguaje. La descripción del error puede ayudarte a solucionarlo. La lista especifica
también el nombre del archivo y el número de línea en que se produce el error. Los errores de XAML se
muestran en la pestaña Marcado en el panel Resultados .
TIP
XAML es un lenguaje de marcado basado en XML y sigue las reglas sintácticas de XML.
Entre las causas comunes de errores de sintaxis de XAML, figuran las siguientes:
Una palabra clave tiene errores ortográficos o el uso de las mayúsculas no es correcto.
Faltan las comillas en atributos o cadenas de texto.
A un elemento XAML le falta una etiqueta de cierre.
Un elemento XAML está en una ubicación no permitida.
Para obtener más información sobre la sintaxis común de XAML, consulte Guía de sintaxis XAML básica.
También puede identificar y resolver errores simples de sintaxis de código subyacente, errores de compilación y
errores en tiempo de ejecución en Blend. Pero puede que te resulte más fácil identificar y resolver los errores del
código subyacente en Visual Studio.
Depurar código XAML de ejemplo
En el ejemplo siguiente se le guiará a través de una sesión de depuración XAML simple en Blend.
Para crear un proyecto
1. En Blend, abra el menú archivo y, a continuación, haga clic en nuevo proyecto .
En el cuadro de diálogo Nuevo proyecto , aparece a la izquierda una lista de tipos de proyecto. Cuando
hagas clic en un tipo de proyecto, las plantillas de proyecto asociadas a ese tipo aparecerán a la derecha.
2. En la lista de tipos de proyecto, haga clic en Windows universal .
3. En la lista de plantillas de proyecto, haga clic en aplicación vacía (Windows universal) .
4. En el cuadro de texto nombre , escriba DebuggingSample .
5. En el cuadro de texto Ubicación , compruebe la ubicación del proyecto.
6. En la lista Lenguaje , haga clic en Visual C# y después en Aceptar para crear el proyecto.
7. Haga clic con el botón derecho en la superficie de diseño y haga clic en Ver código fuente para cambiar
a la vista Dos paneles .
8. Copie el código siguiente haciendo clic en el vínculo Copiar situado en la esquina superior derecha del
código.
<Grid HorizontalAlignment="Left" Height="222" VerticalAlignment="Top>

<Button content="Button" x:Mame="Home" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,38,0,0">
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,75,0,0"/>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,112,0,0"/>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top Margin="0,149,0,0"/>
</Grid>
9. Busque la cuadrícula predeterminada y pega el código entre las etiquetas de apertura y cierre de la
cuadrícula . Cuando termines, el código debe tener un aspecto similar al siguiente:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid HorizontalAlignment="Left" Height="222" VerticalAlignment="Top>
<Button content="Button" x:Mame="Home" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="0,38,0,0">
Margin="0,75,0,0"/>
Margin="0,112,0,0"/>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top
Margin="0,149,0,0"/>
</Grid>
</Grid>
10. Presione Ctrl + MAYÚS + B para compilar el proyecto.

Aparece un mensaje de error para avisarle de que el proyecto no se puede compilar, y el panel
Resultados con los errores aparece en la parte inferior de la aplicación.
Resolver errores de XAML

Cuando se detectan errores de XAML, la superficie de diseño muestra una alerta de que el proyecto contiene
marcado no válido. La lista de errores del panel Resultados se actualiza conforme resuelves los errores.
Cuando haya resuelto todos los errores, se habilitará la superficie de diseño y su aplicación se mostrará en ella.
Para resolver los errores de XAML
1. Haz doble clic en el primer error de la lista. La descripción es "el valor ' < ' no es válido en un atributo". Al
hacer doble clic en el error, el puntero busca la ubicación correspondiente en el código. El elemento <
que aparece delante de Button es válido, y no es un atributo como se indica en el mensaje de error. Si
examinas la línea de código anterior, observarás que faltan las comillas de cierre del atributo Top .
Escribe las comillas de cierre. Observe que la lista de errores del panel Resultados se actualiza para
reflejar los cambios.
2. Haga doble clic en la descripción "' 0 ' no es válido al principio de un nombre". Margin="0,149,0,0"
parece ser correcto. De todos modos, observa que la codificación de color de Margin no coincide con las
demás instancias de Margin en el código. Como faltan las comillas de cierre del par de nombre-valor
anterior ( VerticalAlignment="Top ), Margin=" se interpreta como parte del valor del atributo anterior y 0,
como el principio de un par nombre-valor. Escribe las comillas de cierre de Top . La lista de errores del
panel Resultados se actualiza para reflejar los cambios.
3. Haz doble clic en el otro error: "La etiqueta XML de cierre 'Button' no tiene una etiqueta de apertura
correspondiente". El puntero se coloca en la etiqueta Cuadrícula de cierre ( </Grid> ), lo que sugiere que
el error está dentro del objeto Grid . Observa que al segundo objeto Button le falta la etiqueta de cierre.
Cuando agregue la / de cierre, la lista del panel Resultados se actualizará. Ahora que se han resuelto
estos errores iniciales, se han identificado dos errores más.
4. Haz doble clic en "No se reconoce o no se puede tener acceso al miembro 'content'". La c c de content
debería estar en mayúsculas. Sustituye la "c" minúscula por una "c" mayúscula.
5. Haga doble clic en "la propiedad ' MAME ' no existe en el http://schemas.microsoft.com/winfx/2006/xaml
espacio de nombres". La "M" de "Mame" debería ser una "N". Sustituye la "M" por una "N". Ahora que se
puede analizar el código XAML, la aplicación aparece en la superficie de diseño.
Presione Ctrl + MAYÚS + B para compilar el proyecto y confirmar que no hay ningún error restante.
Depurar en Visual Studio

Puede abrir proyectos de Blend en Visual Studio para depurar más fácilmente el código en la aplicación. Para
abrir un proyecto de Blend en Visual Studio, haga clic con el botón derecho en el proyecto en el panel
proyectos y, después, haga clic en Editar en Visual Studio . Una vez finalizada la sesión de depuración en
Visual Studio, presione Ctrl + Mayús + S para guardar todos los cambios y, a continuación, cambie de nuevo a
Blend. Se te preguntará si deseas recargar el proyecto. Haga clic en sí a todo para seguir trabajando en Blend.
Para obtener más información sobre cómo depurar la aplicación, vea depurar aplicaciones para UWP en Visual
Studio.
Obtener ayuda
Si necesita más ayuda para depurar la aplicación de Blend, puede buscar en los foros de la comunidad de
aplicaciones para UWP los comentarios relacionados con su problema o publicar una pregunta.
Depuración de aplicaciones para Windows universal
(UWP) en Visual Studio
El depurador de Visual Studio proporciona compatibilidad completa con la depuración de las aplicaciones para
UWP. Consulte los artículos siguientes para las tareas de depuración de UWP.
TA REA DE DEP URA C IÓ N A RT ÍC ULO
Ejecutar aplicaciones para UWP en una máquina local, un Inicio de una sesión de depuración para una aplicación de
dispositivo remoto o conectado o un simulador de UWP
aplicaciones.
Depurar las aplicaciones implementadas, tanto locales como Depuración de un paquete de aplicaciones instalado
remotas.
Escribir y depurar código XAML en ejecución Puede usar la recarga activa de XAML para explorar el árbol
visual de un objeto XAML de UWP y ver las propiedades de
dependencia para los objetos contenidos en ese árbol. En
este tema se describe cómo usar la recarga activa de XAML.
Inspeccionar las propiedades XAML durante la depuración Puede usar el árbol visual dinámico para explorar el árbol
visual de un objeto XAML de UWP y ver las propiedades de
dependencia para los objetos contenidos en ese árbol.
Analice el efecto de la clase ContentPrefetcher en las Captura previa de contenido para aplicaciones para UWP
aplicaciones para UWP.
Vea también
Analizar la calidad del código utilizando análisis de código estático
Introducción a WPF
Windows Presentation Foundation (WPF) es un marco de interfaz de usuario que crea aplicaciones de cliente de
escritorio. La plataforma de desarrollo de WPF admite un amplio conjunto de características de desarrollo de
aplicaciones, incluido un modelo de aplicación, recursos, controles, gráficos, diseños, enlace de datos,
documentos y seguridad. El marco es parte de .NET, por lo que si ya ha creado aplicaciones con .NET mediante
ASP.NET o Windows Forms, la experiencia de programación debe resultarle familiar. WPF usa el lenguaje XAML
para proporcionar un modelo declarativo para la programación de aplicaciones.
Esta sección contiene temas que presentan WPF y le ayudarán a empezar a trabajar con él.
¿Por dónde debo empezar?

C O N T EN IDO A RT ÍC ULO S
Quiero comenzar de inmediato… Tutorial: Mi primera aplicación de escritorio WPF
Quiero comparar herramientas de diseño XAML... Diseño de XAML en Visual Studio y Blend para Visual Studio
Novedades de .NET Guía de .NET
Elementos esenciales de aplicaciones
Introducción a Visual C#
Más información sobre WPF... Información general sobre WPF
Información general sobre XAML (WPF)
Controles
Introducción al enlace de datos
Enlace de datos de WPF con LINQ to XML
¿Es un desarrollador de Windows Forms? Controles de Windows Forms y controles equivalentes de

WPF
Escenarios admitidos en WPF e interoperabilidad con

Windows Forms
Consulte también
Guía de escritorio de WPF
Biblioteca de clases (WPF)
Recursos de la comunidad de WPF
Información general sobre el desarrollo de aplicaciones
Depurar WPF
Visual Studio proporciona características adicionales para facilitar la depuración de aplicaciones WPF.
Temas relacionados
T IT L E DESC RIP C IÓ N
Escribir y depurar código XAML en ejecución Puede usar la recarga activa de XAML para explorar el árbol
visual de un objeto de WPF y ver las propiedades de
dependencia de WPF para los objetos contenidos en ese
árbol. En este tema se describe cómo usar la recarga activa
de XAML.
Inspeccionar las propiedades XAML durante la depuración Puede usar el árbol visual dinámico para explorar el árbol
visual de un objeto de WPF y ver las propiedades de
árbol.
Cómo: Uso del visualizador de árboles de WPF Puede usar el visualizador de árboles de WPF para explorar
el árbol visual de un objeto de WPF y ver las propiedades de
árbol. En este tema se describe la interfaz de usuario del
visualizador de árboles de WPF.
Cómo: Presentación de información de seguimiento de WPF Visual Studio puede recibir información de seguimiento de la
depuración de las aplicaciones WPF y mostrar esa
información en la ventana Salida . En este tema se describe
cómo habilitar y personalizar la presentación de la
información de seguimiento de WPF.
Vea también
Depurar código administrado
Procedimiento Usar el visualizador de árboles de
WPF
Puede usar el visualizador de árboles de WPF para explorar el árbol visual de un objeto de WPF y ver las
propiedades de dependencia de WPF para los objetos contenidos en ese árbol. Para obtener más información
sobre los árboles visuales, vea Árboles en WPF. Para obtener más información sobre las propiedades de
dependencia, vea Introducción a las propiedades de dependencia.
Al abrir el visualizador de árboles de WPF, verá dos paneles: el Árbol visual a la izquierda y las Propiedades
de Nombre : Tipo a la derecha. Al seleccionar cualquier objeto en el panel Árbol visual , el panel Propiedades
de Nombre : Tipo se actualizará automáticamente para mostrar las propiedades de dicho objeto.
NOTE
También puede usar el árbol visual dinámico y el explorador de propiedades dinámicas para examinar el árbol visual de los
objetos WPF. El visualizador de árboles de WPF es una característica heredada y no está en desarrollo activo.
Para abrir el visualizador de árboles de WPF

1. En una Información sobre datos, una ventana Inspección , una ventana Automático o una ventana
Variables locales , junto al nombre de un objeto WPF, haga clic en la flecha adyacente al icono de lupa.
Se mostrará una lista de visualizadores.
2. Haga clic en Visualizador de árboles de WPF .
Para buscar en el árbol visual
En el panel Árbol visual , escriba la cadena que desea buscar en el cuadro Buscar .
El visualizador de árboles de WPF buscará inmediatamente el primer objeto del árbol visual que coincida
con la cadena que ha escrito. Escriba más caracteres si desea buscar una coincidencia más precisa.
Para ir a la siguiente coincidencia dentro del árbol visual, haga clic en Siguiente .
Para volver a la coincidencia anterior, haga clic en Anterior .
Para borrar el criterio de búsqueda, haga clic en Borrar .
Para buscar en la lista de propiedades
En el panel Propiedades de Nombre : Tipo, escriba la cadena que desea buscar en el cuadro Filtro .
El visualizador de árboles de WPF buscará inmediatamente las propiedades que coincidan con la cadena
que ha escrito; ahora, la lista solo muestra las propiedades que coinciden con la cadena que ha escrito.
Escriba más caracteres si desea buscar una coincidencia más precisa.
Para borrar el criterio de búsqueda, haga clic en Borrar .
Para cerrar el visualizador
Haga clic en el icono Cerrar situado en la esquina superior derecha del cuadro de diálogo.
Vea también
Create Custom Visualizers (Crear visualizadores personalizados)
Árboles en WPF
Información general sobre las propiedades de dependencia
Procedimiento Presentación de información de
seguimiento de WPF
Visual Studio puede recibir información de seguimiento de la depuración de las aplicaciones WPF y mostrar esa
información en la ventana Salida . Para mostrar la información de seguimiento de depuración, debe estar
habilitada la traza de WPF.
Puede habilitar la traza de WPF en su archivo App.Config o, mediante programación, utilizando la clase
PresentationTraceSources. Una manera más fácil de habilitar la traza de WPF es usar la ventana Opciones . No
se admite la traza WPF en las aplicaciones web.
Para habilitar o personalizar la información de seguimiento de WPF
1. En el menú Herramientas , seleccione Opciones .
2. En el cuadro de diálogo Opciones , en el cuadro de la izquierda, abra el nodo Depuración .
3. En Depuración , haga clic en Ventana de salida .
4. En Configuración general de salida , seleccione Toda la salida de depuración .
5. En el cuadro de la derecha, busque Configuración de seguimiento de WPF .
6. Abra el nodo Configuración de seguimiento de WPF .
7. En Configuración de seguimiento de WPF , haga clic en la categoría de valores que desea habilitar
(por ejemplo, Enlace de datos ).
Aparecerá un control de lista desplegable en la columna Configuración, al lado de Enlace de datos o de
la categoría en la que haya hecho clic.
8. Haga clic en la lista desplegable y seleccione el tipo de información de seguimiento que quiere ver: All ,
Critical , Error , Warning , Information , Verbose o ActivityTracing .
Critical solo habilita la traza de los eventos críticos.
Error habilita la traza de los eventos críticos y de error.
Warning habilita la traza de los eventos críticos, de error y de advertencia.
Information habilita la traza de los eventos críticos, de error, de advertencia y de información.
Verbose habilita la traza de los eventos críticos, de error, de advertencia, de información y detallados.
ActivityTracing habilita la traza de los eventos de detención, inicio, suspensión, transferencia y
reanudación.
Para obtener más información sobre el significado de estos niveles de información de seguimiento, vea
SourceLevels.
9. Haga clic en Aceptar .
Para deshabilitar la información de seguimiento de WPF
1. En el menú Herramientas , seleccione Opciones .
2. En el cuadro de diálogo Opciones , en el cuadro de la izquierda, abra el nodo Depuración .
3. En Depuración , haga clic en Ventana de salida .
4. En el cuadro de la derecha, busque Configuración de seguimiento de WPF .
5. Abra el nodo Configuración de seguimiento de WPF .
6. En Configuración de seguimiento de WPF , haga clic en la categoría de valores que desea habilitar
(por ejemplo, Enlace de datos ).
Aparecerá un control de lista desplegable en la columna Configuración, al lado de Enlace de datos o de
la categoría en la que haya hecho clic.
7. Haga clic en la lista desplegable y seleccione Desactivado .
8. Haga clic en Aceptar .
Vea también
Depurar WPF

XML Documentation

Cargado por

Copyright:

Formatos disponibles

XML Documentation

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

XML Documentation

Cargado por

Copyright:

Formatos disponibles

Contents

Herramientas XAML en Visual Studio

<Button Click="ButtonClick">Show updates</Button>

Editor de código XAML

Interfaz de usuario del editor de código XAML

Panel central, editor de código

Esto es lo que hace cada característica y su utilidad:

Características específicas de XAML

Para obtener más información, vea la página Introducción a IntelliCode.

Valores opcionales de XAML

Opciones universales del editor de texto

General Cuadro de diálogo Opciones: Editor de texto > Todos los

Barras de desplazamiento Opciones, Editor de texto, Todos los idiomas, Barras de

Tabulaciones Opciones, editor de texto, todos los lenguajes, pestañas

Opciones del editor de texto específicas de XAML

Formato Opciones, Editor de texto, XAML, Formato

Varios Opciones, editor de texto, XAML y varios

Funcionalidades avanzadas de Blend para Visual Studio

Crear animaciones No hay ninguna Puede crear animaciones Animar objetos

También puede convertir

Por ejemplo, puede usar

Conectar la interfaz de Puede crear un origen a En el caso de las Mostrar datos

Los datos en tiempo de Las capacidades de

Para datos reales, puede

Área de trabajo del Diseñador XAML

Estos comandos están disponibles en esta barra de herramientas:

Ventana Esquema del documento

Adición de un elemento a un diseño

Cambio del orden de distribución en capas de los elementos

Cambio de la alineación de un elemento

Cambio de los márgenes de un elemento

Agrupación y desagrupación de elementos

Restablecimiento del diseño de un elemento

Vea un vídeo cor to: WPF - DockPanel

Crear un nuevo recurso

Aplicación de un recurso a un elemento o propiedad

public class ShoppingCart : DependencyObject

public static readonly DependencyProperty ItemCountProperty =

Public Class ShoppingCart

Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(

5. En el cuadro de herramientas , elija un control TextBlock para agregar al formulario.

Para determinar si el código del proyecto está provocando una

Para depurar código de proyecto que se ejecuta en el diseñador

Este es el proceso para el Diseñador XAML en la primera instancia de Visual Studio.

Para deshabilitar el código del proyecto en el diseñador

Opciones de visualización de controles

Aspectos básicos de los datos en tiempo de diseño

<TextBlock Text="{Binding Name}" d:Text="Name!" />

<d:Button Content="Design Time Button" />

Vista previa de imágenes en tiempo de diseño

<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />

Datos en tiempo de diseño para ListView

Uso de datos en tiempo de diseño con tipos y propiedades

Incorporación del prefijo en tiempo de diseño a mc:Ignorable

<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>

Creación de un espacio de nombres xmlns personalizado

[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]

Ventana Objetos y escala de tiempo

Dibujar una forma