Lekce 3 - Pozicování ve WinUI 3 a C# .NET

V minulé lekci, Jazyk XAML ve WinUI 3 a C# .NET, jsme si uvedli základní syntaxi jazyka XAML.

V dnešním WinUI 3 tutoriálu se naučíme pozicovat ovládací prvky. Zmíníme layouty, absolutní a relativní pozici, DIP, vnější a vnitřní okraje a velikost.

Budeme pracovat s naší aplikací z lekce Úvod do Windows App SDK a WinUI 3.

Layouty

Základním nástrojem pro pozicování ovládacích prvků ve WinUI 3 jsou komponenty označované jako layouts (počeštěně layouty) nebo také kontejnery či panely. Jedná se o komponenty, které mohou obsahovat libovolné množství dalších komponent a které řeší jejich rozmístění. Layout tedy použijeme ve chvíli, kdy chceme do okna vložit více než jeden ovládací prvek. Layouty můžeme samozřejmě zanořovat do sebe.

StackPanel

S jedním layoutem jsme se již setkali, konkrétně s layoutem StackPanel, v němž máme umístěný jeden popisek:

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

Tomuto layoutu můžeme pomocí atributu Orientation nastavit orientaci, která ovlivňuje jeho chování:

• Horizontal – Prvky skládá za sebe směrem zleva doprava.
• Vertical – Prvky skládá pod sebe směrem shora dolů.

Zkusme si schválně do elementu <StackPanel> vložit více popisků <TextBlock> a změňme orientaci na vertikální:

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

Popisky se opravdu zobrazí pod sebou:

Další layouty, jako je například Grid, si představíme dále v kurzu.

Absolutní a relativní pozice

Vraťme se nyní zpátky k jedinému popisku. Jelikož chceme jen jeden popisek, můžeme jej umístit přímo do okna bez použití jakéhokoli layoutu:

<Window ...>
    <TextBlock Text="Pozdrav z WinUI 3 aplikace" />
</Window>

Absolutní pozice

Někdy potřebujeme ovládací prvek umístit na konkrétní souřadnice, tedy na absolutní pozici. Ve WinUI 3 lze prvky vkládat na absolutní pozici v layoutu zvaném Canvas. Jelikož se tento layout moc nepoužívá, nebudeme si ho dnes blíže popisovat. Bez použití layoutu Canvas si můžeme pomoci okrajem. Umístěme náš popisek na souřadnice [200;128]:

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

Pomocí atributu Margin jsme popisku nastavili vnější okraje na 200 zleva a 128 shora. Výsledek vypadá tak, že je ovládací prvek na pozici [200;128], ale ve skutečnosti je kolem něj pouze okraj:

Asi největší nevýhodou používání absolutních pozic je to, že obsah okna nereaguje na roztažení, nebo dokonce změnu poměru jeho stran. Další nevýhodou je, že pokud nějaký ovládací prvek zvětší svou velikost, musíme ručně posunout okolní prvky, aby se obsah okna nerozsypal. To může být u větších aplikací opravdu velmi nepřehledné.

Relativní pozice

Relativní pozice na rozdíl od absolutní respektuje okolní prvky i samotné okno. Upravme XAML kód elementu <TextBlock> tak, aby se centroval do elementu, ve kterém je vložený. V našem případě bude ve středu elementu <Window>:

<TextBlock
    Text="Pozdrav z WinUI 3 aplikace"
    HorizontalAlignment="Center"
    VerticalAlignment="Center" />

HorizontalAlignment nastavuje vodorovné zarovnání a VerticalAlignment svislé. Když aplikaci nyní spustíme a okno například zúžíme svisle a roztáhneme vodorovně, TextBlock je stále uprostřed:

Okraje

Všechny komponenty, které lze vložit do okna, mají vnější a některé i vnitřní okraje. Vnějším se říká Margin a těm vnitřním Padding:

Každý okraj můžeme nastavit jinak pro různé strany nebo ho na všech stranách nastavit na jednu velikost.

Odebereme z okna TextBlock a místo něj vložíme tlačítko pomocí následujícího XAML kódu:

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

Výsledek vypadá takto:

Můžeme vidět, že ačkoli je tlačítko zarovnané doprostřed, jeho vnější okraj je na levé straně 100. Tuto hodnotu jsme nastavili pomocí Margin. U vnitřního okraje tlačítka naopak vidíme, že horní je výrazně větší než ostatní. To způsobuje hodnota 50 v Padding.

Hodnoty zadáváme v pořadí: levý, horní, pravý, dolní okraj a oddělujeme je čárkami. Také lze zadat jen jednu hodnotu, která nastaví všechny okraje na tutéž velikost. Stejně tak můžeme zadat i dvě hodnoty, jednu pro vodorovné okraje a druhou pro svislé.

Device Independent Pixels

Velikosti zadáváme v jednotkách DIP (Device Independent Pixels). 1 DIP může být buď stejný, menší, anebo větší než jeden fyzický pixel. Velikost DIP totiž závisí na hodnotě DPI (Dots Per Inch), která označuje počet bodů/pixelů na palec. Při DPI 96, což je výchozí hodnota po instalaci Windows, má 1 DIP velikost 1 fyzického pixelu na displeji. Uživatelé velkých monitorů mají nastavené vyšší DPI, 1 DIP tedy vychází např. na 1.25 fyzického pixelu.

DIP jsou velmi důležité, jelikož se dají běžně pořídit i 4K displeje, které mají 4x větší rozlišení než ty, které jsou nyní standardem. Pokud by se místo DIP používaly obyčejné pixely, naše aplikace by nebyla na takovém displeji téměř ani vidět. S DIP bude vypadat stále stejně, WinUI 3 tedy uzpůsobí vše za nás.

Výška a šířka komponent

Všimněme si, že jsme tlačítku v příkladu výše zadali šířku pomocí atributu Width. Obdobně bychom mohli nastavit i výšku atributem Height. Kromě DIP zde můžeme nastavit i hodnotu Auto, která je výchozí. Velikost se potom určí podle obsahu komponenty, například podle délky textu popisku tlačítka. Pomocí atributů MinWidth, MinHeight, MaxWidth a MaxHeight také můžeme nastavit minimální nebo maximální rozměr.

Zarovnání

Na konec dnešní lekce si ještě něco málo doplníme k zarovnání ovládacích prvků. Upravme XAML kód tlačítka tak, aby vypadal následovně:

<Button Content="Tlačítko" />

Tlačítko se ve svislém směru zarovná doprostřed a ve vodorovném doleva:

Toto ale není výchozí chování všech prvků. Obecně platí, že pokud neurčíme zarovnání, předpokládá se v atributech HorizontalAlignment a VerticalAlignment hodnota Stretch. Ta zajistí roztažení přes celou dostupnou šířku, respektive výšku. Některé ovládací prvky však mají kvůli výchozímu stylování nastavené jiné výchozí hodnoty. To je právě případ tlačítka. Pokud bychom chtěli tlačítko roztáhnout přes celé okno, museli bychom explicitně nastavit atributy HorizontalAlignment a VerticalAlignment na Stretch:

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

Výsledek:

Atributu HorizontalAlignment můžeme nastavit následující hodnoty:

• Center – zarovnání na střed,
• Left – zarovnání vlevo,
• Right – zarovnání vpravo,
• Stretch – roztažení přes celou šířku.

U VerticalAlignment jsou hodnoty obdobné, jen místo Left a Right nastavujeme Top a Bottom. Vyzkoušejme si jednotlivé hodnoty. Ovládací prvky se zarovnávají do elementu, ve kterém jsou vložené. Tomuto elementu se říká rodičovský (anglicky parent).

V následujícím kvízu, Kvíz - Základy, XAML, pozicování ve WinUI 3 a C# .NET, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.