WvdS VSCode UI Meta

The UI Meta extension manages the component registry and provides IntelliSense support for PXAML files.

The Meta extension provides:

• Component Registry - Central database of all UI components
• IntelliSense - Auto-completion for PXAML elements and attributes
• Property Documentation - Inline help for properties
• Type Information - Types, default values, constraints

Start with < and press Ctrl+Space:

The list shows all available controls with:

• Element name
• Brief description
• Icon (if available)

Inside an element, Ctrl+Space shows available attributes:

<Button | >  <!-- Cursor here, press Ctrl+Space -->

Displayed are:

• All properties of the control
• Attached properties (Grid.Row, DockPanel.Dock, …)
• Events (Click, MouseEnter, …)

For attributes with defined values:

<TextBox TextAlignment="|"/>  <!-- Cursor here -->

Suggestions: Left, Center, Right, Justify

Hover over an element or attribute to show documentation:

The registry organizes components by category:

The registry knows various property types:

Custom components can be added to the registry.

In the Pascal component:

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;

Alternatively via metadata file:

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

The Meta extension has no direct settings. It uses the configuration of the Core extension.

Component metadata is cached for faster access.

When components change:

1. Run WVDS: Refresh Component Registry
2. Or: Restart 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

Cause: Registry not loaded or file not recognized.

Solution:

1. Ensure the file extension is .pxaml
2. Run WVDS: Refresh Component Registry
3. Check the Output Channel for errors

Cause: Component not registered or cache outdated.

Solution:

1. Update the registry
2. Check if the component is properly annotated
3. Ensure the unit is compiled

Cause: Metadata outdated or incorrect.

Solution:

1. Update the registry
2. Check the property annotation
3. Report faulty default components on GitHub

• UI Designer - Visual Editor
• UI Preview - Live Preview
• Meta API for Developers (Internal)