Editor de código XAML

El editor de código XAML en la IDE de Visual Studio incluye todas las herramientas necesarias para crear aplicaciones de WPF y UWP para la plataforma Windows, así como para Xamarin.Forms o .NET MAUI. En este artículo se describe el rol que desempeña el editor de código al desarrollar aplicaciones basadas en XAML y las características que son exclusivas del editor de código XAML en Visual Studio 2019.

Para empezar, echemos un vistazo al IDE (entorno de desarrollo integrado) con un proyecto de WPF abierto. En la imagen siguiente se muestran varias de las herramientas clave del IDE que 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 XAML (el tema de este artículo), donde crea y edita su código.
• La ventana del Diseñador XAML, donde diseñas tu interfaz de usuario.
• La ventana acoplable del cuadro de herramientas , donde se agregan controles a la UI.
• 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 puede cambiar la apariencia de su interfaz de usuario y el funcionamiento de sus controles.

Para continuar, vamos a obtener más información sobre el editor de código XAML.

Interfaz de usuario del editor de código XAML

Aunque la ventana del editor de código para aplicaciones XAML comparte algunos elementos de interfaz de usuario (interfaz de usuario) que también aparecen en nuestro IDE estándar, también incluye algunas características únicas que facilitan el desarrollo de aplicaciones XAML.

Este es un vistazo a la propia ventana del editor de código XAML.

A continuación, echemos un vistazo a 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.

Así es como funcionan:

• 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 del editor de código XAML en el IDE.
• La pestaña XAML cambia el foco de nuevo 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 vertical, un botón División horizontal y un botón Contraer panel.

Así es como funcionan:

• El botón División vertical 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 del IDE de una alineación vertical a una alineación 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, elija de nuevo el mismo botón, que ahora se denomina botón Expandir panel).

Segunda fila

En la segunda fila de la parte superior de la ventana de código XAML, hay dos listas desplegables Ventana. Sin embargo, si ve la información sobre herramientas de estos elementos de interfaz de usuario, las identifica aún más como "Elemento: Ventana" y "Miembro: Ventana".

Las listas desplegables de la Ventana tienen funciones diferentes, como sigue:

• El Elemento: Ventana de la izquierda permite ver y navegar a elementos principales o del mismo nivel.

  En concreto, muestra una vista similar a un esquema que 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 que incluye el elemento seleccionado.

  

• El 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 que incluye la propiedad seleccionada.

  

Panel central, editor de código

El panel central es la parte "código" del editor de código XAML. Incluye la mayoría de las características que puedes encontrar en el editor de código IDE . Nos centraremos en varias de las características universales del IDE que pueden ayudarle a desarrollar el código XAML. También resaltaremos las características únicas a XAML en el IDE.

Acciones rápidas

Puede usar acciones rápidas para refactorizar, generar o modificar código de otro modo 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.

Así es como:

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 desea corregir todas las apariciones 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, consulte la página IntelliSense en Visual Studio. Además, para obtener más información sobre algunas de las formas habituales en que los desarrolladores usan acciones rápidas, consulte 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. Este es el modo en que los colores se relacionan con las acciones que realice:

• Los cambios realizados desde que se abrió el archivo, pero no guardados, se indican mediante una barra amarilla en el margen izquierdo (conocido como margen de selección).

  

• Después de guardar los cambios (pero antes de cerrar el archivo), la barra se vuelve verde.

  

Para activar y desactivar esta característica, cambie la opción Seguimiento de cambios en la configuración Editor de texto (Tools>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.

Haga clic con el botón derecho en el menú contextual.

Al editar el código en el editor de código XAML, hay varias características a las que puedes acceder mediante el menú contextual del botón derecho. La mayoría de estas características están disponibles universalmente en el IDE de Visual Studio, mientras que algunas son específicas de usar un editor de código junto con una ventana Diseño.

Esto es lo que hace cada característica y cómo resulta útil:

• 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: Refactoriza, genera o bien modifica el código con una sola acción. Al mantener el puntero sobre el código, verá un icono de bombilla cuando haya disponible una acción rápida o una refactorización.
  Consulte 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 renombrar, recibirá un mensaje de error que indica "Solo los prefijos de espacio de nombres pueden ser renombrados."
• Quitar y ordenar espacios de nombres: quita los espacios de nombres sin usar y, a continuación, ordena esos espacios de nombres que permanecen.
• Ver definición: muestra una vista previa de la definición de un tipo sin salir de la ubicación actual en el editor.
  Consulte también: Peek Definition y Ver y editar código mediante Peek Definition.
• Ir a definición: navega al origen de un tipo o miembro y abre el resultado en una nueva pestaña.
  Vea también: Ir a la definición.
• Rodear con...: permite usar fragmentos de código envolventes, que se agregan alrededor de un bloque de código seleccionado.
  Consulte también: Fragmentos de código de expansión y fragmentos de código Rodear con.
• Insertar fragmento de código - Inserta un fragmento de código en la ubicación del cursor.
• Cortar: 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.
  Consulte 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 puede usarlo para abrir otro panel del editor de código. Además, puede usar la barra de desplazamiento para ayudarle a codificar de forma más eficaz agregando anotaciones a ella o usando diferentes modos de visualización.

Dividir 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 es útil porque funcionan independientemente entre sí, 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, consulte la página Administrar ventanas del editor.

Usar anotaciones o modo de mapa

También puede cambiar el aspecto 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 aprecian utilizar el modo mapa , que muestra líneas de código en miniatura en la barra de desplazamiento. Los desarrolladores que tienen mucho código en un archivo pueden encontrar que el modo de mapa realiza un seguimiento de las líneas de código de forma más eficaz 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, consulte la Personalizar la barra de desplazamiento página.

Características específicas de XAML

La mayoría de las siguientes características están disponibles universalmente en el IDE de Visual Studio, pero hay dimensiones agregadas a algunas de ellas que facilitan la codificación para los desarrolladores xaml.

Fragmentos de código 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 Insertar fragmento de código, o bien una combinación de métodos abreviados de teclado (Ctrl+K, Ctrl+X). Hemos mejorado intelliSense para que admita mostrar fragmentos de código XAML, que funcionan tanto para fragmentos de código integrados como para los fragmentos de código personalizados que agregue manualmente. Algunos fragmentos de código XAML predefinidos incluyen #region, Column definition, Row definition, Settery Tag.

Para obtener más información, consulte las páginas de fragmentos de código y fragmentos de código C# .

Compatibilidad con #region de XAML

En Visual Studio, la compatibilidad con #region está disponible para desarrolladores XAML en WPF, UWP, Xamarin.Formsy .NET MAUI. En Visual Studio 2019, seguimos realizando mejoras incrementales al soporte de #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.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

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, consulte la página de Esquematización .

Comentarios de XAML

A menudo, los desarrolladores prefieren documentar su código mediante comentarios. Puedes agregar comentarios al código XAML que se encuentra en la pestaña MainWindow.xaml de las maneras siguientes:

• Escriba <!-- antes de un comentario y agregue --> después del comentario.

• Escriba <! y elija !-- en la lista de opciones.

  

• Seleccione el código que desea rodear con un comentario y, a continuación, 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 desea rodear con un comentario y presione Ctrl+K, Ctrl+C. Para quitar la marca de 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 la Acciones rápidas que puedes usar para refactorizar, generar o modificar código de otro modo.

Estos son algunos ejemplos de cómo pueden beneficiarse de la experiencia de codificación 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 lo 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 nombreo presionando Ctrl+Ry, a continuación, 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

XAML condicional proporciona una manera de usar el método ApiInformation.IsApiContractPresent en el marcado XAML. Esto le permite establecer propiedades y crear instancias de objetos en el marcado en función de la presencia de una API sin necesidad de 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 XAML

La función Visualizador de estructura del editor de código muestra las líneas guía de estructura, que son líneas discontinuas verticales que indican etiquetas de apertura y cierre coincidentes en el código. Estas líneas verticales facilitan la visualización de dónde comienzan y terminan los bloques lógicos.

Para obtener más información, consulte la página Navegar por el código.

IntelliCode para XAML

Cuando agregas una etiqueta XAML al código, normalmente empiezas con un corchete angular izquierdo <. Al escribir ese corchete angular, aparece un menú de IntelliCode que muestra varias de las etiquetas XAML más populares. Elige el que quieras agregar rápidamente a tu código.

Puede reconocer las selecciones de IntelliCode porque aparecen en la parte superior de la lista y están marcadas con una estrella.

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.

Configuración opcional de XAML

Puedes usar el cuadro de diálogo opciones de para cambiar la configuración predeterminada del editor de código XAML. Para ver la configuración, elija Herramientas>Opciones>Editor de texto>XAML.

Opciones del editor de texto universal

En el cuadro de diálogo opciones de 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 vinculada de la tabla siguiente para obtener más información sobre estas opciones y cómo usarlas.

Opciones del editor de texto específico 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 vinculada para obtener más información sobre estas opciones y cómo usarlas.

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.

Consulte también

• características del editor de código de Visual Studio
• XAML en aplicaciones de UWP
• XAML en aplicaciones de Xamarin.Forms
• XAML en aplicaciones .NET MAUI