Déboguer XAML dans BlendDebug XAML in Blend

Vous pouvez utiliser les outils de Blend pour Visual StudioBlend for Visual Studio pour déboguer le code XAML dans votre application.You can use the tools in Blend pour Visual StudioBlend for Visual Studio to debug the XAML in your app. Lorsque vous générez un projet, toutes les erreurs sont affichées dans le résultats Panneau de configuration.When you build a project, any errors are displayed in the Results panel. Double-cliquez sur une erreur pour localiser le balisage associé à l'erreur.Double-click an error to locate the markup related to the error. Si vous avez besoin de plus d’espace de travail, vous pouvez masquer la résultats panneau en appuyant sur F12.If you need more room to work, you can hide the Results panel by pressing F12.

Erreurs de syntaxeSyntax errors

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.Syntax errors occur if the XAML or the code-behind files do not follow the formatting rules of the language. La description de l’erreur peut vous aider à la résoudre.The description of the error can help you understand how to fix it. La liste spécifie également le nom du fichier et le numéro de ligne où l’erreur se produit.The list also specifies the name of the file and the line number where the error occurs. Les erreurs XAML sont répertoriés sur le balisage onglet dans le résultats Panneau de configuration.XAML errors are listed on the Markup tab in the Results panel.

Tip

XAML est un langage de balisage basé sur XML qui suit les règles de syntaxe de XML.XAML is an XML-based markup language and follows XML syntax rules.

Certaines causes courantes d’erreurs de syntaxe XAML se présentent comme suit :Some common causes of XAML syntax errors are:

  • Un mot clé n’a pas été correctement orthographié ou la casse est erronée.A keyword has been misspelled or the capitalization is wrong.

  • Des guillemets sont manquants autour d'attributs ou de chaînes de texte.Quotation marks are missing around attributes or text strings.

  • Il manque une étiquette de fermeture à un élément XAML.A XAML element is missing a closing tag.

  • Il existe un élément XAML à un emplacement non autorisé.A XAML element exists in a location where it is not allowed.

    Pour plus d’informations sur la syntaxe XAML courante, consultez guide de la syntaxe XAML de base.For more information on common XAML syntax, see Basic XAML syntax guide.

    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 FusionBlend.You can also identify and resolve simple code-behind syntax errors, compilation errors, and run-time errors in FusionBlend. Toutefois, il peut être plus facile d'identifier et de résoudre les erreurs code-behind dans Visual Studio.However, code-behind errors may be easier to identify and resolve in Visual Studio.

Débogage d'un exemple de code XAMLDebugging sample XAML code

L'exemple suivant détaille toutes les étapes d'une session de débogage de code XAML simple dans FusionBlend.The following example will walk you through a simple XAML debugging session in FusionBlend.

Pour créer un projetTo create a project
  1. Dans FusionBlend, ouvrez le fichier menu, puis sur nouveau projet.In FusionBlend, open the File menu, and then click New Project.

    Dans le nouveau projet boîte de dialogue, une liste des types de projets apparaît sur le côté gauche.In the New Project dialog box, a list of project types appears on the left side. Lorsque vous cliquez sur un type de projet, les modèles de projet associés à ce type apparaissent sur le côté droit.When you click a project type, the project templates that are associated with it appear on the right side.

  2. Dans la liste des types de projets, cliquez sur Windows universel.In the list of project types, click Windows Universal.

  3. Dans la liste des modèles de projet, cliquez sur application vide (Windows universel).In the list of project templates, click Blank App (Universal Windows).

  4. Dans le nom zone de texte, tapez DebuggingSample.In the Name text box, type DebuggingSample.

  5. Dans le emplacement texte, vérifiez l’emplacement du projet.In the Location text box, verify the location of the project.

  6. Dans le langage , cliquez sur Visual C#, puis cliquez sur OK pour créer le projet.In the Language list, click Visual C#, and then click OK to create the project.

  7. Avec le bouton droit sur l’aire de conception, puis cliquez sur afficher la Source pour basculer vers fractionnement vue.Right-click on the design surface and then click View Source to switch to Split view.

  8. Copiez le code suivant en cliquant sur le copie lien dans le coin supérieur droit du code.Copy the following code by clicking the Copy link in the upper-right corner of the 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>  
    
  9. Recherchez la valeur par défaut grilleet collez le code entre les balises grille balises.Locate the default Grid, and paste the code between the opening and closing Grid tags. Lorsque vous avez terminé, votre code doit ressembler au code suivant :When you're finished, your code should look like the following:

    <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. Appuyez sur Ctrl+Maj+B pour générer le projet.Press Ctrl+Shift+B to build the project.

    Un message d’erreur s’affiche vous indiquant que le projet ne peut pas être généré, et le résultats panneau répertoriant les erreurs apparaît au bas de l’application.An error message appears alerting you that the project cannot be built, and the Results panel listing the errors appears at the bottom of the app.

    Déboguer XAML dans Blend pour Visual StudioDebug XAML in Blend for Visual Studio

Résolution d'erreurs XAMLResolving XAML errors

Quand des erreurs XAML sont détectées, l'aire de conception affiche une alerte indiquant que votre projet contient un balisage non valide.When XAML errors are detected, the design surface displays an alert that your project contains invalid markup. Comme vous résolvez les erreurs, la liste d’erreurs dans le résultats panneau est mis à jour.As you resolve the errors, the error list in the Results panel is updated. Quand vous avez résolu toutes les erreurs, l'aire de conception est activée et votre application y est affichée.When you have resolved all the errors, the design surface is enabled, and your app is displayed on the design surface.

Pour résoudre les erreurs XAMLTo resolve the XAML errors
  1. Double-cliquez sur la première erreur de la liste.Double-click the first error in the list. La description est : « La valeur '<' n'est pas valide dans un attribut ».The description is "The value '<' is not valid in an attribute." Lorsque vous double-cliquez sur l'erreur, le pointeur trouve l'emplacement correspondant dans le code.When you double-click the error, the pointer finds the corresponding location in the code. Le < est valide, étant placé devant Button et non pas devant un attribut, comme indiqué dans le message d'erreur.The < preceding Button is valid, and not an attribute as suggested in the error message. Si vous examinez la ligne de code précédente, vous remarquez que le guillemet anglais fermant de l'attribut Top est manquant.If you look at the preceding line of code, you'll notice that the closing quotation marks for the attribute Top are missing. Tapez le guillemet anglais fermant.Type the closing quotation marks. Notez que la liste d’erreurs dans le résultats panneau mises à jour pour refléter vos modifications.Notice that the error list in the Results panel updates to reflect your changes.

  2. Double-cliquez sur la description « '0' n’est pas valide au début d’un nom. »Double-click the description "'0' is not valid at the start of a name." Margin="0,149,0,0" semble être correct.Margin="0,149,0,0" appears to be well formed. 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.However, notice that the color coding of Margin does not match the other instances of Margin in the 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.Because the closing quotation marks are missing from the preceding name/value pair (VerticalAlignment="Top), Margin=" is read as part of the value of the preceding attribute, and 0 is read as the beginning of a name/value pair. Tapez le guillemet anglais fermant pour Top.Type the closing quotation marks for Top. La liste d’erreurs dans le résultats panneau mises à jour pour refléter vos modifications.The error list in the Results panel updates to reflect your changes.

  3. Double-cliquez sur l’erreur restante : « Le Bouton d’étiquette XML de fermeture ne correspond pas »Double-click the remaining error, "The closing XML tag 'Button' is mismatched." Le pointeur se trouve à la fermeture grille balise (</Grid>), suggérant que l’erreur se trouve dans le Grid objet.The pointer is located at the closing Grid tag (</Grid>), suggesting that the error is inside the Grid object. Notez que la balise de fermeture est manquante dans le deuxième objet Button.Notice that the second Button object is missing the closing tag. Après avoir ajouté la fermeture /, le résultats liste du panneau est mis à jour.After you add the closing /, the Results panel list is updated. Ces erreurs initiales sont à présent résolues, mais deux erreurs supplémentaires ont été identifiées.Now that these initial errors have been resolved, two additional errors have been identified.

  4. Double-cliquez sur « Le membre "contenu" n'est pas reconnu ou n'est pas accessible. ».Double-click "The member 'content' is not recognized or is not accessible." Le c dans content devrait être en majuscules.The c in content should be upper-case. Remplacez le « c » minuscule par un « c » majuscule.Replace the lower-case "c" with an upper-case "c."

  5. Double-cliquez sur « la propriété « Mame » n’existe pas dans le 'http://schemas.microsoft.com/winfx/2006/xaml' espace de noms. »Double-click "The property 'Mame' does not exist in the 'http://schemas.microsoft.com/winfx/2006/xaml' namespace." Le « M » dans « Mame » devrait être un « N ».The "M" in "Mame" should be an "N." Remplacez le « M » par un « N ».Replace the "M" with an "N." Maintenant que le code XAML peut être analysé, l'application s'affiche sur l'aire de conception.Now that the XAML can be parsed, the app appears on the design surface.

    Débogage de XAML dans Blend pour Visual StudioDebugging XAML in Blend for Visual Studio

    Appuyez sur Ctrl+Maj+B pour générer votre projet et vous assurer qu’il ne contient plus aucune erreur.Press Ctrl+Shift+B to build your project and confirm that there are no remaining errors.

Débogage dans Visual StudioDebugging in Visual Studio

Vous pouvez ouvrir les projets FusionBlend dans Visual Studio afin de déboguer plus facilement le code dans votre application.You can open FusionBlend projects in Visual Studio to more easily debug the code in your app. Pour ouvrir un FusionBlend de projet dans Visual Studio, cliquez sur le projet dans le projets panneau, puis cliquez sur modifier dans Visual Studio.To open a FusionBlend project in Visual Studio, right-click the project in the Projects panel, and then click Edit in 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 à FusionBlend.After you have finished your debugging session in Visual Studio, press Ctrl+Shift+S to save all your changes, and then switch back to FusionBlend. Vous êtes alors invité à recharger le projet.You will be prompted to reload the project. Cliquez sur Oui pour tout pour continuer à travailler dans FusionBlend.Click Yes to All to continue working in FusionBlend.

Pour plus d’informations sur le débogage de votre application, consultez UWP de déboguer des applications dans Visual Studio.For more information about debugging your app, see Debug UWP apps in Visual Studio.

Obtenir de l’aideGetting help

Si vous avez besoin d’aide plus débogage votre FusionBlend application, vous pouvez rechercher le forums des Communautés application UWP pour les publications relatives à votre problème ou poser une question.If you need more help debugging your FusionBlend app, you can search the UWP app community forums for posts related your issue or post a question.