====== WvdS VSCode UI Preview ======

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

===== Funzione e scopo =====

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

===== Comandi =====

^ Comando ^ Descrizione ^
| ''WVDS: Start Preview'' | Avvia l'anteprima live |
| ''WVDS: Stop Preview'' | Termina l'anteprima |
| ''WVDS: Refresh Preview'' | Forza un aggiornamento |

===== Lavorare con l'anteprima =====

==== Avviare l'anteprima ====

**Metodo 1: Automatico**
  - Aprite un file .pxaml
  - Il Designer mostra automaticamente l'anteprima

**Metodo 2: Manuale**
  - ''Ctrl+Shift+P'' -> ''WVDS: Start Preview''
  - Si apre un nuovo pannello con l'anteprima

==== Pannello anteprima ====

Il pannello mostra:
  * **Area anteprima** - UI renderizzata
  * **Toolbar** - Zoom, selezione dispositivo, refresh
  * **Stato** - Ultimo aggiornamento, errori

==== Auto-Refresh ====

Con Hot Reload attivato:
  - Modificate il file PXAML
  - Salvate (''Ctrl+S'')
  - L'anteprima si aggiorna automaticamente

==== Refresh manuale ====

Se l'aggiornamento automatico non funziona:
  - Cliccate sull'icona Refresh nella toolbar
  - Oppure: ''WVDS: Refresh Preview''

===== Simulazione dispositivi =====

L'anteprima può simulare vari dispositivi:

^ Preset ^ Larghezza ^ Altezza ^ Caso d'uso ^
| Desktop | 1920 | 1080 | Desktop standard |
| Laptop | 1366 | 768 | Schermo laptop |
| Tablet | 1024 | 768 | Tablet orizzontale |
| Tablet Portrait | 768 | 1024 | Tablet verticale |
| Mobile | 375 | 667 | Smartphone |
| Custom | Variabile | Variabile | Dimensioni personalizzate |

==== Selezionare il dispositivo ====

  - Cliccate sull'icona dispositivo nella toolbar
  - Scegliete un preset
  - Oppure: inserite dimensioni personalizzate

==== Test responsive ====

Utilizzate diversi dispositivi per testare layout responsive:
  * Grid con dimensioni Star (''*'')
  * Vincoli MinWidth/MaxWidth
  * ViewBox per scalatura

===== Controllo zoom =====

^ Azione ^ Scorciatoia ^ Descrizione ^
| Zoom In | ''Ctrl+'' | Ingrandisce l'anteprima |
| Zoom Out | ''Ctrl-'' | Riduce l'anteprima |
| Fit | ''Ctrl+0'' | Adatta allo spazio disponibile |
| 100% | ''Ctrl+1'' | Dimensione originale |

===== Interattività =====

L'anteprima supporta interazione limitata:

==== Azioni supportate ====

  * **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

==== Non supportato ====

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

<note>La funzionalità completa è disponibile solo a runtime.</note>

===== Visualizzazione errori =====

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

==== Esempio ====

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

===== Performance =====

==== Ottimizzazione ====

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

==== Consumo risorse ====

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

===== Impostazioni =====

<code json>
{
  // Aggiornamento automatico al salvataggio
  "wvds.preview.autoRefresh": true,

  // Ritardo prima del refresh (ms)
  "wvds.preview.refreshDelay": 300,

  // Dispositivo predefinito
  "wvds.preview.defaultDevice": "Desktop"
}
</code>

===== Risoluzione dei problemi =====

==== L'anteprima rimane vuota ====

**Causa:** Errore PXAML o dipendenze mancanti.

**Soluzione:**
  - Controllate la sintassi PXAML
  - Verificate l'Output Channel per errori
  - Assicuratevi che tutte le risorse referenziate esistano

==== L'anteprima non si aggiorna ====

**Causa:** Auto-refresh disabilitato o errore.

**Soluzione:**
  - Controllate ''wvds.preview.autoRefresh''
  - Salvate il file esplicitamente (''Ctrl+S'')
  - Eseguite ''WVDS: Refresh Preview''

==== L'anteprima mostra una rappresentazione errata ====

**Causa:** Differenze tra design-time e runtime.

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

==== Alto consumo di risorse ====

**Causa:** UI complessa o molti aggiornamenti.

**Soluzione:**
  - Aumentate ''wvds.preview.refreshDelay''
  - Riducete la complessità della UI
  - Chiudete i pannelli anteprima non necessari

===== Dettagli tecnici =====

^ Proprietà ^ Valore ^
| Extension ID | wvds.wvds-vscode-ui-preview |
| Attivazione | onLanguage:pxaml |
| Dipendenze | wvds-vscode-core, wvds-vscode-ui-designer |
| Min. VS Code | 1.85.0 |
| Renderer | Basato su WebView |

===== Vedere anche =====

  * [[.:designer|UI Designer - Editor visuale]]
  * [[.:meta|UI Meta - Registro componenti]]
  * [[.:build|Build - Compilazione completa]]