Herramientas de edición XAML

Con ReSharper, obtiene más ayuda para la edición de archivos XAML siempre que trabaje con aplicaciones para Universal Windows Platform (UWP), WPF, Silverlight o Windows Phone. Esto incluye análisis de calidad de código sobre la marcha, refactorizaciones, generación y reordenamiento de código, así como una navegación rápida por toda la solución.

Análisis de calidad del código

Las funcionalidades de análisis de calidad del código de ReSharper le ayudan a encontrar y corregir rápidamente los errores de sus archivos XAML. Veamos cómo funciona usando algunos ejemplos.

ReSharper resalta los problemas de código en un archivo XAML

Ejemplo 1. Errores a nivel del lenguaje XAML

Digamos que está trabajando en un proyecto WPF donde sólo se permite XAML 2006. Si ReSharper encuentra un objeto genérico de XAML 2009, resalta el objeto como un error de lenguaje. Si presiona Alt+Intro sobre el resaltado, ReSharper mostrará sugerencias de arreglo rápido para declarar en su lugar un tipo heredado de System.Collections.Generic.List<string>.

Cuando aplica el arreglo rápido, ReSharper:

  • Crea un nuevo archivo .cs en el que declara un nuevo tipo wrapper que hereda de List.
  • En el archivo XAML original, elimina el atributo TypeArguments, cambia el tipo del objeto al nuevo tipo wrapper e inserta una nueva directiva de espacio de nombres de ser necesario.
ReSharper resalta los problemas de código en un archivo XAML

Ejemplo 2. Recursos inexistentes

Si está usando un recurso que aún no está declarado, el resaltado de errores de ReSharper se lo recordará.

Cuando presione Alt+Intro, ReSharper sugerirá varias posiciones posibles para crear el recurso faltante.

Si el tipo del recurso generado aún no se declaró, no hay problema: ReSharper le ofrecerá la opción de crear ya sea un tipo CLR o un tipo XAML (es decir, un UserControl) basado en su uso. Al elegir una de las dos opciones se crea un archivo con la implementación predeterminada.

Arreglo rápido para un comentario mal colocado en XAML

Ejemplo 3. Comentarios mal colocados

Si por error coloca un comentario dentro de un elemento, ReSharper lo resaltará y ofrecerá opciones para resolver el error.

Corrección de calificadores de tipo redundantes en XAML

Ejemplo 4. Calificadores de tipo redundantes

En caso de que un TargetType se defina en un setter de estilo, ReSharper detecta redundancias en los calificadores de tipo y ofrece una solución.

La Finalización inteligente de ReSharper genera métodos controladores de eventos La Finalización inteligente de ReSharper le ayuda a elegir los colores correctos La Finalización de símbolos importados de ReSharper le ayuda a importar tipos desde espacios de nombres a los que aún no se ha hecho referencia en su archivo XAML

IntelliSense XAML extendido

Puede utilizar la finalización de código de ReSharper en etiquetas XAML. La compatibilidad con CamelHumps le permitirá añadir atributos rápidamente: simplemente introduzca unos pocos símbolos y presione Ctrl+Espacio para mostrar la lista de sugerencias relevantes provistas por la Finalización de símbolos de ReSharper.

Si presiona Ctrl+Alt+Espacio para invocar la Finalización inteligente, ReSharper le ofrecerá otras opciones adicionales sensibles al contexto según dónde esté ubicado en el código. Por ejemplo, si invoca la finalización inteligente en una declaración de controlador de evento, ReSharper le ofrecerá generar el método controlador.

Si usa la Finalización inteligente dentro de un atributo, podrá crear rápidamente un nuevo recurso (estático o dinámico), una vinculación o una referencia a un elemento estático.

Otra importante ventaja de la finalización de código de ReSharper es que muestra colores para pinceles esperados en atributos tales como Background o OpacityMask.

ReSharper también admite la Finalización de símbolos importados en XAML. Esto significa que podrá completar tipos a partir de ensambles a los que se hace referencia en su solución pero no tienen las correspondientes directivas de importación de espacio de nombres en el archivo actual.

Por supuesto, una vez que haya usado la finalización de código de ReSharper de esta forma, la directiva de importación de espacio de nombres se insertará automáticamente.

De forma alternativa, si tiene un tipo dentro de un archivo XAML que por algún motivo no se importa, ReSharper le ofrecerá la opción de crear rápidamente la directiva de espacio de nombre.

Navegación desde un símbolo en código XAML Navegación a archivos relacionados desde código XAML Estructura de archivos para archivos XAML

Navegación y búsqueda

El menú Navigate To (Navegar a) de ReSharper funciona sobre los elementos de código XAML igual que como funciona en los archivos de código C#. Si presiona Alt+` sobre un uso o declaración de símbolo, se abrirá un menú con múltiples posibles destinos de navegación.

La navegación con Go To File Member funciona en un archivo XAML igual que en un archivo C#, ayudándole a navegar a un elemento con un tipo, nombre o clave particular. Una vez más, no necesitará escribir todo el nombre; la compatibilidad con CamelHumps en minúscula le permitirá encontrar WatchList con solo escribir wl.

Cuando presiona Ctrl+Alt+F7 en un archivo XAML, obtendrá una lista de todos los archivos relacionados. Por ejemplo: el archivo de código detrás del modelo, cualquier recurso al que se hace referencia en el archivo XAML original o las imágenes usadas en sus controles.

Go to Declaration (F12) y la navegación con Ctrl-clic también funciona de la misma forma en un archivo XAML que en un archivo común de código C#. Por ejemplo, mientras mantiene presionado Ctrl puede pasar el cursor sobre el nombre de una clase particular. ReSharper subrayará el nombre de la clase y, si hace clic en el enlace, irá directamente a la definición de la clase.

Así también, al igual que con archivos de código, la ventana File Structure muestra la estructura del archivo XAML, lo que le permitirá navegar rápidamente hasta el elemento de código que busca.

Para buscar usos de un elemento XAML en particular presione Mayús+F12, lo que invocará el comando Find Usages (Buscar usos). ReSharper mostrará todas las ubicaciones donde se utilizar el elemento.

También puede presionar Mayús+Alt+F11, lo que resaltará los usos. Esto le da una buena vista general de las posiciones donde se usa un símbolo en particular en el archivo actual.

Invocación de plantilla para una propiedad de dependencia Invocación de plantilla para una propiedad de dependencia

Generación de propiedades de dependencia

Crear propiedades de dependencias puede ser increíblemente tedioso. Ese es otro problema que puede solucionar ReSharper: su motor de plantilla de código es lo suficientemente potente para permitirle crear fragmentos granulares para implementar en propiedades de dependencias con solo presionar un par de teclas. Tan solo escriba en el editor el nombre de una plantilla personalizable y se implementará el par de una propiedad y su correspondiente propiedad de dependencia, con finalización inteligente de código disponible en todos los marcadores de posición que deberá rellenar.

De forma similar, puede hacer que ReSharper implemente propiedades adjuntas, las cuales son incluso más molestas que las propiedades de dependencia comunes. Tras implementar la plantilla personalizable, puede pasar por todas sus numerosas variables y utilizar la finalización de código de ReSharper donde sea posible.

Si bien actualmente ReSharper no incluye en su versión estándar las plantillas activas para propiedades de dependencia y propiedades adjuntas, puede descargarlas e importarlas.

Finalización de código de ReSharper en ASP.NET

Ayudantes de edición para XML y XAML

ReSharper admite varias acciones contextuales que simplifican trabajar con sintaxis XML y se pueden usar en XAML. Para mencionar unas pocas, puede sustituir un nombre de etiqueta con otro nombre, convertir un atributo en un elemento anidado o eliminar una etiqueta y ascender de nivel a sus elementos secundarios.

También hay más de una docena de acciones contextuales específicas para XAML, que le permiten añadir o eliminar definiciones de columna o fila, crear vistas y recursos, alternar entre distintos tipos de referencias a recursos, extraer setters de propiedades a estilos y más.

Extracción de estilo XAML Extracción de estilo XAML

Refactorización de código XAML

Como los elementos de XAML son, esencialmente, equivalentes a miembros de clases ordinarias, algunas de las factorizaciones que funcionan en C# también funcionan en XAML. Por ejemplo, puede cambiar de nombre o eliminar con seguridad un recurso con solo abrir el menú Refactor This.

Cuando navega sobre una referencia a una propiedad o método en XAML, la variedad de refactorizaciones que se muestran en el menú Refactor This coinciden con lo que usted esperaría si abriera el menú en código C# o VB.NET.

Además de refactorizaciones C# y VB.NET, hay algunas refactorizaciones específicas para XAML:

En XAML es común definir estilos inline para varios controles y luego moverlos a una definición de estilo. ReSharper permite hacer esta operación más rápido con la refactorización Extract Style (Extraer estilo).

El cuadro de diálogo que aparece para esta refactorización le ayuda a decidir hacia qué recurso extraer las propiedades (puede elegir un recurso existente o crear uno nuevo), así como qué propiedades desea extraer.

Las refactorizaciones Extract Resource e Inline Resource le permiten mover básicamente cualquier asignación de propiedad (incluidas las presentes en extensiones de marcado) a un recurso y viceversa: extraer una definición de un recurso y partirlo directamente al elemento.

ReSharper le ayuda a reordenar el código XAML

Reordenamiento de código

Al usar las funcionalidades de reordenamiento de código de ReSharper, podrá cambiar la posición de elementos dentro de un archivo XAML o incluso atributos dentro de estos elementos. Ambas operaciones se realizan presionando las teclas Ctrl+Alt+Mayús y las teclas direccionales.

Al trabajar con atributos, estas combinaciones de teclas le permiten reubicar los atributos con la etiqueta, de forma que las teclas direccionales Izquierda y Derecha cambian la posición del atributo. Sin embargo, si presiona las teclas direccionales Arriba y Abajo, sus acciones afectarán a toda la etiqueta.

Las teclas direccionales Arriba y Abajo mueven toda la etiqueta en relación a otras etiquetas. Si amplía una selección usando Ctrl+Alt+Derecha para abarcar la etiqueta con todo lo que contiene, también puede usar las teclas direccionales Izquierda y Derecha con el mismo fin, con la única diferencia de que estas combinaciones también "degradarán" su selección actual, colocándola dentro de cualquier etiqueta con la que se tope.

Nota acerca de los accesos directos

Todos los acceso directo de teclado de esta página están disponibles en el mapa de teclas Visual Studio predeterminado de ReSharper. Para más información sobre los dos mapas de teclas de ReSharper, consulte la documentación de ReSharper.