3. díl - Pozicování v C# .NET WPF

C# .NET WPF Pozicování v C# .NET WPF American English version English version

V minulém dílu našeho seriálu tutoriálů o tvorbě okenních aplikací v C# .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ář ve chvíli, co jsme TextBlock na formulář přidali z ToolBoxu.

<TextBlock x:Name="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 shora 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:

Absolutní pozice ve WPF v C# .NET

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 x:Name="textBlock" HorizontalAlignment="Center" TextWrapping="Wrap" 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é.

Relativní pozice ve WPF v C# .NET

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.

Margin a Padding ve WPF v C# .NET

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:

Margin a Padding u tlačítka ve WPF aplikaci v C# .NET

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 fyzického pixelu 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 uzpůsobí 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.

Změna DPI ve Windows

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 roztáhne po celém gridu:

Tlačítko ve WPF aplikaci v C# .NET

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í přes celou šířku

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ě budeme navrhovat formulář pro jednoduchou kalkulačku. Dnešní příklad je jako vždy v příloze ke stažení.


 

Stáhnout

Staženo 262x (54.34 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (2)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (11 hlasů) :
55555


 


Miniatura
Předchozí článek
Jazyk XAML v C# .NET WPF
Miniatura
Všechny články v sekci
Okenní aplikace v C# .NET WPF

 

 

Komentáře

Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

Zde je nutné říct a zvláště pro vývoj Modern UI či WP aplikací (u Dekstop to bude vlastně stejné), že je vhodné obrázky připravit extra pro každé DPI. Přímo Design Guide toto doporučuje.

Odpovědět 12.12.2013 12:24
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Petr Čech (czubehead):

Docela to nerespektuje css syntaxi. ;(

Odpovědět 25.12.2013 14:21
Why so serious? -Joker
Avatar
Juraj Mlich
Redaktor
Avatar
Odpovídá na Petr Čech (czubehead)
Juraj Mlich:

Bude to asi tým, že to CSS nie je...

Odpovědět 25.12.2013 14:30
Vždy je lepšie učiť sa z cudzích chýb, než z vlastných chýb.
Avatar
Odpovídá na Juraj Mlich
Petr Čech (czubehead):

Jasně, ale ta syntaxe je jako kdybych psal HTML stránku. př: margin XAML: margin="0,0,0,0" CSS: margin:0 0 0 0 .

Odpovědět 25.12.2013 14:34
Why so serious? -Joker
Avatar
Odpovídá na Petr Čech (czubehead)
Michal Žůrek (misaz):

ano XAML je taky značkovací jazyk, ale s HTML ani CSS nemá nic společného...

Odpovědět 25.12.2013 14:44
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.