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

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

===== Funkcija i svrha =====

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

===== Naredbe =====

^ Naredba ^ Opis ^
| ''WVDS: Start Preview'' | Pokreće pregled uživo |
| ''WVDS: Stop Preview'' | Zaustavlja pregled |
| ''WVDS: Refresh Preview'' | Prisilno ažurira |

===== Rad s pregledom =====

==== Pokretanje pregleda ====

**Metoda 1: Automatski**
  - Otvorite .pxaml datoteku
  - Designer automatski prikazuje pregled

**Metoda 2: Ručno**
  - ''Ctrl+Shift+P'' -> ''WVDS: Start Preview''
  - Otvara se novi panel s pregledom

==== Panel pregleda ====

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

==== Automatsko osvježavanje ====

Kada je Hot Reload aktiviran:
  - Promijenite PXAML datoteku
  - Spremite (''Ctrl+S'')
  - Pregled se automatski ažurira

==== Ručno osvježavanje ====

Ako automatsko ažuriranje ne funkcionira:
  - Kliknite na ikonu Refresh u alatnoj traci
  - Ili: ''WVDS: Refresh Preview''

===== Simulacija uređaja =====

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

^ Preset ^ Širina ^ Visina ^ Primjena ^
| Desktop | 1920 | 1080 | Standardni desktop |
| Laptop | 1366 | 768 | Laptop zaslon |
| Tablet | 1024 | 768 | Tablet pejzaž |
| Tablet Portrait | 768 | 1024 | Tablet portret |
| Mobile | 375 | 667 | Pametni telefon |
| Custom | Varijabilno | Varijabilno | Vlastita veličina |

==== Odabir uređaja ====

  - Kliknite na ikonu Device u alatnoj traci
  - Odaberite preset
  - Ili: Unesite vlastite dimenzije

==== Testiranje responzivnosti ====

Koristite različite uređaje za testiranje responzivnih layouta:
  * Grid sa Star veličinama (''*'')
  * MinWidth/MaxWidth ograničenja
  * ViewBox za skaliranje

===== Kontrola zumiranja =====

^ Akcija ^ Tipkovnička kratica ^ Opis ^
| Zoom In | ''Ctrl+'' | Povećava pregled |
| Zoom Out | ''Ctrl-'' | Smanjuje pregled |
| Fit | ''Ctrl+0'' | Prilagođava dostupnom prostoru |
| 100% | ''Ctrl+1'' | Originalna veličina |

===== Interaktivnost =====

Pregled podržava ograničenu interakciju:

==== Podržane akcije ====

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

==== Nije podržano ====

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

<note>Potpuna funkcionalnost dostupna je samo tijekom izvršavanja.</note>

===== Prikaz grešaka =====

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

==== Primjer ====

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

===== Performanse =====

==== Optimizacija ====

Za brži pregled:
  * Smanjite složenost tijekom razvoja
  * Koristite design-time podatke umjesto live podataka
  * Deaktivirajte animacije u design modu

==== Potrošnja resursa ====

Pregled radi u WebView panelu i troši:
  * cca 50-100 MB RAM-a
  * Minimalni CPU pri neaktivnosti
  * CPU špice pri ažuriranjima

===== Postavke =====

<code json>
{
  // 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"
}
</code>

===== Rješavanje problema =====

==== Pregled ostaje prazan ====

**Uzrok:** PXAML greška ili nedostaju ovisnosti.

**Rješenje:**
  - Provjerite PXAML sintaksu
  - Provjerite Output Channel za greške
  - Osigurajte da svi referencirani resursi postoje

==== Pregled se ne ažurira ====

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

**Rješenje:**
  - Provjerite ''wvds.preview.autoRefresh''
  - Eksplicitno spremite datoteku (''Ctrl+S'')
  - Izvršite ''WVDS: Refresh Preview''

==== Pregled prikazuje pogrešan prikaz ====

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

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

==== Visoka potrošnja resursa ====

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

**Rješenje:**
  - Povećajte ''wvds.preview.refreshDelay''
  - Smanjite složenost UI-ja
  - Zatvorite nepotrebne panele pregleda

===== Tehnički detalji =====

^ Svojstvo ^ Vrijednost ^
| Extension ID | wvds.wvds-vscode-ui-preview |
| Aktivacija | onLanguage:pxaml |
| Ovisnosti | wvds-vscode-core, wvds-vscode-ui-designer |
| Min. VS Code | 1.85.0 |
| Renderer | WebView-bazirano |

===== Vidi također =====

  * [[.:designer|UI Designer - Vizualni editor]]
  * [[.:meta|UI Meta - Registar komponenti]]
  * [[.:build|Build - Potpuna kompilacija]]