Debuggen von XAML in Blend

  • Artikel

Sie können die Tools in Blend für Visual Studio verwenden, um den XAML-Code in Ihrer App zu debuggen. Beim Erstellen eines Projekts werden alle Fehler im Bereich Ergebnisse angezeigt. Doppelklicken Sie auf einen Fehler, um das dazugehörige Markup zu suchen. Wenn Sie mehr Platz zum Arbeiten benötigen, können Sie den Bereich Ergebnisse durch Drücken von F12 ausblenden.

Syntaxfehler

Syntaxfehler treten auf, wenn die Formatierungsregeln der Sprache im XAML-Code oder in Code-Behind-Dateien nicht befolgt werden. Die Beschreibung des Fehlers kann bei seiner Behebung hilfreich sein. In der Liste wird auch der Name der Datei und die Nummer der Zeile angegeben, in der der Fehler auftritt. Die XAML-Fehler werden auch auf der Registerkarte Markup im Bereich Ergebnisse angezeigt.

Tipp

XAML ist eine XML-basierte Markupsprache, die XML-Syntaxregeln befolgt.

Es folgen einige häufige Ursachen für XAML-Syntaxfehler:

  • Ein Schlüsselwort wurde falsch geschrieben, oder die Groß-/Kleinschreibung ist falsch.

  • Um Attribute oder um Textzeichenfolgen fehlen Anführungszeichen.

  • Für ein XAML-Element fehlt ein Endtag.

  • Ein XAML-Element ist an einer Position vorhanden, an der es nicht zulässig ist.

Weitere Informationen über die allgemeine XAML-Syntax finden Sie in der Anleitung zur grundlegenden XAML-Syntax.

Sie können in Blend auch einfache CodeBehind-Syntaxfehler, Kompilierungsfehler und Laufzeitfehler identifizieren und beheben. Für Code-Behind-Fehler können Sie dies allerdings möglicherweise in Visual Studio einfacher durchführen.

Debuggen von XAML-Beispielcode

Im folgenden Beispiel wird eine einfache XAML-Debugsitzung in Blend schrittweise beschrieben.

So erstellen Sie ein Projekt

  1. Öffnen Sie in Blend das Menü Datei, und klicken Sie auf Neues Projekt.

    Auf der linken Seite des Dialogfelds Neues Projekt wird eine Liste der Projekttypen angezeigt. Wenn Sie auf einen Projekttyp klicken, werden die Projektvorlagen, die diesem Typ zugeordnet sind, auf der rechten Seite angezeigt.

  2. Klicken Sie in der Liste der Projekttypen auf Windows Universal.

  3. Klicken Sie in der Liste der Projektvorlagen auf Leere App (Universelle Windows-App).

  4. Geben Sie DebuggingSample in das Textfeld Name ein.

  5. Überprüfen Sie im Textfeld Speicherort den Projektspeicherort.

  6. Klicken Sie im Listenfeld Sprache auf Visual C#, und klicken Sie dann auf OK, um das Projekt zu erstellen.

  7. Klicken Sie mit der rechten Maustaste auf die Entwurfsoberfläche, und klicken Sie dann auf Quelle anzeigen, um zur Ansicht Geteilt zu wechseln.

  8. Kopieren Sie den folgenden Code, indem Sie auf den Link Kopieren in der rechten oberen Ecke des Codes klicken.

    <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. Suchen Sie das standardmäßige Raster, und fügen Sie den Code zwischen den Grid-Start- und Endtags ein. Anschließend sollte der Code ungefähr wie folgt aussehen:

    <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. Drücken Sie STRG+UMSCHALT+B, um das Projekt zu erstellen.

    Eine Fehlermeldung wird angezeigt, dass das Projekt nicht erstellt werden kann. Im unteren Bereich der App wird zudem der Bereich Ergebnisse mit der Liste der Fehler angezeigt.

    Debug XAML in Blend for Visual Studio

Beheben von XAML-Fehlern

Wenn XAML-Fehler ermittelt werden, zeigt die Entwurfsoberfläche eine Warnung an, dass das Projekt ungültiges Markup enthält. Während Sie die Fehler beheben, wird die Fehlerliste im Bereich Ergebnisse aktualisiert. Wenn Sie alle Fehler behoben haben, wird die Entwurfsoberfläche aktiviert und die App wird darin angezeigt.

So beheben Sie die XAML-Fehler

  1. Doppelklicken Sie auf den ersten Fehler in der Fehlerliste. Die Beschreibung lautet „Der Wert '<' ist in einem Attribut ungültig“. Wenn Sie auf den Fehler doppelklicken, wird die entsprechende Position im Code vom Zeiger gefunden. < vor Button ist gültig und kein Attribut, wie in der Fehlermeldung beschrieben. Wenn Sie die vorhergehende Codezeile prüfen, stellen Sie fest, dass die schließenden Anführungszeichen für das Top-Attribut fehlen. Geben Sie die schließenden Anführungszeichen ein. Die Fehlerliste im Bereich Ergebnisse wird aktualisiert, um die Änderung zu reflektieren.

  2. Doppelklicken Sie auf die Beschreibung: „'0' ist am Anfang eines Namens ungültig“. Margin="0,149,0,0" sieht ordnungsgemäß formatiert aus. Allerdings stimmt der Farbcode für Margin nicht mit den anderen Instanzen von Margin im Code überein. Da für das vorangehende Name-Wert-Paar die schließenden Anführungszeichen fehlen (VerticalAlignment="Top), wird Margin=" als Teil des Werts des vorangehenden Attributs gelesen, und 0 wird als Anfang von einem Name-Wert-Paar gelesen. Geben Sie die schließenden Anführungszeichen für Top ein. Die Fehlerliste im Bereich Ergebnisse wird aktualisiert, um die Änderung zu reflektieren.

  3. Doppelklicken Sie auf den verbleibenden Fehler: „Das schließende XML-Tag 'Button' ist falsch zugeordnet“. Der Zeiger befindet sich am schließenden Raster-Tag (</Grid>), was darauf hindeutet, dass sich der Fehler im Grid-Objekt befindet. Beachten Sie, dass das Endtag für das Button-Objekt fehlt. Nachdem Sie das /-Endtag hinzugefügt haben, wird die Liste im Bereich Ergebnisse aktualisiert. Nach dem Beheben dieser Anfangsfehler wurden zwei weitere Fehler identifiziert.

  4. Doppelklicken Sie auf: "Der Member 'content' wurde nicht erkannt, oder es kann nicht auf den Member zugegriffen werden“. Der c in content muss großgeschrieben sein. Ersetzen Sie das klein geschriebene "c" durch ein groß geschriebenes "C".

  5. Doppelklicken Sie auf „Die Eigenschaft 'Mame' ist im Namespace http://schemas.microsoft.com/winfx/2006/xaml nicht vorhanden“. Das „M“ in „Mame“ muss ein „N“ sein. Ersetzen Sie „M“ durch „N“. Nachdem der XAML-Code jetzt analysiert werden kann, wird die App auf der Entwurfsoberfläche angezeigt.

    Debugging XAML in Blend for Visual Studio

    Drücken Sie STRG+UMSCHALT+B, um das Projekt zu erstellen und zu bestätigen, dass es keine weiteren Fehler enthält.

Debuggen in Visual Studio

Sie können Blend-Projekte in Visual Studio öffnen, um den App-Code einfacher zu debuggen. Klicken Sie zum Öffnen eines Blend-Projekts in Visual Studio im Bereich Projekte mit der rechten Maustaste auf das Projekt, und klicken Sie dann auf In Visual Studio bearbeiten. Wenn Sie die Debugsitzung in Visual Studio abgeschlossen haben, drücken Sie STRG+UMSCHALT+S, um sämtliche Änderungen zu speichern, und wechseln Sie anschließend zurück zu Blend. Sie werden aufgefordert, das Projekt erneut zu laden. Klicken Sie auf Ja, alle, um in Blend weiterzuarbeiten.

Weitere Informationen zum Debuggen von Apps finden Sie unter Debuggen von UWP-Apps in Visual Studio.

Hilfe erhalten

Wenn Sie weitere Unterstützung zum Debuggen einer Blend-Apps benötigen, können Sie in den Foren der UWP-App-Community nach Beiträgen zu einem konkreten Problem suchen oder selbst eine Frage veröffentlichen.