Condividi tramite

Debug XAML in Blend

  • Articolo

Puoi usare gli strumenti in Blend per Visual Studio per eseguire il debug del codice XAML nella tua app. Quando compili un progetto, eventuali errori vengono visualizzati nel pannello Risultati. Fai doppio clic su un errore per trovare il markup correlato all'errore. Se è necessario più spazio per lavorare, è possibile nascondere il pannello Risultati premendo F12.

Errori di sintassi

Si verificano errori di sintassi se il codice XAML o i file code-behind non rispettano le regole di formattazione del linguaggio. La descrizione dell'errore ti aiuterà a capire come risolverlo. L'elenco specifica anche il nome del file e il numero della riga in cui è presente l'errore. Gli errori XAML sono elencati nella scheda Markup del pannello Risultati.

Suggerimento

XAML è un linguaggio di markup basato su XML che segue le regole di sintassi XML.

Di seguito sono elencate alcune cause comuni degli errori di sintassi XAML:

  • In una parola chiave è presente un errore di ortografia oppure l'uso delle lettere maiuscole/minuscole non è corretto.

  • Le stringhe di testo o gli attributi non sono racchiusi tra virgolette.

  • In un elemento XAML manca un tag di chiusura.

  • È presente un elemento XAML in una posizione non consentita.

Per ulteriori informazioni sulla sintassi XAML comune, vedi Guida alla sintassi XAML di base.

È anche possibile identificare e risolvere semplici errori di sintassi code-behind, errori di compilazione ed errori di runtime in Blend. Ricorda, tuttavia, che gli errori code-behind sono più facilmente individuabili e risolvibili in Visual Studio.

Debug di codice XAML di esempio

L'esempio seguente illustra una semplice sessione di debug XAML in Blend.

Per creare un progetto

  1. In Blend aprire il menu File e quindi fare clic su Nuovo progetto.

    Nella finestra di dialogo Nuovo progetto viene visualizzato un elenco di tipi di progetto sul lato sinistro. Quando fai clic su un tipo di progetto, i modelli di progetto a esso associati vengono visualizzati a destra.

  2. Nell'elenco dei tipi di progetto fare clic su Windows universale.

  3. Nell'elenco dei modelli di progetto fare clic su App vuota (Windows universale).

  4. Nella casella di testo Nome digitare DebuggingSample.

  5. Nella casella di testo Percorso verifica il percorso del progetto.

  6. Nell'elenco Linguaggio fai clic su Visual C#, quindi scegli OK per creare il progetto.

  7. Fai clic con il pulsante destro del mouse sull'area di progettazione, quindi scegli Visualizza origine per passare alla visualizzazione divisa.

  8. Copia il codice seguente facendo clic sul link Copia nell'angolo in alto a destra del codice.

    <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. Individua l'oggettoGrid predefinito e incolla il codice tra i tag Grid di apertura e chiusura. Al termine, il codice dovrebbe risultare simile al seguente:

    <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. Premere CTRL+MAIUSC+B per compilare il progetto.

    Un messaggio di errore ti avvisa che il progetto non può essere compilato e nella parte superiore dell'app appare il pannello Risultati, che elenca gli errori.

    Debug XAML in Blend for Visual Studio

Risolvere gli errori XAML

Quando vengono rilevati errori XAML, nell'area di progettazione viene visualizzato un avviso che indica che il progetto contiene markup non valido. Mentre risolvi gli errori, il relativo elenco nel pannello Risultati si aggiorna automaticamente. Dopo che avrai risolto tutti gli errori, l'area di progettazione sarà abilitata e visualizzerà l'app.

Per risolvere gli errori XAML

  1. Fai doppio clic sul primo errore nell'elenco. La descrizione è "Il valore '<' non è valido in un attributo". Quando si fa doppio clic sull'errore, il puntatore trova la posizione corrispondente nel codice. Il valore < che precede Button è valido e non è un attributo come suggerito nel messaggio di errore. Se osservi la riga di codice precedente, noterai che le virgolette di chiusura per l'attributo Top sono mancanti. Digita le virgolette di chiusura. L'elenco degli errori presente nel pannello Risultati si aggiorna automaticamente per riflettere le modifiche.

  2. Fare doppio clic sulla descrizione "'0' non valida all'inizio di un nome". Margin="0,149,0,0" sembra essere ben formato. Nota che la codifica colori di Margin non corrisponde alle altre istanze di Margin nel codice. Poiché le virgolette di chiusura mancano nella coppia nome/valore precedente (VerticalAlignment="Top), Margin=" viene letto come parte del valore dell'attributo precedente e 0 viene letto come carattere iniziale di una coppia nome/valore. Digita le virgolette di chiusura per Top. L'elenco degli errori presente nel pannello Risultati si aggiorna automaticamente per riflettere le modifiche.

  3. Fare doppio clic sull'errore rimanente, "Il tag XML di chiusura 'Button' non corrisponde". Il puntatore si trova nel tag Grid di chiusura (</Grid>), indicando che l'errore si trova all'interno dell'oggetto Grid . Nota che il secondo oggetto Button è privo del tag di chiusura. Dopo aver aggiunto il tag / di chiusura, l'elenco del pannello Risultati viene aggiornato. Ora che questi errori iniziali sono stati risolti, ne vengono identificati altri due.

  4. Fare doppio clic su "Il membro 'content' non è riconosciuto o non è accessibile". L'oggetto c in content deve essere maiuscolo. Sostituisci la lettera "c" minuscola con una "c" maiuscola.

  5. Fare doppio clic su "La proprietà 'Mame' non esiste nello spazio dei http://schemas.microsoft.com/winfx/2006/xaml nomi". "M" in "Mame" deve essere "N". Sostituire "M" con "N". Ora che il codice XAML può essere analizzato, l'app viene visualizzata nell'area di progettazione.

    Debugging XAML in Blend for Visual Studio

    Premere CTRL+MAIUSC+B per compilare il progetto e verificare che non siano presenti errori rimanenti.

Eseguire il debug in Visual Studio

È possibile aprire progetti Blend in Visual Studio per eseguire più facilmente il debug del codice nell'app. Per aprire un progetto Blend in Visual Studio, fare clic con il pulsante destro del mouse sul progetto nel pannello Progetti e quindi scegliere Modifica in Visual Studio. Dopo aver completato la sessione di debug in Visual Studio, premere CTRL+MAIUSC+S per salvare tutte le modifiche e quindi tornare a Blend. Ti verrà chiesto di ricaricare il progetto. Fare clic su Sì su Tutti per continuare a lavorare in Blend.

Per altre informazioni sul debug dell'app, vedi Eseguire il debug di app UWP in Visual Studio.

Come ottenere assistenza

Per altre informazioni sul debug dell'app Blend, puoi cercare nei forum della community delle app UWP i post correlati al problema o pubblicare una domanda.