WvdS VSCode UI Designer

The UI Designer enables visual PXAML development in VS Code - a WYSIWYG editor for Pascal-based user interfaces.

The Designer provides:

• Visual Editor - Drag-and-drop UI design
• PXAML Syntax - WPF/XAML-compatible markup for Pascal
• Live Preview - Real-time preview during editing
• Properties Panel - Visual property editing
• Component Palette - Overview of available controls

PXAML (Pascal XAML) is an XML-based markup format for user interfaces, inspired by WPF/XAML.

<Window Title="Hello PXAML" Width="400" Height="300">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
 
    <Label Grid.Row="0" Content="Welcome!" FontSize="24"/>
 
    <StackPanel Grid.Row="1" Orientation="Vertical" Margin="10">
      <TextBox x:Name="txtInput" PlaceholderText="Enter name..."/>
      <Button Content="Greet" Click="OnGreetClick"/>
    </StackPanel>
  </Grid>
</Window>

1. Ctrl+Shift+P → WVDS Designer: New PXAML File
2. Enter a name
3. The file is created with a base template

When you open a .pxaml file, the designer is automatically activated.

The editor shows:

• Design Area - Visual representation of the UI (left)
• Properties Panel - Properties of the selected element (right)
• Toolbox - Available controls (bottom left)

To edit the PXAML source code:

1. Click „Source“ in the toolbar
2. Or: Right-click → „View Source“

Via Drag & Drop:

1. Drag a control from the Toolbox
2. Drop it in the Design area
3. Position it as desired

Via Code:

1. Switch to Code view
2. Add the element manually
3. The preview updates automatically

1. Select an element in the Designer
2. The Properties panel shows all available properties
3. Change values directly in the panel
4. Changes are immediately shown in the preview

<Window xmlns="http://schemas.wvds.de/pxaml/2024"
        xmlns:x="http://schemas.wvds.de/pxaml/x/2024"
        xmlns:local="clr-namespace:MyApp">
</Window>

<TextBox Text="{Binding Path=UserName, Mode=TwoWay}"/>
<Label Content="{Binding Path=WelcomeMessage}"/>

<Button Content="Save" Click="OnSaveClick"/>

The handler is implemented in the code-behind unit:

procedure TMainWindow.OnSaveClick(Sender: TObject);
begin
  // Save logic
end;

The Designer uses the settings of the UI Meta extension for IntelliSense and component information.

PXAML can be rendered for different targets:

The selection is made at build time, not in the Designer.

Cause: PXAML syntax error or missing components.

Solution:

1. Switch to Code view
2. Check the PXAML syntax (XML validation)
3. Ensure all referenced components exist

Cause: Auto-refresh disabled or error.

Solution:

1. Save the file (Ctrl+S)
2. Run WVDS: Refresh Preview manually
3. Check the Output Channel for errors

Cause: Wrong area or unsupported container.

Solution:

1. Ensure you are dropping in the Design area
2. Check if the target container allows children
3. Some containers (e.g., Border) allow only one child

• UI Meta - Component Registry
• UI Preview - Live Preview
• Projects - Project Templates with PXAML