====== 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 =====

<note tip>This is the recommended method for end users.</note>

  - Open VS Code
  - Open the Extensions panel (''Ctrl+Shift+X'')
  - Search for ''WvdS UI''
  - Install desired controls

===== Installation via VSIX =====

==== Single Extension ====

<code powershell>
code --install-extension wvds-vscode-ui-button-0.1.0.vsix
</code>

==== All Controls ====

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

===== 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 ====

  - Open a PXAML file
  - Type ''wvds-button''
  - Press Enter
  - Button snippet is inserted

<code xml>
<Button
    Name="button1"
    Caption="Click Me"
    OnClick="OnButtonClick"
/>
</code>

===== Uninstallation =====

<code powershell>
# 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 $_
}
</code>

===== Troubleshooting =====

==== Extension Is Not Loaded ====

  - Restart VS Code
  - Open Developer Tools (''Ctrl+Shift+I'')
  - Check Console for errors

==== Snippets Do Not Work ====

  - Check if file has ''.pxaml'' extension
  - Check Language Mode (must be ''PXAML'')

==== Performance Issues ====

With many installed extensions:

  - Install only needed controls
  - Disable unused extensions

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

  * [[.:controls|Controls Overview]]
  * [[.:designer|UI Designer]]
  * [[.:installation|Basic Installation]]