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

The UI Preview extension renders PXAML interfaces in real-time during development.

===== Function and Purpose =====

The Preview extension provides:

  * **Live Preview** - Instant visualization of PXAML changes
  * **Hot Reload** - Automatic update on file save
  * **Device Simulation** - Preview on different screen sizes
  * **Zoom Control** - Zoom in and out of the preview

===== Commands =====

^ Command ^ Description ^
| ''WVDS: Start Preview'' | Starts the live preview |
| ''WVDS: Stop Preview'' | Stops the preview |
| ''WVDS: Refresh Preview'' | Forces an update |

===== Working with the Preview =====

==== Starting the Preview ====

**Method 1: Automatic**
  - Open a .pxaml file
  - The Designer shows the preview automatically

**Method 2: Manual**
  - ''Ctrl+Shift+P'' -> ''WVDS: Start Preview''
  - A new panel opens with the preview

==== Preview Panel ====

The panel shows:
  * **Preview Area** - Rendered UI
  * **Toolbar** - Zoom, device selection, refresh
  * **Status** - Last update time, errors

==== Auto-Refresh ====

With Hot Reload enabled:
  - Modify the PXAML file
  - Save (''Ctrl+S'')
  - The preview updates automatically

==== Manual Refresh ====

If automatic update does not work:
  - Click the Refresh icon in the toolbar
  - Or: ''WVDS: Refresh Preview''

===== Device Simulation =====

The preview can simulate various devices:

^ Preset ^ Width ^ Height ^ Use Case ^
| Desktop | 1920 | 1080 | Standard desktop |
| Laptop | 1366 | 768 | Laptop screen |
| Tablet | 1024 | 768 | Tablet landscape |
| Tablet Portrait | 768 | 1024 | Tablet portrait |
| Mobile | 375 | 667 | Smartphone |
| Custom | Variable | Variable | Custom size |

==== Selecting a Device ====

  - Click the Device icon in the toolbar
  - Choose a preset
  - Or: Enter custom dimensions

==== Responsive Testing ====

Use different devices to test responsive layouts:
  * Grid with star sizes (''*'')
  * MinWidth/MaxWidth constraints
  * ViewBox for scaling

===== Zoom Control =====

^ Action ^ Keyboard Shortcut ^ Description ^
| Zoom In | ''Ctrl+'' | Enlarges the preview |
| Zoom Out | ''Ctrl-'' | Reduces the preview |
| Fit | ''Ctrl+0'' | Fits to available space |
| 100% | ''Ctrl+1'' | Original size |

===== Interactivity =====

The preview supports limited interaction:

==== Supported Actions ====

  * **Button Clicks** - Visual feedback (no event handling)
  * **Hover Effects** - MouseOver styles are displayed
  * **Focus** - Focus frames are shown
  * **Scroll** - ScrollViewer works

==== Not Supported ====

  * Event handlers are not executed
  * Data binding shows only static data
  * Animations do not run

<note>Full functionality is only available at runtime.</note>

===== Error Display =====

On PXAML errors, the preview shows:

  * **Error Message** - Description of the problem
  * **Position** - Line and column in the code
  * **Highlight** - Erroneous location is highlighted

==== Example ====

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

===== Performance =====

==== Optimization ====

For faster preview:
  * Reduce complexity during development
  * Use design-time data instead of live data
  * Disable animations in design mode

==== Resource Usage ====

The preview runs in a WebView panel and uses:
  * Approx. 50-100 MB RAM
  * Minimal CPU when inactive
  * CPU spikes on updates

===== Settings =====

<code json>
{
  // Automatic refresh on save
  "wvds.preview.autoRefresh": true,

  // Delay before refresh (ms)
  "wvds.preview.refreshDelay": 300,

  // Default device
  "wvds.preview.defaultDevice": "Desktop"
}
</code>

===== Troubleshooting =====

==== Preview Stays Empty ====

**Cause:** PXAML error or missing dependencies.

**Solution:**
  - Check the PXAML syntax
  - Check the Output Channel for errors
  - Ensure all referenced resources exist

==== Preview Does Not Update ====

**Cause:** Auto-refresh disabled or error.

**Solution:**
  - Check ''wvds.preview.autoRefresh''
  - Save the file explicitly (''Ctrl+S'')
  - Run ''WVDS: Refresh Preview''

==== Preview Shows Incorrect Display ====

**Cause:** Design-time vs. runtime differences.

**Solution:**
  - Some features are only available at runtime
  - Check design-time attributes (''d:DesignWidth'', etc.)
  - Test with an actual build

==== High Resource Usage ====

**Cause:** Complex UI or many updates.

**Solution:**
  - Increase ''wvds.preview.refreshDelay''
  - Reduce UI complexity
  - Close unneeded preview panels

===== Technical Details =====

^ Property ^ Value ^
| Extension ID | wvds.wvds-vscode-ui-preview |
| Activation | onLanguage:pxaml |
| Dependencies | wvds-vscode-core, wvds-vscode-ui-designer |
| Min. VS Code | 1.85.0 |
| Renderer | WebView-based |

===== See Also =====

  * [[.:designer|UI Designer - Visual Editor]]
  * [[.:meta|UI Meta - Component Registry]]
  * [[.:build|Build - Complete Compilation]]