Déboguer du code XAML dans Blend

2025-06-18

Vous pouvez utiliser les outils de Blend pour Visual Studio pour déboguer le code XAML dans votre application. Lorsque vous générez un projet, toutes les erreurs s’affichent dans le volet Résultats . Double-cliquez sur une erreur pour localiser le balisage lié à l’erreur. Si vous avez besoin de plus de place pour fonctionner, vous pouvez masquer le panneau Résultats en appuyant sur F12.

Erreurs de syntaxe

Des erreurs de syntaxe se produisent si les fichiers XAML ou code-behind ne suivent pas les règles de mise en forme du langage. La description de l’erreur peut vous aider à comprendre comment la corriger. La liste spécifie également le nom du fichier et le numéro de ligne où l’erreur se produit. Les erreurs XAML sont répertoriées sous l’onglet Balisage dans le volet Résultats .

Conseil / Astuce

XAML est un langage de balisage XML et suit les règles de syntaxe XML.

Voici quelques causes courantes des erreurs de syntaxe XAML :

Un mot clé a été mal orthographié ou la mise en majuscule est incorrecte.
Les guillemets sont manquants autour des attributs ou des chaînes de texte.
Un élément XAML manque une balise fermante.
Un élément XAML existe dans un emplacement où il n’est pas autorisé.

Pour plus d’informations sur la syntaxe XAML courante, consultez le guide de syntaxe XAML de base.

Vous pouvez également identifier et résoudre des erreurs de syntaxe code-behind simples, des erreurs de compilation et des erreurs d’exécution dans Blend. Toutefois, les erreurs code-behind peuvent être plus faciles à identifier et à résoudre dans Visual Studio.

Débogage d'un exemple de code XAML

L’exemple suivant vous guidera dans une session de débogage XAML simple dans Blend.

Pour créer un projet

Dans Blend, ouvrez le menu Fichier , puis cliquez sur Nouveau projet.

Dans la boîte de dialogue Nouveau projet , une liste de types de projet s’affiche sur le côté gauche. Lorsque vous cliquez sur un type de projet, les modèles de projet associés apparaissent sur le côté droit.
Dans la liste des types de projets, cliquez sur Windows Universel.
Dans la liste des modèles de projet, cliquez sur Application vide (Windows universel).
Dans la zone de texte Nom , tapez DebuggingSample.
Dans la zone de texte Emplacement , vérifiez l’emplacement du projet.
Dans la liste des langues , cliquez sur Visual C#, puis sur OK pour créer le projet.
Cliquez avec le bouton droit sur l’aire de conception, puis cliquez sur Afficher la source pour passer à la vue Fractionné.

Copiez le code suivant en cliquant sur le lien Copier dans le coin supérieur droit du code.

<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>

Recherchez la grille par défaut et collez le code entre les balises Grid ouvrantes et fermante. Une fois que vous avez terminé, votre code doit ressembler à ce qui suit :

<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>

Appuyez sur Ctrl+Maj+B pour générer le projet.

Un message d’erreur s’affiche pour vous avertir que le projet ne peut pas être généré et que le panneau Résultats répertoriant les erreurs apparaît en bas de l’application.

Résoudre les erreurs XAML

Lorsque des erreurs XAML sont détectées, l’aire de conception affiche une alerte indiquant que votre projet contient un balisage non valide. Lorsque vous résolvez les erreurs, la liste des erreurs dans le volet Résultats est mise à jour. Lorsque vous avez résolu toutes les erreurs, l’aire de conception est activée et votre application s’affiche sur l’aire de conception.

Pour résoudre les erreurs XAML

Double-cliquez sur la première erreur dans la liste. La description est « La valeur '<' n’est pas valide dans un attribut ». Lorsque vous double-cliquez sur l’erreur, le pointeur trouve l’emplacement correspondant dans le code. L’élément < précédent Button est valide et non un attribut comme suggéré dans le message d’erreur. Si vous examinez la ligne de code précédente, vous remarquerez que les guillemets fermants de l’attribut Top sont manquants. Tapez les guillemets fermants. Notez que la liste d’erreurs dans le panneau Résultats est mise à jour pour refléter vos modifications.
Double-cliquez sur la description « 0 » n’est pas valide au début d’un nom. » Margin="0,149,0,0" semble être bien formé. Toutefois, notez que le codage couleur de Margin ne correspond pas aux autres instances de Margin dans le code. Étant donné que les guillemets fermants sont manquants dans la paire nom/valeur précédente (VerticalAlignment="Top), Margin=" il est lu dans le cadre de la valeur de l’attribut précédent, et 0 est lu comme début d’une paire nom/valeur. Tapez les guillemets fermants pour Top. La liste d’erreurs dans le panneau Résultats est mise à jour pour refléter vos modifications.
Double-cliquez sur l’erreur restante , « La balise XML fermante "Button" est incompatible ». Le pointeur se trouve à la balise Grid fermante (</Grid>), ce qui suggère que l’erreur se trouve à l’intérieur de l’objet Grid. Notez que le deuxième Button objet manque la balise fermante. Après avoir ajouté la fermeture /, la liste du panneau Résultats est mise à jour. Maintenant que ces erreurs initiales ont été résolues, deux erreurs supplémentaires ont été identifiées.
Double-cliquez sur « Le membre 'content' n’est pas reconnu ou n’est pas accessible. » Le texte à la position c dans content devrait être en majuscules. Remplacez le minuscule « c » par un majuscule « c ».
Double-cliquez sur « La propriété « Mame » n’existe pas dans l’espace http://schemas.microsoft.com/winfx/2006/xaml de noms. » Le « M » dans « Mame » doit être un « N ». Remplacez « M » par un « N ». Maintenant que le code XAML peut être analysé, l’application apparaît sur l’aire de conception.

Appuyez sur Ctrl+Maj+B pour générer votre projet et vérifiez qu’il n’y a pas d’erreurs restantes.

Déboguer dans Visual Studio

Vous pouvez ouvrir des projets Blend dans Visual Studio pour déboguer plus facilement le code dans votre application. Pour ouvrir un projet Blend dans Visual Studio, cliquez avec le bouton droit sur le projet dans le volet Projets , puis cliquez sur Modifier dans Visual Studio. Une fois que vous avez terminé votre session de débogage dans Visual Studio, appuyez sur Ctrl+Maj+S pour enregistrer toutes vos modifications, puis revenez à Blend. Vous serez invité à recharger le projet. Cliquez sur Oui pour tout pour continuer à travailler dans Blend.

Pour plus d’informations sur le débogage de votre application, consultez Déboguer des applications UWP dans Visual Studio.

Obtenir de l’aide

Si vous avez besoin d’aide supplémentaire pour déboguer votre application Blend, vous pouvez rechercher dans les forums de la communauté d’applications UWP des publications liées à votre problème ou publier une question.