Anteprima live XAML: acquisire e modificare l'interfaccia utente dell'app desktop

Con XAML Live Preview puoi acquisire l'interfaccia utente di un'app desktop e inserirla in una finestra ancorata all'interno di Visual Studio, che semplifica l'uso dei Ricaricamento rapido XAML per modificare l'app e quindi visualizzare le modifiche in tempo reale durante la loro creazione.

Finestra Anteprima live XAML

La finestra Anteprima live XAML è disponibile durante il debug. Per aprirlo, passare a Debug>di Windows>XAML Live Preview.

In alternativa, selezionare il pulsante Mostra in anteprima live XAML sulla barra degli strumenti dell'applicazione.

Scorrimento e zoom

Oltre a scorrere con le barre di scorrimento, è anche possibile usare le interazioni seguenti:

• Rotellina del mouse, sia verticale che orizzontale (se il mouse lo supporta).
• Un touchpad a scorrimento a due dita, sia verticale che orizzontale.
• Premere CTRL associato a un'azione di trascinamento del mouse.

Per quanto riguarda lo zoom, è anche possibile usare le interazioni seguenti:

• Pulsanti Zoom avanti/indietro nell'angolo inferiore sinistro.
• Se si preferisce usare una tastiera, è preferibile usare un tasto di scelta rapida ctrl ++ (+) o ctrl+meno (-).+
• Premere CTRL in combinazione con un'azione della rotellina del mouse o un avvicinamento delle dita per ingrandire l'azione con il touchpad. Un vantaggio aggiuntivo dell'uso di un mouse è mantenere un'area di controllo.

Selezione degli elementi

La selezione degli elementi in XAML Live Preview è simile alla selezione in un'applicazione in esecuzione. Consente di trovare elementi nella struttura ad albero visuale attiva o nel codice XAML di origine.

La selezione degli elementi è controllata dai primi quattro pulsanti della barra degli strumenti (da sinistra a destra).

I pulsanti della barra degli strumenti producono le azioni seguenti:

• La selezione degli elementi avvia l'azione di selezione degli elementi. In altre parole, evidenzia gli elementi quando si sposta il mouse sul contenuto dell'applicazione in XAML Live Preview. Quando si fa clic su un elemento, viene selezionato in Albero visuale attivo. Passa anche all'origine se l'elemento selezionato anteprima è abilitato e il codice XAML di origine è disponibile. Questo comportamento è identico a quello nella struttura ad albero visuale attiva.
• Mostra informazioni sugli elementi durante la selezione è un pulsante di attivazione/disattivazione che controlla la visualizzazione delle dimensioni, del colore e delle informazioni sul tipo di carattere sull'elemento sotto il mouse.
• Just My XAML è un pulsante di attivazione/disattivazione che controlla gli elementi da evidenziare: tutti o solo gli elementi con XAML di origine disponibile nella soluzione. Questo comportamento è identico a quello nella struttura ad albero visuale attiva.
• Anteprima elemento selezionato è un pulsante di attivazione/disattivazione che controlla lo spostamento al codice XAML di origine quando viene selezionato un elemento. È disattivato per impostazione predefinita. Questo comportamento è identico a quello nella struttura ad albero visuale attiva.

Righelli

I righelli consentono di allineare gli elementi nell'applicazione. Visualizzano la distanza, in unità applicazione, al righello precedente. In questo modo, consentono di verificare le distanze tra diverse parti dell'applicazione.

Il secondo gruppo di pulsanti della barra degli strumenti controlla i righelli, come indicato di seguito (da sinistra a destra):

• Aggiungere un righello verticale. Aggiunge un singolo righello verticale. Se si fa clic su questo pulsante poche volte in una riga, verranno posizionati nuovi righelli in modo che non si sovrappongano ai righelli esistenti.
• Aggiungere un righello orizzontale. Aggiunge un singolo righello orizzontale, simile al righello verticale.
• Rimuovere tutti i righelli. Rimuove tutti i righelli alla volta.
• Selezionare il colore del righello. Modifica il colore dei righelli.
• Attivare o disattivare la visibilità del righello. Nasconde o mostra tutti i righelli con un solo clic.

I righelli sono semplici da tastiera. È possibile spostarsi intorno a loro. È possibile usare i tasti di direzione per spostare i righelli un pixel alla volta oppure premere CTRL associato ai tasti di direzione per spostarli di 10 unità di app alla volta. La chiave Del elimina il righello attualmente selezionato. È anche possibile eliminare un righello con un mouse selezionando il pulsante Elimina righello accanto all'etichetta.

È anche possibile aggiungere righelli intorno a un elemento durante l'utilizzo di Element Selection. Un clic con il pulsante destro del mouse aggiunge righelli verticali. Per aggiungere righelli orizzontali, selezionare e tenere premuto maiuscolo mentre si fa clic con il pulsante destro del mouse.

Applicazioni multi-finestra

Se l'applicazione ha più finestre, è possibile scegliere quale finestra visualizzare usando la casella combinata Finestra. In alternativa, usa il pulsante Mostra in anteprima live XAML nella barra degli strumenti dell'applicazione nella finestra che vuoi visualizzare in anteprima.

Piattaforme supportate

La versione iniziale di Visual Studio 2022 supporta le piattaforme e gli scenari di debug seguenti.

Limiti

Xaml Live Preview funziona acquisendo uno screenshot dell'applicazione più volte al secondo e usa api disponibili come PrintWindow. È soggetto alle limitazioni seguenti:

• Se una parte di una finestra dell'app è disattivata, è probabile che tale parte non visualizzi modifiche Ricaricamento rapido XAML.
• Una finestra può rifiutare esplicitamente l'acquisizione di screenshot e diventare non disponibile per XAML Live Preview usando SetWindowDisplayAffinity con WDA_EXCLUDEFROMCAPTURE o DwmSetWindowAttribute con DWMWA_CLOAK.

Passaggi successivi

Altre informazioni sui Ricaricamento rapido XAML, che si associano strettamente a XAML Live Preview.

Contenuto correlato

Note sulla versione di Visual Studio 2022