WvdS VSCode UI Designer

UI Designer omogućuje vizualni PXAML razvoj u VS Code - WYSIWYG editor za Pascal-bazirana korisnička sučelja.

Designer nudi:

• Vizualni editor - Drag-and-drop UI dizajn
• PXAML sintaksa - WPF/XAML-kompatibilni markup za Pascal
• Pregled uživo - Pregled u stvarnom vremenu tijekom uređivanja
• Properties Panel - Vizualno uređivanje svojstava
• Component Palette - Pregled dostupnih kontrola

PXAML (Pascal XAML) je XML-bazirani markup format za korisnička sučelja, inspiriran WPF/XAML-om.

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

1. Ctrl+Shift+P → WVDS Designer: New PXAML File
2. Unesite naziv
3. Datoteka se stvara s osnovnim predloškom

Kada otvorite .pxaml datoteku, Designer se automatski aktivira.

Editor prikazuje:

• Područje dizajna - Vizualni prikaz UI-ja (lijevo)
• Properties Panel - Svojstva odabranog elementa (desno)
• Toolbox - Dostupne kontrole (lijevo dolje)

Za uređivanje PXAML izvornog koda:

1. Kliknite na „Source“ u alatnoj traci
2. Ili: Desni klik → „View Source“

Drag & Drop:

1. Povucite kontrolu iz Toolboxa
2. Ispustite je u području dizajna
3. Pozicionirajte po želji

Putem koda:

1. Prebacite se na pogled koda
2. Ručno dodajte element
3. Pregled se automatski ažurira

1. Odaberite element u designeru
2. Properties Panel prikazuje sva dostupna svojstva
3. Mijenjajte vrijednosti direktno u panelu
4. Promjene se odmah prikazuju u pregledu

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

Handler se implementira u code-behind unitu:

procedure TMainWindow.OnSaveClick(Sender: TObject);
begin
  // Logika spremanja
end;

Designer koristi postavke UI Meta ekstenzije za IntelliSense i informacije o komponentama.

PXAML se može renderirati za različite ciljeve:

Odabir se vrši tijekom kompilacije, ne u designeru.

Uzrok: PXAML sintaksna greška ili nedostaju komponente.

Rješenje:

1. Prebacite se na pogled koda
2. Provjerite PXAML sintaksu (XML validacija)
3. Osigurajte da sve referencirane komponente postoje

Uzrok: Auto-refresh je deaktiviran ili je došlo do greške.

Rješenje:

1. Spremite datoteku (Ctrl+S)
2. Ručno izvršite WVDS: Refresh Preview
3. Provjerite Output Channel za greške

Uzrok: Pogrešno područje ili nepodržani kontejner.

Rješenje:

1. Osigurajte da ispuštate u području dizajna
2. Provjerite dopušta li ciljni kontejner djecu
3. Neki kontejneri (npr. Border) dopuštaju samo jedno dijete

• UI Meta - Registar komponenti
• UI Preview - Pregled uživo
• Projects - Predlošci projekata s PXAML-om