WvdS VSCode UI Preview

La UI Preview Extension renderizza le interfacce PXAML in tempo reale durante lo sviluppo.

La Preview Extension offre:

• Anteprima live - Visualizzazione istantanea delle modifiche PXAML
• Hot Reload - Aggiornamento automatico al salvataggio del file
• Simulazione dispositivi - Anteprima su diverse dimensioni schermo
• Controllo zoom - Ingrandimento e riduzione dell'anteprima

Metodo 1: Automatico

1. Aprite un file .pxaml
2. Il Designer mostra automaticamente l'anteprima

Metodo 2: Manuale

1. Ctrl+Shift+P → WVDS: Start Preview
2. Si apre un nuovo pannello con l'anteprima

Il pannello mostra:

• Area anteprima - UI renderizzata
• Toolbar - Zoom, selezione dispositivo, refresh
• Stato - Ultimo aggiornamento, errori

Con Hot Reload attivato:

1. Modificate il file PXAML
2. Salvate (Ctrl+S)
3. L'anteprima si aggiorna automaticamente

Se l'aggiornamento automatico non funziona:

1. Cliccate sull'icona Refresh nella toolbar
2. Oppure: WVDS: Refresh Preview

L'anteprima può simulare vari dispositivi:

1. Cliccate sull'icona dispositivo nella toolbar
2. Scegliete un preset
3. Oppure: inserite dimensioni personalizzate

Utilizzate diversi dispositivi per testare layout responsive:

• Grid con dimensioni Star (*)
• Vincoli MinWidth/MaxWidth
• ViewBox per scalatura

L'anteprima supporta interazione limitata:

• Click sui pulsanti - Feedback visivo (nessuna gestione eventi)
• Effetti hover - Vengono visualizzati gli stili MouseOver
• Focus - Vengono mostrati i bordi di focus
• Scroll - ScrollViewer funziona

• Gli event handler non vengono eseguiti
• Il Data Binding mostra solo dati statici
• Le animazioni non vengono eseguite

In caso di errori PXAML, l'anteprima mostra:

• Messaggio di errore - Descrizione del problema
• Posizione - Riga e colonna nel codice
• Evidenziazione - La parte errata viene evidenziata

Error: Unknown element 'Buttn' at line 5, column 3
Did you mean 'Button'?

Per un'anteprima più veloce:

• Riducete la complessità durante lo sviluppo
• Utilizzate dati design-time invece di dati live
• Disattivate le animazioni in modalità design

L'anteprima viene eseguita in un pannello WebView e consuma:

• circa 50-100 MB di RAM
• CPU minima quando inattiva
• Picchi di CPU durante gli aggiornamenti

{
  // Aggiornamento automatico al salvataggio
  "wvds.preview.autoRefresh": true,
 
  // Ritardo prima del refresh (ms)
  "wvds.preview.refreshDelay": 300,
 
  // Dispositivo predefinito
  "wvds.preview.defaultDevice": "Desktop"
}

Causa: Errore PXAML o dipendenze mancanti.

Soluzione:

1. Controllate la sintassi PXAML
2. Verificate l'Output Channel per errori
3. Assicuratevi che tutte le risorse referenziate esistano

Causa: Auto-refresh disabilitato o errore.

Soluzione:

1. Controllate wvds.preview.autoRefresh
2. Salvate il file esplicitamente (Ctrl+S)
3. Eseguite WVDS: Refresh Preview

Causa: Differenze tra design-time e runtime.

Soluzione:

1. Alcune funzionalità sono disponibili solo a runtime
2. Controllate gli attributi design-time (d:DesignWidth, ecc.)
3. Testate con un build reale

Causa: UI complessa o molti aggiornamenti.

Soluzione:

1. Aumentate wvds.preview.refreshDelay
2. Riducete la complessità della UI
3. Chiudete i pannelli anteprima non necessari

• UI Designer - Editor visuale
• UI Meta - Registro componenti
• Build - Compilazione completa