Lekce 3 - Pozicování v VB.NET WPF

V minulém dílu , Jazyk XAML v VB.NET WPF, jsme si uvedli základní syntaxi jazyka XAML.

V dnešním dílu se naučíme elementy pozicovat, což je poslední věc, kterou musíme znát před tím, abychom tvořili záživnější aplikace.

Absolutní a relativní pozice

V úvodním článku jsme již zmínili, že WPF zavádí relativní pozici prvků na formuláři. V naší první aplikaci s pozdravem měl však TextBlock pozici absolutní. Pojďme se podívat na jeho XAML kód, který vygeneroval grafický návrhář po tom, co jsme TextBlock na formulář přidali z ToolBoxu.

<TextBlock HorizontalAlignment="Left" Margin="120,77,0,0" TextWrapping="Wrap" Text="Pozdrav z formuláře" VerticalAlignment="Top"/>

Absolutní pozice

Ve WPF přímo do Gridu v okně nelze vkládat prvky na absolutní pozici, můžeme si však pomoci okrajem. Návrhář v příkladu výše zjistil, že jsme kontrolku vložili na souřadnice [120;77]. Aby ji tam zobrazil, umístí ji vlevo nahoru (proto atributy HorizontalAlig­nment="Left" a VerticalAlignmen­t="Top") a nastaví ji vnější okraje na 120 zleva a 77 zhora atributem Margin. Tak to vypadá, že je kontrolka na pozici [120;77], ale ve skutečnosti je kolem ní okraj.

Asi největší nevýhoda používání absolutních pozic je, že formulář nereaguje na roztažení nebo dokonce změnu poměru jeho stran. To se dnešním aplikacím často stává, jelikož každé zařízení má jinak velký displej (mobil, tablet, PC). Další nevýhodou je, že pokud nějaká kontrolka zvětší svou velikost, musíme ručně ty okolní posunout, aby se formulář nerozsypal. To může být u větších aplikací opravdu velmi nepřehledné.

Ačkoli jsme TextBlock naklikli doprostřed formuláře, po jeho roztažení vypadá aplikace takto:

Je vidět, že naklikat prvky na pevné pozice je sice jednoduché a rychlé, ale také krátkozraké. Proto se tak formuláře již nedělají.

Relativní pozice

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

<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Pozdrav z formuláře" />

Když aplikaci nyní spustíme a formulář např. zúžíme svisle a roztáhneme vodorovně, TextBlock je stále uprostřed. Asi nemusím říkat, že HorizontalAlignment nastavuje vodorovné zarovnání a VerticalAlignment svislé.

Okraje

Každý element má vnitřní a vnější okraje. Vnitřním se říká Padding a těm vnějším Margin. Znalci HTML zde budou jako doma.

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

Vymažeme z aplikace 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:

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

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

Všimněte si, že jsme tlačítku v příkladu výše zadali šířku pomocí atributu Width. To se u tlačítek obvykle dělá, jelikož nevypadá hezky, když je každé jinak široké podle délky textu v něm.

Device Independent Pixels

Velikosti zadáváme v jednotkách DIP. DIP označuje Device Independent Pixels. Při DPI 96, což je výchozí hodnota po instalaci Windows, má 1 DIP velikost 1 pixel na displeji. Uživatelé velkých monitorů (třeba já) mají nastavené vyšší DPI (Dots Per Inch, bodů na palec) a tedy 1 DIP vychází např. na 1.25 fyzického pixelu. DPI bude stále důležitější, jelikož se dají běžně koupit 2k displeje a na trh míří 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, vaše aplikace by nebyla na takovém displeji pomalu ani vidět. S DIP bude vypadat stále stejně, WPF tedy udělá vše za nás.

K nastavení DPI se ve Windows dostanete pravým kliknutím na pracovní plochu a výběrem možnosti přizpůsobit. V okně zvolíte vlevo dole Zobrazení. Bude vám nabídnuto změnit velikost písma a položek na obrazovce.

Můžete si zkusit nastavit vyšší DPI (po nastavení vyžaduje odhlášení) a potom spustit vaší WPF aplikaci, která se novému DPI přizpůsobí. Windows Forms aplikace by se rozsypala nebo rozmazala, zkuste si spustit některé aplikace, které používáte. Většina z nich nebude fungovat správně, protože používá ještě staré technologie.

Pozicování

Na konec dnešní lekce si zmiňme ještě něco málo o pozicování kontrolek. Upravte XAML kód tlačítka tak, aby vypadal následovně:

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

Tlačítko se roztahne po celém gridu:

Toto je výchozí chování kontrolek. Pokud totiž neurčíme zarovnání, předpokládají se v nich hodnoty Stretch:

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

Do atributů 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í

U VerticalAlignment jsou hodnoty obdobné, jen místo Left a Right nastavujeme Top a Bottom.

Vyzkoušejte si jednotlivé hodnoty. Pro jistotu ještě jednou zmíním, že kontrolky se zarovnávají do elementu, ve kterém jsou vložené. Tomuto elementu se říká rodičovský (anglicky parrent).

Výška a šířka elementů

Pro výšku a šířku elementů používáme atributy Width a Height. Kromě DIP zde můžeme nastavit i hodnotu Auto, která je výchozí. Velikost se potom určí podle obsahu elementu, např. podle délky textu popisku tlačítka. Můžeme také nastavit minimální nebo maximální rozměr pomocí atributů MinWidth, MinHeight, MaxWidth a MaxHeight.

Příště, Návrh formuláře pro kalkulačku v VB.NET WPF, budeme navrhovat formulář pro jednoduchou kalkulačku. Dnešní příklad je jako vždy v příloze ke stažení.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.