WvdS VSCode UI Meta

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

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

Iniziate con < e premete Ctrl+Space:

La lista mostra tutti i controlli disponibili con:

• Nome dell'elemento
• Breve descrizione
• Icona (se disponibile)

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

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

Vengono mostrati:

• Tutte le proprietà del controllo
• Proprietà attached (Grid.Row, DockPanel.Dock, …)
• Eventi (Click, MouseEnter, …)

Per attributi con valori definiti:

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

Suggerimenti: Left, Center, Right, Justify

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

Il registro organizza i componenti per categorie:

Il registro conosce vari tipi di proprietà:

I componenti personalizzati possono essere aggiunti al registro.

Nel componente 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;

In alternativa tramite file di metadati:

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

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

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

In caso di modifiche ai componenti:

1. Eseguite WVDS: Refresh Component Registry
2. Oppure: riavviate VS Code

• 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

Causa: Registro non caricato o file non riconosciuto.

Soluzione:

1. Assicuratevi che l'estensione del file sia .pxaml
2. Eseguite WVDS: Refresh Component Registry
3. Controllate l'Output Channel per errori

Causa: Componente non registrato o cache obsoleta.

Soluzione:

1. Aggiornate il registro
2. Verificate che il componente sia correttamente annotato
3. Assicuratevi che la unit venga compilata

Causa: Metadati obsoleti o errati.

Soluzione:

1. Aggiornate il registro
2. Verificate l'annotazione della proprietà
3. Segnalate componenti standard errati su GitHub

• UI Designer - Editor visuale
• UI Preview - Anteprima live
• Meta API per sviluppatori (Interno)