WvdS VSCode UI Designer

L'UI Designer consente lo sviluppo visuale PXAML in VS Code - un editor WYSIWYG per interfacce utente basate su Pascal.

Il Designer offre:

• Editor visuale - Design UI drag-and-drop
• Sintassi PXAML - Markup compatibile WPF/XAML per Pascal
• Anteprima live - Anteprima in tempo reale durante la modifica
• Pannello proprietà - Modifica visuale delle proprietà
• Palette componenti - Panoramica dei controlli disponibili

PXAML (Pascal XAML) è un formato di markup basato su XML per interfacce utente, ispirato a 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="Benvenuto!" FontSize="24"/>
 
    <StackPanel Grid.Row="1" Orientation="Vertical" Margin="10">
      <TextBox x:Name="txtInput" PlaceholderText="Inserisci il nome..."/>
      <Button Content="Saluta" Click="OnGreetClick"/>
    </StackPanel>
  </Grid>
</Window>

1. Ctrl+Shift+P → WVDS Designer: New PXAML File
2. Inserite un nome
3. Il file viene creato con un template base

Quando aprite un file .pxaml, il Designer viene attivato automaticamente.

L'editor mostra:

• Area Design - Rappresentazione visuale della UI (sinistra)
• Pannello Properties - Proprietà dell'elemento selezionato (destra)
• Toolbox - Controlli disponibili (in basso a sinistra)

Per modificare il codice sorgente PXAML:

1. Cliccate su „Source“ nella toolbar
2. Oppure: clic destro → „View Source“

Tramite Drag & Drop:

1. Trascinate un controllo dalla Toolbox
2. Rilasciatelo nell'area Design
3. Posizionatelo come desiderato

Tramite codice:

1. Passate alla vista codice
2. Inserite manualmente l'elemento
3. L'anteprima si aggiorna automaticamente

1. Selezionate un elemento nel Designer
2. Il pannello Properties mostra tutte le proprietà disponibili
3. Modificate i valori direttamente nel pannello
4. Le modifiche vengono mostrate immediatamente nell'anteprima

<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="Salva" Click="OnSaveClick"/>

L'handler viene implementato nella unit code-behind:

procedure TMainWindow.OnSaveClick(Sender: TObject);
begin
  // Logica di salvataggio
end;

Il Designer utilizza le impostazioni della UI Meta Extension per IntelliSense e informazioni sui componenti.

PXAML può essere renderizzato per diversi target:

La selezione avviene al momento del build, non nel Designer.

Causa: Errore di sintassi PXAML o componenti mancanti.

Soluzione:

1. Passate alla vista codice
2. Controllate la sintassi PXAML (validazione XML)
3. Assicuratevi che tutti i componenti referenziati esistano

Causa: Auto-refresh disabilitato o errore.

Soluzione:

1. Salvate il file (Ctrl+S)
2. Eseguite WVDS: Refresh Preview manualmente
3. Controllate l'Output Channel per errori

Causa: Area sbagliata o container non supportato.

Soluzione:

1. Assicuratevi di rilasciare nell'area Design
2. Verificate se il container di destinazione accetta figli
3. Alcuni container (es. Border) accettano solo un figlio

• UI Meta - Registro componenti
• UI Preview - Anteprima live
• Projects - Template di progetto con PXAML