WvdS VSCode UI Preview

UI Preview ekstenzija renderira PXAML sučelja u stvarnom vremenu tijekom razvoja.

Preview ekstenzija nudi:

• Pregled uživo - Trenutna vizualizacija PXAML promjena
• Hot Reload - Automatsko ažuriranje pri spremanju datoteke
• Simulacija uređaja - Pregled na različitim veličinama zaslona
• Kontrola zumiranja - Povećavanje i smanjivanje pregleda

Metoda 1: Automatski

1. Otvorite .pxaml datoteku
2. Designer automatski prikazuje pregled

Metoda 2: Ručno

1. Ctrl+Shift+P → WVDS: Start Preview
2. Otvara se novi panel s pregledom

Panel prikazuje:

• Područje pregleda - Renderirani UI
• Alatna traka - Zumiranje, odabir uređaja, osvježavanje
• Status - Vrijeme zadnjeg ažuriranja, greške

Kada je Hot Reload aktiviran:

1. Promijenite PXAML datoteku
2. Spremite (Ctrl+S)
3. Pregled se automatski ažurira

Ako automatsko ažuriranje ne funkcionira:

1. Kliknite na ikonu Refresh u alatnoj traci
2. Ili: WVDS: Refresh Preview

Pregled može simulirati različite uređaje:

1. Kliknite na ikonu Device u alatnoj traci
2. Odaberite preset
3. Ili: Unesite vlastite dimenzije

Koristite različite uređaje za testiranje responzivnih layouta:

• Grid sa Star veličinama (*)
• MinWidth/MaxWidth ograničenja
• ViewBox za skaliranje

Pregled podržava ograničenu interakciju:

• Klikovi na gumbe - Vizualna povratna informacija (bez rukovanja događajima)
• Hover efekti - MouseOver stilovi se prikazuju
• Fokus - Okviri fokusa se prikazuju
• Scroll - ScrollViewer funkcionira

• Event handleri se ne izvršavaju
• Data Binding prikazuje samo statičke podatke
• Animacije se ne pokreću

Kod PXAML grešaka pregled prikazuje:

• Poruka o grešci - Opis problema
• Pozicija - Redak i stupac u kodu
• Označavanje - Pogrešno mjesto je istaknuto

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

Za brži pregled:

• Smanjite složenost tijekom razvoja
• Koristite design-time podatke umjesto live podataka
• Deaktivirajte animacije u design modu

Pregled radi u WebView panelu i troši:

• cca 50-100 MB RAM-a
• Minimalni CPU pri neaktivnosti
• CPU špice pri ažuriranjima

{
  // Automatsko ažuriranje pri spremanju
  "wvds.preview.autoRefresh": true,
 
  // Odgoda prije osvježavanja (ms)
  "wvds.preview.refreshDelay": 300,
 
  // Zadani uređaj
  "wvds.preview.defaultDevice": "Desktop"
}

Uzrok: PXAML greška ili nedostaju ovisnosti.

Rješenje:

1. Provjerite PXAML sintaksu
2. Provjerite Output Channel za greške
3. Osigurajte da svi referencirani resursi postoje

Uzrok: Auto-refresh je deaktiviran ili je došlo do greške.

Rješenje:

1. Provjerite wvds.preview.autoRefresh
2. Eksplicitno spremite datoteku (Ctrl+S)
3. Izvršite WVDS: Refresh Preview

Uzrok: Razlike između design-time i runtime.

Rješenje:

1. Neke značajke dostupne su samo tijekom izvršavanja
2. Provjerite design-time atribute (d:DesignWidth, itd.)
3. Testirajte s pravom kompilacijom

Uzrok: Složeni UI ili mnogo ažuriranja.

Rješenje:

1. Povećajte wvds.preview.refreshDelay
2. Smanjite složenost UI-ja
3. Zatvorite nepotrebne panele pregleda

• UI Designer - Vizualni editor
• UI Meta - Registar komponenti
• Build - Potpuna kompilacija