Déboguer XAML dans Blend

Article
06/19/2023

Vous pouvez utiliser les outils de Blend pour Visual Studio pour déboguer le code XAML dans votre application. Lors de la création d’un projet, toutes les erreurs sont affichées dans le volet Résultats. Double-cliquez sur une erreur pour localiser le balisage associé à l'erreur. Si votre travail nécessite davantage d’espace, appuyez sur F12 pour masquer le volet Résultats en appuyant sur F12.

Erreurs de syntaxe

Des erreurs de syntaxe se produisent si votre code XAML, ou les fichiers code-behind ne suivent pas les règles de mise en forme du langage. La description de l’erreur peut vous aider à la résoudre. 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 dans l’onglet Balisage du volet Résultats.

Conseil

XAML est un langage de balisage basé sur XML qui suit les règles de syntaxe de XML.

Certaines causes courantes d’erreurs de syntaxe XAML se présentent comme suit :

Un mot clé n’a pas été correctement orthographié ou la casse est erronée.
Des guillemets sont manquants autour d'attributs ou de chaînes de texte.
Il manque une étiquette de fermeture à un élément XAML.
Il existe un élément XAML à un emplacement non autorisé.

Pour plus d’informations sur la syntaxe XAML de base, consultez la page Guide de base de la syntaxe XAML.

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, il peut être plus facile d'identifier et de résoudre les erreurs code-behind dans Visual Studio.

Débogage d'un exemple de code XAML

L'exemple suivant détaille toutes les étapes d'une session de débogage de code 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 apparaît sur le côté gauche. Lorsque vous cliquez sur un type de projet, les modèles de projet associés à ce type apparaissent sur le côté droit.
Dans la liste des types de projets, cliquez sur Windows Universal.
Dans la liste des modèles de projet, cliquez sur Application vide (Universal Windows).
Dans la zone de texte Nom, entrez DebuggingSample.
Dans la zone de texte Emplacement, vérifiez l’emplacement du projet.
Dans la liste Langage, 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 en haut à droite 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 de début et de fin. Lorsque vous avez terminé, votre code doit ressembler au code suivant :

<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 vous indiquant que le projet ne peut pas être généré et le volet Résultats listant les erreurs apparaît au bas de l’application.

Résoudre les erreurs XAML

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

Pour résoudre les erreurs XAML

Double-cliquez sur la première erreur de la liste. La description est « La valeur '<' n’est pas valide dans un attribut ». Lorsque vous double-cliquez sur l’erreur, le pointeur recherche l’emplacement correspondant dans le code. Le < est valide, étant placé devant Button et non pas devant un attribut, comme indiqué dans le message d'erreur. Si vous examinez la ligne de code précédente, vous remarquez que le guillemet anglais fermant de l'attribut Top est manquant. Tapez le guillemet anglais fermant. Notez que la liste d’erreurs dans le volet Résultats est mise à jour au fur et à mesure de vos modifications.
Double-cliquez sur la description : « '0' est non valide en début de nom. ». Margin="0,149,0,0" semble bien formé. Toutefois, notez que le codage en couleur de Margin n'est pas le même que celui des autres instances de Margin dans le code. L'absence de guillemets anglais fermants dans la paire nom/valeur précédente (VerticalAlignment="Top) fait que Margin=" est lu comme faisant partie de la valeur de l'attribut précédent, et 0 est lu comme le début de la paire nom/ valeur. Tapez le guillemet anglais fermant pour Top. La liste d’erreurs dans le volet Résultats est mise à jour au fur et à mesure de 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 l’étiquette de fermeture est manquante dans le deuxième objet Button. Une fois le / de fermeture ajouté, la liste du volet Résultats est mise à jour. Ces erreurs initiales sont à présent résolues, mais deux erreurs supplémentaires ont été identifiées.
Double-cliquez sur « Le membre "contenu" n'est pas reconnu ou n'est pas accessible. ». Le c dans content doit être en majuscules. Remplacez le « c » minuscule par un « c » majuscule.
Double-cliquez sur « La propriété "Mame" n’existe pas dans le nom d’espace http://schemas.microsoft.com/winfx/2006/xaml. » Le « M » de « Mame » devrait être un « N ». Remplacez le « M » par un « N ». Maintenant que le code XAML peut être analysé, l'application apparaît dans l'aire de conception.

Appuyez sur Ctrl+Maj+B pour générer votre projet et vous assurer qu’il ne contient plus aucune erreur.

Déboguer dans Visual Studio

Vous pouvez ouvrir les projets Blend dans Visual Studio afin de déboguer plus facilement le code dans votre application. Pour ouvrir un projet Blend dans Visual Studio, cliquez avec le bouton droit dans le volet Projets, puis cliquez sur Modifier dans Visual Studio. Une fois la session de débogage terminée dans Visual Studio, appuyez sur Ctrl+Maj+S pour enregistrer toutes vos modifications, puis revenez à Blend. Vous êtes alors invité à recharger le projet. Cliquez sur Oui pour tout pour poursuivre votre travail dans Blend.

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

Aide

Si vous avez besoin d’aide supplémentaire sur le débogage de votre application Blend, vous pouvez rechercher les publications relatives à votre problème sur les Forums de communauté des applications UWP ou publier une question.

Partager via