====== WvdS VSCode UI Designer ======

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

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

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

===== Cos'è PXAML? =====

PXAML (Pascal XAML) è un formato di markup basato su XML per interfacce utente, ispirato a WPF/XAML.

==== Esempio ====

<code xml>
<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>
</code>

==== PXAML vs. LFM ====

^ Aspetto ^ PXAML ^ LFM (Lazarus) ^
| Formato | XML | Proprietario (binario o testo) |
| Leggibilità | Alta | Media |
| Controllo versione | Eccellente (diff-friendly) | Difficile |
| Designer | WvdS Designer | Lazarus IDE |
| Target | GUI, TUI, Web | Solo GUI |

===== Comandi =====

^ Comando ^ Scorciatoia ^ Descrizione ^
| ''WVDS Designer: New PXAML File'' | - | Crea un nuovo file PXAML |
| ''WVDS Designer: Toggle Designer Preview'' | - | Alterna tra vista codice e design |
| ''WVDS Designer: Show Properties Panel'' | - | Mostra il pannello delle proprietà |

===== Lavorare con il Designer =====

==== Creare un file PXAML ====

  - ''Ctrl+Shift+P'' -> ''WVDS Designer: New PXAML File''
  - Inserite un nome
  - Il file viene creato con un template base

==== Aprire la vista Design ====

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)

==== Vista codice ====

Per modificare il codice sorgente PXAML:
  - Cliccate su "Source" nella toolbar
  - Oppure: clic destro -> "View Source"

==== Aggiungere componenti ====

**Tramite Drag & Drop:**
  - Trascinate un controllo dalla Toolbox
  - Rilasciatelo nell'area Design
  - Posizionatelo come desiderato

**Tramite codice:**
  - Passate alla vista codice
  - Inserite manualmente l'elemento
  - L'anteprima si aggiorna automaticamente

==== Modificare le proprietà ====

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

===== Fondamenti PXAML =====

==== Namespace ====

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

^ Namespace ^ Utilizzo ^
| Standard (senza prefisso) | Controlli base (Button, TextBox, Grid, ...) |
| x: | Estensioni markup (x:Name, x:Key, ...) |
| local: | Tipi personalizzati dal progetto |

==== Container di layout ====

^ Container ^ Descrizione ^
| Grid | Layout a righe e colonne |
| StackPanel | Impila elementi orizzontalmente o verticalmente |
| DockPanel | Ancora elementi ai bordi |
| Canvas | Posizionamento assoluto |
| WrapPanel | Disposizione con a capo |

==== Controlli comuni ====

^ Controllo ^ Descrizione ^
| Button | Pulsante con evento Click |
| TextBox | Input testo su singola riga |
| Label | Visualizzazione testo |
| CheckBox | Selezione sì/no |
| ComboBox | Selezione dropdown |
| ListBox | Selezione da lista |
| Image | Visualizzazione immagine |
| Border | Bordo e sfondo |

==== Data Binding ====

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

==== Event Handler ====

<code xml>
<Button Content="Salva" Click="OnSaveClick"/>
</code>

L'handler viene implementato nella unit code-behind:

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

===== Impostazioni =====

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

===== Rendering multi-target =====

PXAML può essere renderizzato per diversi target:

^ Target ^ Descrizione ^ Renderer ^
| GUI | Interfaccia desktop nativa | Basato su LCL |
| TUI | Interfaccia terminale | Basato su testo |
| Web | Interfaccia browser | HTML/CSS |

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

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

==== Il Designer mostra una pagina vuota ====

**Causa:** Errore di sintassi PXAML o componenti mancanti.

**Soluzione:**
  - Passate alla vista codice
  - Controllate la sintassi PXAML (validazione XML)
  - Assicuratevi che tutti i componenti referenziati esistano

==== L'anteprima non si aggiorna ====

**Causa:** Auto-refresh disabilitato o errore.

**Soluzione:**
  - Salvate il file (''Ctrl+S'')
  - Eseguite ''WVDS: Refresh Preview'' manualmente
  - Controllate l'Output Channel per errori

==== Drag & Drop non funziona ====

**Causa:** Area sbagliata o container non supportato.

**Soluzione:**
  - Assicuratevi di rilasciare nell'area Design
  - Verificate se il container di destinazione accetta figli
  - Alcuni container (es. Border) accettano solo un figlio

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

^ Proprietà ^ Valore ^
| Extension ID | wvds.wvds-vscode-ui-designer |
| Attivazione | onCustomEditor:wvds.ui.designer.pxaml |
| Dipendenze | wvds-vscode-core |
| Min. VS Code | 1.85.0 |
| Formato file | .pxaml |

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

  * [[.:meta|UI Meta - Registro componenti]]
  * [[.:preview|UI Preview - Anteprima live]]
  * [[.:projects|Projects - Template di progetto con PXAML]]