TUI Layout

Odzivna razporeditev s sidranjem kot privzeto za TUI aplikacije.

Sidranje je privzet način - vsaka kontrola se pravilno obnaša ob spremembi velikosti terminala brez posebnih vsebnikov.

Osnovno načelo

Sidranje kot privzeto pomeni:
- Sprememba velikosti terminala ne sme pokvariti razporeditve, fokusa in izrisovanja
- Kontrole ohranjajo stabilne prostorske odnose
- Predvidljiva pravila raztezanja/krčenja

Semantika sidra

Razpoložljiva sidra

Sidro Pomen
Left Razdalja do levega roba ostane konstantna
Top Razdalja do zgornjega roba ostane konstantna
Right Razdalja do desnega roba ostane konstantna
Bottom Razdalja do spodnjega roba ostane konstantna

Kombinacije

Privzeto: Left + Top
→ Položaj ostane stabilen, velikost konstantna

Left + Right:
→ Širina se raztegne/skrči s širino starša

Top + Bottom:
→ Višina se raztegne/skrči z višino starša

Vsa štiri (Left + Top + Right + Bottom):
→ Pravokotnik se raztegne v obe smeri

Brez sider:
→ Obravnavaj kot Left + Top (brez "lebdeče" dvoumnosti)

PXAML primeri

<!-- Fiksna pozicija zgoraj levo -->
<Button Anchors="Left,Top" Text="OK" />
 
<!-- Polna širina, fiksna višina -->
<TextEdit Anchors="Left,Top,Right" Height="3" />
 
<!-- Zapolni celotno razpoložljivo območje -->
<ListView Anchors="Left,Top,Right,Bottom" />
 
<!-- Statusna vrstica spodaj -->
<StatusBar Anchors="Left,Right,Bottom" Height="1" />

Obnašanje ob spremembi velikosti

Potek ob spremembi velikosti

1. Prejet dogodek spremembe velikosti
   └─ Posodobi razpoložljiv pravokotnik korena

2. Razveljavi razporeditev
   └─ Izvedi prehod Measure/Arrange

3. Ohrani fokus
   └─ Ista logična kontrola ohrani fokus

4. Izriši ponovno
   └─ Paint → DiffFlush

Deterministično

OBVEZNO:
- Enak vhod → Enaka razporeditev
- Brez utripanja pri hitri spremembi velikosti
- Brez pokvarjenega kurzorja
- Fokus ostane na logični kontroli

Prelomne točke

Opcijski a priporočeni pragovi spremembe velikosti:

Standardne prelomne točke

Prelomna točka Širina Tipična razporeditev
Narrow < 80 En stolpec, naloženo
Medium 80-119 Stranska vrstica strnjena v zavihke
Wide >= 120 Stranska vrstica + vsebina ena ob drugi

PXAML konfiguracija

<Panel ResponsiveMode="Auto" Breakpoints="80,120">
  <!-- Samodejno prerazporejanje ob preseženi prelomni točki -->
</Panel>

Pravila prelomnih točk

OBVEZNO:
- Prelomne točke NISO "čarovnija" - definiraj v PXAML ali konfiguraciji teme
- Dokumentiraj prelomne točke
- Jasno definiraj obnašanje pri vsaki prelomni točki

Vsebniki za razporeditev

Stack

Usmerjenost: Navpično ali vodoravno
Otroci se razporedijo zaporedno
<Stack Orientation="Vertical">
  <Label Text="Ime:" />
  <TextEdit />
  <Label Text="E-pošta:" />
  <TextEdit />
</Stack>

Dock

Položaji: Left, Top, Right, Bottom, Fill
Otroci se pripnejo na strani, preostanek zapolni sredino
<Dock>
  <MenuBar Dock="Top" />
  <StatusBar Dock="Bottom" />
  <Sidebar Dock="Left" Width="20" />
  <Content Dock="Fill" />
</Dock>

Overlay

Za pojavna okna, modalna okna, namige
Prekrije druge kontrole
Mora ostati znotraj meja zaslona (prirezano)
<Overlay>
  <Dialog X="10" Y="5" Width="40" Height="10">
    <!-- Vsebina modalnega okna -->
  </Dialog>
</Overlay>

Grid (kasneje)

Definiraj vrstice in stolpce
Postavi kontrole v celice

Prednost sidranja

Vrstni red izračuna razporeditve:

1. Razporeditev vsebnika (če eksplicitno)
   └─ Stack/Grid/Dock/Overlay izračuna pravokotnike otrok

2. Uporabi sidra
   └─ Izboljšaj znotraj pravokotnika vsebnika
   └─ Upoštevaj Min/Max
   └─ Ohrani Margins/Padding

3. Obrezovanje nazadnje
   └─ Oreži končne meje

Drsenje in vidno polje

Ko je vsebina večja od območja

PREDNOSTNO:
- Uporabi vsebnik ScrollViewer
- Naredi vsebino drsljivo

NE kot privzeto:
- Besedilo "skrči, da se prilega"

OBVEZNO:
- Kontrole lahko izrisujejo v manjšem pravokotniku (obrezovanje + tropičje)
- Stanje se ne sme izgubiti

Primer ScrollViewer

<ScrollViewer Anchors="Left,Top,Right,Bottom">
  <Stack Orientation="Vertical">
    <!-- Dolg seznam kontrol -->
  </Stack>
</ScrollViewer>

Fokus ob prerazporeditvi

OBVEZNO:
- Fokus se sledi prek identitete kontrole (ne položaja na zaslonu)
- Po prerazporeditvi:
  - Če fokusirana kontrola še vedno fokusabilna in vidna → ohrani
  - Sicer: nadomestno na naslednjega fokusabilnega sorojenca v vrstnem redu fokusa

Stabilnost fokusa

procedure TLayoutEngine.ApplyReflow;
var
  PreviousFocus: TWvdSControl;
begin
  (* Zapomni fokus *)
  PreviousFocus := FocusManager.FocusedControl;
 
  (* Ponovno izračunaj razporeditev *)
  MeasureAndArrange(RootControl);
 
  (* Obnovi fokus *)
  if (PreviousFocus <> nil) and
     PreviousFocus.CanFocus and
     PreviousFocus.IsVisible then
    FocusManager.SetFocus(PreviousFocus)
  else
    FocusManager.FocusNextAvailable;
end;

Preverjanje

Testi spremembe velikosti

[ ] Ponavljanje Narrow ↔ Wide: brez utripanja
[ ] Kurzor ni pokvarjen po spremembi velikosti
[ ] Fokus ostane na isti kontroli
[ ] Sidrno raztegnjene kontrole se ne prekrivajo
[ ] Pojavna okna/prekrivanja ostanejo v mejah zaslona

Testi prelomnih točk

[ ] Razporeditev se pravilno preklopi ob preseženi prelomni točki
[ ] Brez utripanja ob preklopu prelomne točke
[ ] Vse prelomne točke dokumentirane

Testi vsebnikov

[ ] Stack pravilno razporedi otroke
[ ] Dock pravilno zapolni (Left, Top, Right, Bottom, Fill)
[ ] Overlay ostane v mejah
[ ] Ugnezdeni vsebniki delujejo

PXAML referenca

Atributi kontrol

Atribut Vrednosti Pomen
Anchors Left,Top,Right,Bottom Kombinacije sider
Margin „l,t,r,b“ ali „vse“ Zunanji odmik
Padding „l,t,r,b“ ali „vse“ Notranji odmik
MinWidth Integer Minimalna širina
MaxWidth Integer Maksimalna širina
MinHeight Integer Minimalna višina
MaxHeight Integer Maksimalna višina

Atributi vsebnikov

Atribut Vrednosti Pomen
ResponsiveMode Auto, Manual Samodejno rokovanje s prelomnimi točkami
Breakpoints „w1,w2,…“ Širine prelomnih točk

Glejte tudi

Zuletzt geändert: dne 29.01.2026 ob 22:26