====== Installare i controls ======

Guida all'installazione delle estensioni WvdS UI Control.

===== Prerequisiti =====

  * Visual Studio Code 1.85.0 o superiore
  * Estensione WvdS FPC RAD Suite Core

===== Installazione via Marketplace =====

<note tip>Questo è il metodo consigliato per gli utenti finali.</note>

  - Aprite VS Code
  - Aprite il pannello Extensions (''Ctrl+Shift+X'')
  - Cercate ''WvdS UI''
  - Installate i controls desiderati

===== Installazione via VSIX =====

==== Singola estensione ====

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

==== Tutti i controls ====

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

===== Pacchetti disponibili =====

==== Basic Controls ====

| Pacchetto | Contenuto |
^ 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 ====

| Pacchetto | Contenuto |
^ 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 ====

| Pacchetto | Contenuto |
^ wvds-vscode-ui-datagrid | DataGrid |
^ wvds-vscode-ui-treelist | TreeList |
^ wvds-vscode-ui-cardview | CardView |
^ wvds-vscode-ui-pivotgrid | PivotGrid |

==== Chart Controls ====

| Pacchetto | Contenuto |
^ wvds-vscode-ui-chart | Chart (base) |
^ wvds-vscode-ui-sparkline | Sparkline |

==== Gauge Controls ====

| Pacchetto | Contenuto |
^ 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 |

===== Dopo l'installazione =====

==== Attivare IntelliSense ====

Dopo l'installazione, nei file PXAML sono disponibili:

  * **Completamento snippet** - Digitate ''wvds-'' per i suggerimenti
  * **Completamento tag** - Digitate ''<'' per la lista dei controlli

==== Utilizzare gli snippet ====

  - Aprite un file PXAML
  - Digitate ''wvds-button''
  - Premete Invio
  - Lo snippet Button viene inserito

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

===== Disinstallazione =====

<code powershell>
# Singola estensione
code --uninstall-extension ArmandoFilho.wvds-vscode-ui-button

# Tutte le estensioni WvdS UI
code --list-extensions | Where-Object { $_ -like "*wvds-vscode-ui*" } | ForEach-Object {
    code --uninstall-extension $_
}
</code>

===== Risoluzione dei problemi =====

==== L'estensione non viene caricata ====

  - Riavviate VS Code
  - Aprite i Developer Tools (''Ctrl+Shift+I'')
  - Controllate la Console per errori

==== Gli snippet non funzionano ====

  - Verificate che il file abbia estensione ''.pxaml''
  - Controllate il Language Mode (deve essere ''PXAML'')

==== Problemi di performance ====

Con molte estensioni installate:

  - Installate solo i controlli necessari
  - Disattivate le estensioni non utilizzate

===== Vedere anche =====

  * [[.:controls|Panoramica controlli]]
  * [[.:designer|UI Designer]]
  * [[.:installation|Installazione base]]