Condividi tramite

Esegui il debug di XAML in Blend

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

Errori di sintassi

Gli errori di sintassi si verificano se il codice XAML o i file code-behind non seguono le regole di formattazione del linguaggio. La descrizione dell'errore consente di comprendere come risolverlo. L'elenco specifica anche il nome del file e il numero di riga in cui si verifica l'errore. Gli errori XAML sono elencati nella scheda Markup nel pannello Risultati .

Suggerimento

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

Alcune cause comuni degli errori di sintassi XAML sono:

  • Una parola chiave è stata digitata in modo errato o l'uso di maiuscole e minuscole non è corretto.

  • Le virgolette mancano intorno agli attributi o alle stringhe di testo.

  • Un elemento XAML manca un tag di chiusura.

  • Un elemento XAML esiste in una posizione in cui non è consentita.

Per altre 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. Tuttavia, gli errori code-behind possono essere più facili da identificare e risolvere in Visual Studio.

Debug del 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 si fa clic su un tipo di progetto, i modelli di progetto associati vengono visualizzati sul lato destro.

  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 verificare il percorso del progetto.

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

  7. Fare clic destro sull'area di progettazione e quindi scegliere Visualizza origine per passare a Visualizzazione divisa.

  8. Copiare il codice seguente facendo clic sul collegamento Copia nell'angolo superiore destro 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. Individuare la griglia predefinita e incollare il codice tra i tag Grid di apertura e chiusura. Al termine, il codice dovrebbe essere 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.

    Viene visualizzato un messaggio di errore che avvisa che il progetto non può essere compilato e il pannello Risultati che elenca gli errori viene visualizzato nella parte inferiore dell'app.

    Eseguire il debug di XAML in Blend per 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. Quando si risolvono gli errori, l'elenco degli errori nel pannello Risultati viene aggiornato. Dopo aver risolto tutti gli errori, l'area di progettazione è abilitata e l'app viene visualizzata nell'area di progettazione.

Per risolvere gli errori XAML

  1. Fare 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 < precedente Button è valido e non un attributo come suggerito nel messaggio di errore. Se si esamina la riga di codice precedente, si noterà che mancano le virgolette di chiusura per l'attributo Top . Digita le virgolette di chiusura. Si noti che l'elenco degli errori nel pannello Risultati viene aggiornato per riflettere le modifiche apportate.

  2. Fare doppio clic sulla descrizione "'0' non è valido all'inizio di un nome". Margin="0,149,0,0" sembra essere ben formato. Si noti tuttavia che la codifica a colori di Margin non corrisponde alle altre istanze di Margin nel codice. Poiché le virgolette di chiusura mancano dalla coppia nome/valore precedente (VerticalAlignment="Top), Margin=" viene letta come parte del valore dell'attributo precedente e 0 viene letto come inizio di una coppia nome/valore. Digitare le virgolette di chiusura per Top. L'elenco degli errori nel pannello Risultati viene aggiornato per riflettere le modifiche apportate.

  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 . Si noti che il secondo Button oggetto manca il tag di chiusura. Dopo aver aggiunto la chiusura /, l'elenco dei pannelli Risultati viene aggiornato. Ora che questi errori iniziali sono stati risolti, sono stati identificati due errori aggiuntivi.

  4. Fare doppio clic su "Il membro 'content' non è riconosciuto o non è accessibile". L'oggetto c in content deve essere maiuscolo. Sostituire la "c" in lettere minuscole 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 di XAML in Blend per Visual Studio

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

Esegui 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. Verrà richiesto 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.

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.