WvdS VSCode UI Preview

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

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

Method 1: Automatic

1. Open a .pxaml file
2. The Designer shows the preview automatically

Method 2: Manual

1. Ctrl+Shift+P → WVDS: Start Preview
2. A new panel opens with the preview

The panel shows:

• Preview Area - Rendered UI
• Toolbar - Zoom, device selection, refresh
• Status - Last update time, errors

With Hot Reload enabled:

1. Modify the PXAML file
2. Save (Ctrl+S)
3. The preview updates automatically

If automatic update does not work:

1. Click the Refresh icon in the toolbar
2. Or: WVDS: Refresh Preview

The preview can simulate various devices:

1. Click the Device icon in the toolbar
2. Choose a preset
3. Or: Enter custom dimensions

Use different devices to test responsive layouts:

• Grid with star sizes (*)
• MinWidth/MaxWidth constraints
• ViewBox for scaling

The preview supports limited interaction:

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

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

On PXAML errors, the preview shows:

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

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

For faster preview:

• Reduce complexity during development
• Use design-time data instead of live data
• Disable animations in design mode

The preview runs in a WebView panel and uses:

• Approx. 50-100 MB RAM
• Minimal CPU when inactive
• CPU spikes on updates

{
  // Automatic refresh on save
  "wvds.preview.autoRefresh": true,
 
  // Delay before refresh (ms)
  "wvds.preview.refreshDelay": 300,
 
  // Default device
  "wvds.preview.defaultDevice": "Desktop"
}

Cause: PXAML error or missing dependencies.

Solution:

1. Check the PXAML syntax
2. Check the Output Channel for errors
3. Ensure all referenced resources exist

Cause: Auto-refresh disabled or error.

Solution:

1. Check wvds.preview.autoRefresh
2. Save the file explicitly (Ctrl+S)
3. Run WVDS: Refresh Preview

Cause: Design-time vs. runtime differences.

Solution:

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

Cause: Complex UI or many updates.

Solution:

1. Increase wvds.preview.refreshDelay
2. Reduce UI complexity
3. Close unneeded preview panels

• UI Designer - Visual Editor
• UI Meta - Component Registry
• Build - Complete Compilation