3. diel - Pozíciovanie vo WinUI 3 a C# .NET

V minulej lekcii, Jazyk XAML vo WinUI 3 a C# .NET , sme si uviedli základnú syntax jazyka XAML.

V dnešnom WinUI 3 tutoriále sa naučíme pozicovať ovládacie prvky. Spomenieme layouty, absolútnu a relatívnu pozíciu, DIP, vonkajšie a vnútorné okraje a veľkosť.

Budeme pracovať s našou aplikáciou z lekcie Úvod do Windows App SDK a WinUI 3.

Layouty

Základným nástrojom pre pozíciovanie ovládacích prvkov vo WinUI 3 sú komponenty označované ako layouts (počeštene layouty) alebo tiež kontajnery či panely. Ide o komponenty, ktoré môžu obsahovať ľubovoľné množstvo ďalších komponentov a ktoré riešia ich rozmiestnenie. Layout teda použijeme vo chvíli, keď chceme do okna vložiť viac ako jeden ovládací prvok. Layouty môžeme do seba samozrejme zanárať.

StackPanel

S jedným layoutom sme sa už stretli, konkrétne teda s layoutom StackPanel, v ktorom máme umiestnený jeden popis:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Pozdrav zWinUI 3 aplikácia" />
</StackPanel>

Tomuto layoutu môžeme pomocou atribútu Orientation nastaviť orientáciu, ktorá ovplyvňuje jeho správanie:

• Horizontal – prvky skladá za seba smerom zľava doprava,
• Vertical – prvky skladá pod seba smerom zľava dole.

Skúsme si schválne do elementu <StackPanel> vložiť viac popisov <TextBlock> a zmeňme orientáciu na vertikálnu:

<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Pozdrav z WinUI 3 aplikácia" />
    <TextBlock Text="Pozdrav z WinUI 3 aplikácia" />
    <TextBlock Text="Pozdrav z WinUI 3 aplikácia" />
</StackPanel>

Popisky sa naozaj zobrazia pod sebou:

Ďalšie layouty, ako je napríklad Grid, si predstavíme ďalej v kurze.

Absolútna a relatívna pozícia

Vráťme sa teraz späť k jedinému popisku. Keďže chceme len jeden popis, môžeme ho umiestniť priamo do okna bez použitia akéhokoľvek layoutu:

<Window ...>
    <TextBlock Text="Pozdrav z WinUI 3 aplikácia" />
</Window>

Absolútna pozícia

Niekedy potrebujeme ovládací prvok umiestniť na konkrétne súradnice, teda na absolútnu pozíciu. Vo WinUI 3 je možné prvky vkladať na absolútnu pozíciu v layoutu zvanom Canvas. Keďže sa tento layout veľmi nepoužíva, tak si ho dnes bližšie popisovať nebudeme. Bez použitia Canvas si môžeme pomôcť okrajom. Umiestnime náš popis na súradnice [200;128]:

<TextBlock
    Text="Pozdrav z WinUI 3 aplikácia"
    Margin="200, 128, 0, 0" />

Pomocou atribútu Margin sme popisku nastavili vonkajšie okraje na 200 zľava a 128 zhora. Tak to vyzerá, že je ovládací prvok na pozícii [200;128], ale v skutočnosti je okolo neho okraj:

Asi najväčšia nevýhoda používania absolútnych pozícií je, že obsah okna nereaguje na roztiahnutie alebo dokonca zmenu pomeru jeho strán. Ďalšou nevýhodou je, že pokiaľ nejaký ovládací prvok zväčší svoju veľkosť, musíme ručne tie okolité posunúť, aby sa obsah okna nerozsypal. To môže byť u väčších aplikácií skutočne veľmi neprehľadné.

Relatívna pozícia

Relatívna pozícia na rozdiel od absolútnej rešpektuje okolité prvky aj samotné okno. Upravme XAML kód elementu <TextBlock> tak, aby sa centroval do elementu, v ktorom je vložený. V našom prípade bude v strede elementu <Window>:

<TextBlock
    Text="Pozdrav z WinUI 3 aplikácia"
    HorizontalAlignment="Center"
    VerticalAlignment="Center" />

HorizontalAlignment nastavuje vodorovné zarovnanie a VerticalAlignment zvislé. Keď aplikáciu teraz spustíme a okno napríklad zúžime zvisle a roztiahneme vodorovne, TextBlock je stále uprostred:

Okraje

Všetky komponenty, ktoré je možné vložiť do okna, majú vonkajšie a niektoré aj vnútorné okraje. Vonkajším sa hovorí Margin a tým vnútorným Padding:

Každý okraj môžeme nastaviť iný pre rôzne strany alebo ho na všetkých stranách nastaviť na jednu veľkosť.

Vymažeme obsah z okna TextBlock a namiesto neho vložíme tlačidlo pomocou nasledujúceho XAML kódu:

<Button
    Content="Tlačidlo"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="75"
    Margin="100, 0, 0, 0"
    Padding="0, 50, 0, 0" />

Výsledok vyzerá takto:

Je vidieť, že hoci je tlačidlo zarovnané do stredu, jeho vonkajší okraj je na ľavej strane 100. Túto hodnotu sme nastavili pomocou Margin. Na vnútornom okraji tlačidla naopak vidíme, že ten horný je výrazne väčší ako ostatní. To je hodnota 50 v Padding.

Hodnoty zadávame v poradí: ľavý, horný, pravý, dolný okraj a oddeľujeme ich čiarkami. Je možné zadať len jednu hodnotu, ktorá nastaví všetky okraje na rovnakú veľkosť. Rovnako tak môžeme zadať aj dve hodnoty, jednu pre vodorovné okraje a jednu pre zvislé.

Device Independent Pixels

Veľkosti zadávame v jednotkách DIP. DIP označuje Device I ndependent P ixels. Pri DPI 96, čo je predvolená hodnota po inštalácii Windows, má 1 DIP veľkosť 1 fyzického pixelu na displeji. Užívatelia veľkých monitorov majú nastavené vyššie DPI (D ots P er Inch, bodov na palec) a teda 1 DIP vychádza napr. na 1.25 fyzického pixelu. DIP sú stále dôležitejšie, pretože sa dajú bežne kúpiť aj 4k displeje, ktoré majú 4x väčšie rozlíšenie ako tie, ktoré sú teraz štandardom. Ak by sa namiesto DIP používali obyčajné pixely, naša aplikácia by nebola na takomto displeji pomaly ani vidieť. S DIP bude vyzerať stále rovnako, WinUI 3 teda prispôsobí všetko za nás.

Výška a šírka komponentov

Všimnime si, že sme tlačidlu v príklade vyššie zadali šírku pomocou atribútu Width. Podobne by sme mohli nastaviť aj výšku pomocou atribútu Height. Okrem DIP tu môžeme nastaviť aj hodnotu Auto, ktorá je predvolená. Veľkosť sa potom určí podľa obsahu komponentu, napríklad podľa dĺžky textu popisu tlačidla. Môžeme tiež nastaviť minimálny alebo maximálny rozmer pomocou atribútov MinWidth, MinHeight, MaxWidth a MaxHeight.

Zarovnanie

Na koniec dnešnej lekcie si ešte niečo málo doplníme na zarovnanie ovládacích prvkov. Upravme XAML kód tlačidla tak, aby vyzeral nasledovne:

<Button Content="Tlačidlo" />

Tlačidlo sa vo zvislom smere zarovná doprostred a vo vodorovnom doľava:

Toto ale nie je predvolené správanie všetkých prvkov. Všeobecne platí, že pokiaľ neurčíme zarovnanie, predpokladá sa v atribútoch HorizontalAlignment a VerticalAlignment hodnota Stretch, ktorá zaistí roztiahnutie cez celú dostupnú šírku respektíve výšku. Niektoré ovládacie prvky však majú vďaka predvolenému štylovaniu nastavené iné predvolené hodnoty. To je práve prípad tlačidla. Pokiaľ by sme chceli tlačidlo roztiahnuť cez celé okno, museli by sme explicitne nastaviť atribúty HorizontalAlignment a VerticalAlignment na Stretch:

<Button Content="Tlačidlo" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

Výsledok:

Atribútu HorizontalAlignment môžeme nastaviť nasledujúce hodnoty:

• Center - zarovnanie na stred,
• Left - zarovnanie vľavo,
• Right - zarovnanie vpravo,
• Stretch - roztiahnutie cez celú šírku.

Pri VerticalAlignment sú hodnoty podobné, len namiesto Left a Right nastavujeme Top a Bottom. Vyskúšajme si jednotlivé hodnoty. Ovládacie prvky sa zarovnávajú do elementu, v ktorom sú vložené. Tomuto elementu sa hovorí rodičovský (anglicky parent).

V budúcej lekcii, Návrh používateľského rozhrania kalkulačky vo WinUI 3 a C# .NET , navrhneme užívateľské rozhranie pre jednoduchú kalkulačku. Naučíme sa pri tom pracovať s layoutom Grid a predstavíme si prvky TextBox a ComboBox a veľmi užitočný nástroj WinUI 3 Gallery.