Installing Controls

Guide for installing WvdS UI Control extensions.

Prerequisites

  • Visual Studio Code 1.85.0 or higher
  • WvdS FPC RAD Suite Core Extension

Installation via Marketplace

This is the recommended method for end users.
  1. Open VS Code
  2. Open the Extensions panel (Ctrl+Shift+X)
  3. Search for WvdS UI
  4. Install desired controls

Installation via VSIX

Single Extension

code --install-extension wvds-vscode-ui-button-0.1.0.vsix

All Controls

# PowerShell
Get-ChildItem "*.vsix" | ForEach-Object {
    code --install-extension $_.FullName
}

Available Packages

Basic Controls

Package Contents
wvds-vscode-ui-label Label
wvds-vscode-ui-button Button
wvds-vscode-ui-textbox TextBox
wvds-vscode-ui-checkbox CheckBox
wvds-vscode-ui-radiobutton RadioButton
wvds-vscode-ui-image Image
wvds-vscode-ui-progressbar ProgressBar
wvds-vscode-ui-slider Slider
wvds-vscode-ui-togglebutton ToggleButton
wvds-vscode-ui-hyperlink Hyperlink
wvds-vscode-ui-border Border
wvds-vscode-ui-separator Separator

Editor Controls

Package Contents
wvds-vscode-ui-textedit TextEdit
wvds-vscode-ui-memoedit MemoEdit
wvds-vscode-ui-spinedit SpinEdit
wvds-vscode-ui-dateedit DateEdit
wvds-vscode-ui-timeedit TimeEdit
wvds-vscode-ui-calcedit CalcEdit
wvds-vscode-ui-coloredit ColorEdit
wvds-vscode-ui-maskedit MaskEdit
wvds-vscode-ui-comboboxedit ComboBoxEdit
wvds-vscode-ui-tokenedit TokenEdit
wvds-vscode-ui-ratingcontrol RatingControl

Data Controls

Package Contents
wvds-vscode-ui-datagrid DataGrid
wvds-vscode-ui-treelist TreeList
wvds-vscode-ui-cardview CardView
wvds-vscode-ui-pivotgrid PivotGrid

Chart Controls

Package Contents
wvds-vscode-ui-chart Chart (Base)
wvds-vscode-ui-sparkline Sparkline

Gauge Controls

Package Contents
wvds-vscode-ui-circulargauge CircularGauge
wvds-vscode-ui-lineargauge LinearGauge
wvds-vscode-ui-digitalgauge DigitalGauge
wvds-vscode-ui-stateindicator StateIndicator
wvds-vscode-ui-led LED
wvds-vscode-ui-thermometer Thermometer

After Installation

Activating IntelliSense

After installation, PXAML files provide:

  • Snippet completion - Type wvds- for suggestions
  • Tag completion - Type < for control list

Using Snippets

  1. Open a PXAML file
  2. Type wvds-button
  3. Press Enter
  4. Button snippet is inserted
<Button
    Name="button1"
    Caption="Click Me"
    OnClick="OnButtonClick"
/>

Uninstallation

# Single extension
code --uninstall-extension ArmandoFilho.wvds-vscode-ui-button
 
# All WvdS UI extensions
code --list-extensions | Where-Object { $_ -like "*wvds-vscode-ui*" } | ForEach-Object {
    code --uninstall-extension $_
}

Troubleshooting

Extension Is Not Loaded

  1. Restart VS Code
  2. Open Developer Tools (Ctrl+Shift+I)
  3. Check Console for errors

Snippets Do Not Work

  1. Check if file has .pxaml extension
  2. Check Language Mode (must be PXAML)

Performance Issues

With many installed extensions:

  1. Install only needed controls
  2. Disable unused extensions

See Also

Zuletzt geändert: on 2026/01/29 at 10:28 PM