====== WvdS VSCode UI Meta ======

La UI Meta Extension gestisce il registro dei componenti e fornisce supporto IntelliSense per i file PXAML.

===== Funzione e scopo =====

La Meta Extension offre:

  * **Registro componenti** - Database centrale di tutti i componenti UI
  * **IntelliSense** - Auto-completamento per elementi e attributi PXAML
  * **Documentazione proprietà** - Guida inline per le proprietà
  * **Informazioni sui tipi** - Tipi, valori predefiniti, vincoli

===== Funzionalità IntelliSense =====

==== Completamento elementi ====

Iniziate con ''<'' e premete ''Ctrl+Space'':

{{ :de:int:vsce:fpc:p:meta-element-completion.png?400 |Completamento elementi}}

La lista mostra tutti i controlli disponibili con:
  * Nome dell'elemento
  * Breve descrizione
  * Icona (se disponibile)

==== Completamento attributi ====

All'interno di un elemento, ''Ctrl+Space'' mostra gli attributi disponibili:

<code xml>
<Button | >  <!-- Cursore qui, premere Ctrl+Space -->
</code>

Vengono mostrati:
  * Tutte le proprietà del controllo
  * Proprietà attached (Grid.Row, DockPanel.Dock, ...)
  * Eventi (Click, MouseEnter, ...)

==== Completamento valori ====

Per attributi con valori definiti:

<code xml>
<TextBox TextAlignment="|"/>  <!-- Cursore qui -->
</code>

Suggerimenti: ''Left'', ''Center'', ''Right'', ''Justify''

==== Quick Info ====

Passando il mouse su un elemento o attributo viene mostrata la documentazione:

{{ :de:int:vsce:fpc:p:meta-quickinfo.png?400 |Quick Info}}

===== Comandi =====

^ Comando ^ Descrizione ^
| ''WVDS: Refresh Component Registry'' | Ricarica i metadati dei componenti |

===== Categorie di componenti =====

Il registro organizza i componenti per categorie:

^ Categoria ^ Controlli inclusi ^
| Layout | Grid, StackPanel, DockPanel, WrapPanel, Canvas |
| Input | TextBox, PasswordBox, ComboBox, CheckBox, RadioButton |
| Display | Label, TextBlock, Image, Border, Separator |
| Action | Button, ToggleButton, RepeatButton, MenuButton |
| Lists | ListBox, ListView, TreeView, DataGrid |
| Navigation | TabControl, TabItem, Menu, Toolbar |
| Containers | GroupBox, Expander, ScrollViewer, Popup |

===== Tipi di proprietà =====

Il registro conosce vari tipi di proprietà:

^ Tipo ^ Esempio ^ Comportamento IntelliSense ^
| String | Text="Hello" | Input libero |
| Number | Width="200" | Input numerico |
| Boolean | IsEnabled="True" | Selezione True/False |
| Enum | Visibility="Visible" | Mostra valori enum |
| Brush | Background="Red" | Color picker o nomi brush |
| Thickness | Margin="10,5,10,5" | Quattro valori (L,T,R,B) |

===== Componenti personalizzati ====

I componenti personalizzati possono essere aggiunti al registro.

==== Registrazione tramite annotazione ====

Nel componente Pascal:

<code pascal>
type
  {$M+}
  [ComponentInfo('MyButton', 'Custom button with icon', 'Controls')]
  TMyButton = class(TWvdSButton)
  published
    [PropertyInfo('Icon path', 'Images')]
    property IconPath: string read FIconPath write SetIconPath;
  end;
</code>

==== Registrazione tramite JSON ====

In alternativa tramite file di metadati:

<code json>
{
  "components": [
    {
      "name": "MyButton",
      "description": "Custom button with icon",
      "category": "Controls",
      "properties": [
        {
          "name": "IconPath",
          "type": "string",
          "description": "Path to the icon image"
        }
      ]
    }
  ]
}
</code>

===== Impostazioni =====

La Meta Extension non ha impostazioni dirette. Utilizza la configurazione della Core Extension.

===== Gestione cache =====

I metadati dei componenti vengono memorizzati in cache per un accesso più rapido.

==== Aggiornare la cache ====

In caso di modifiche ai componenti:
  - Eseguite ''WVDS: Refresh Component Registry''
  - Oppure: riavviate VS Code

==== Posizione della cache ====

  * Windows: ''%APPDATA%\Code\User\globalStorage\wvds.wvds-vscode-ui-meta''
  * Linux: ''~/.config/Code/User/globalStorage/wvds.wvds-vscode-ui-meta''
  * macOS: ''~/Library/Application Support/Code/User/globalStorage/wvds.wvds-vscode-ui-meta''

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

==== IntelliSense non funziona ====

**Causa:** Registro non caricato o file non riconosciuto.

**Soluzione:**
  - Assicuratevi che l'estensione del file sia .pxaml
  - Eseguite ''WVDS: Refresh Component Registry''
  - Controllate l'Output Channel per errori

==== Componenti mancanti ====

**Causa:** Componente non registrato o cache obsoleta.

**Soluzione:**
  - Aggiornate il registro
  - Verificate che il componente sia correttamente annotato
  - Assicuratevi che la unit venga compilata

==== Valori proprietà errati visualizzati ====

**Causa:** Metadati obsoleti o errati.

**Soluzione:**
  - Aggiornate il registro
  - Verificate l'annotazione della proprietà
  - Segnalate componenti standard errati su GitHub

===== Dettagli tecnici =====

^ Proprietà ^ Valore ^
| Extension ID | wvds.wvds-vscode-ui-meta |
| Attivazione | onLanguage:pxaml, onLanguage:pascal |
| Dipendenze | wvds-vscode-core |
| Min. VS Code | 1.85.0 |

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

  * [[.:designer|UI Designer - Editor visuale]]
  * [[.:preview|UI Preview - Anteprima live]]
  * [[..:i:meta-api|Meta API per sviluppatori]] (Interno)