Compartir a través de

Depurar XAML en Blend

Puedes 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

Se producen errores de sintaxis si los archivos XAML o de código subyacente no siguen las reglas de formato del lenguaje. La descripción del error puede ayudarle a comprender cómo corregirlo. La lista también especifica el nombre del archivo y el número de línea donde se produce el error. Los errores XAML se muestran en la pestaña Marcado del panel Resultados .

Sugerencia

XAML es un lenguaje de marcado basado en XML y sigue las reglas de sintaxis XML.

Algunas causas comunes de errores de sintaxis XAML son:

  • Una palabra clave se ha escrito mal o la mayúscula es incorrecta.

  • Faltan comillas alrededor de atributos o cadenas de texto.

  • A un elemento XAML le falta una etiqueta de cierre.

  • Existe un elemento XAML en una ubicación donde no se permite.

Para obtener más información sobre la sintaxis XAML común, consulta La guía básica de sintaxis XAML.

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. Sin embargo, los errores de código subyacente pueden ser más fáciles de identificar y resolver en Visual Studio.

Depurar código XAML de ejemplo

El ejemplo siguiente le guiará a través de una sesión de depuración XAML sencilla 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 una lista de tipos de proyecto en el lado izquierdo. Al hacer clic en un tipo de proyecto, las plantillas de proyecto asociadas a ella aparecen en el lado derecho.

  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 Idioma , haga clic en Visual C# y, a continuación, haga clic en Aceptar para crear el proyecto.

  7. Haga clic con el botón derecho en la superficie de diseño y, a continuación, haga clic en Ver código fuente para cambiar a Vista Dividida.

  8. Copie el código siguiente haciendo clic en el vínculo Copiar de 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 pegue el código entre las etiquetas grid de apertura y cierre. Cuando haya terminado, 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">
          <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>
</Grid>

  10. Presione Ctrl+Mayús+B para compilar el proyecto.

    Aparece un mensaje de error que le avisa de que el proyecto no se puede compilar y el panel Resultados que muestra los errores aparece en la parte inferior de la aplicación.

    Depuración de XAML en Blend para Visual Studio

Resolución de errores de XAML

Cuando se detectan errores XAML, la superficie de diseño muestra una alerta de que el proyecto contiene marcado no válido. A medida que resuelve los errores, la lista de errores del panel Resultados se actualiza. Cuando haya resuelto todos los errores, la superficie de diseño está habilitada y la aplicación se muestra en la superficie de diseño.

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 < anterior Button es válido y no un atributo como se sugiere en el mensaje de error. Si observa la línea de código anterior, observará que faltan las comillas de cierre del atributo Top . Escriba 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 estar bien formado. Sin embargo, observe que la codificación de color de Margin no coincide con las otras instancias de Margin en el código. Dado que faltan comillas de cierre del par nombre/valor anterior (VerticalAlignment="Top), Margin=" se lee como parte del valor del atributo anterior y 0 se lee como el principio de un par nombre-valor. Escriba las comillas de cierre para Top. La lista de errores del panel Resultados se actualiza para reflejar los cambios.

  3. Haga doble clic en el error restante: "La etiqueta XML de cierre 'Button' no coincide". El puntero se encuentra en la etiqueta Grid de cierre (</Grid>), lo que sugiere que el error está dentro del Grid objeto . Tenga en cuenta que al segundo objeto Button le falta la etiqueta de cierre. Después de agregar el cierre /, se actualiza la lista del panel Resultados . Ahora que se han resuelto estos errores iniciales, se han identificado dos errores adicionales.

  4. Doble clic sobre "El miembro 'contenido' no se reconoce o no es accesible". El c en content debería estar en mayúsculas. Reemplace la "c" en minúsculas por una "C" en mayúscula.

  5. Haga doble clic en "La propiedad 'Mame' no existe en el http://schemas.microsoft.com/winfx/2006/xaml espacio de nombres". "M" en "Mame" debe ser "N". Reemplace "M" por "N". Ahora que se puede analizar el XAML, la aplicación aparece en la superficie de diseño.

    Depuración de XAML en Blend para Visual Studio

    Pulse Ctrl+Mayús+B para compilar el proyecto y confirmar que no queda ningún error.

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 blend en Visual Studio, haga clic con el botón derecho en el proyecto en el panel Proyectos y, a continuación, 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, vuelva a Blend. Se le pedirá que vuelva a cargar el proyecto. Haga clic en Sí en Todo para continuar trabajando en Blend.

Para obtener más información sobre cómo depurar la aplicación, consulta Depurar aplicaciones para UWP en Visual Studio.

Obtención de ayuda

Si necesitas más ayuda para depurar tu aplicación Blend, puedes buscar en los foros de la comunidad de aplicaciones para UWP publicaciones relacionadas con tu problema o publicar una pregunta.