Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

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

C# .NET Formuláře WPF Pozicování v C# .NET WPF

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Jazyk XAML v C# .NET WPF, jsme si uvedli základní syntaxi jazyka XAML. V dnešním tutoriá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.

V příští lekci, Návrh formuláře pro kalkulačku v C# .NET WPF, 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 287x (54.34 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
16 hlasů
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.
Miniatura
Předchozí článek
Jazyk XAML v C# .NET WPF
Miniatura
Všechny články v sekci
Okenní aplikace v C# .NET WPF
Aktivity (3)

 

 

Komentáře

Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:12.12.2013 12:24

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
Redaktor
Avatar
Petr Čech:25.12.2013 14:21

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
Juraj Mlich:25.12.2013 14:30

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
Petr Čech
Redaktor
Avatar
Odpovídá na Juraj Mlich
Petr Čech:25.12.2013 14:34

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
Michal Žůrek (misaz):25.12.2013 14:44

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.
Avatar
Honza Rada
Člen
Avatar
Honza Rada:13. května 21:48

Daly by se souřadnice udat procentuálně vzhledem k oknu?

Odpovědět 13. května 21:48
#c#
Avatar
Daniel Šup
Člen
Avatar
Daniel Šup:7. srpna 20:29

Zdravím,

zajímalo by mě, jak lze vhodně zarovnat dvě tlačítka pod sebou na střed. Níže uvádím XAML pro vložení dvou tlačítek pod sebou, zarovnaných na střed. Rád bych věděl, jak napsat XAML pro vložení dvou tlačítek pod sebou, zarovnaných na střed, lépe.

<Window x:Class="WPFintroduction.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFintroduction"
        mc:Ignorable="d"
        Title="Application" Height="350" Width="525">
    <Grid>
        <Button Content="Tlačítko" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,22"/>
        <Button Content="Tlačítko" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,22,0,0"/>
    </Grid>
</Window>

Rád bych věděl, zda jde zarovnat dvě tlačítka pod sebou na střed jinak než výše uvedeným způsobem. Nelze zarovnat na střed dvě tlačítka pod sebou lépe než výše uvedeným způsobem?

Editováno 7. srpna 20:30
 
Odpovědět 7. srpna 20:29
Avatar
patrik.valkovic
Šéfredaktor
Avatar
Odpovídá na Daniel Šup
patrik.valkovic:7. srpna 22:55

Umístit do StackPanelu, poté budou pod sebou a na středu (v kontextu StackPanelu).

Odpovědět  +1 7. srpna 22:55
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
Daniel Šup
Člen
Avatar
Odpovídá na patrik.valkovic
Daniel Šup:8. srpna 8:01

Ahoj,

velice ti děkuji za tvou odpověď. Nyní jsem tlačítka zkusil umístit do StackPanelu, zarovnaného na střed. Tlačítka se mi nyní zarovnají na střed přesně tak, jak jsem chtěl.

 
Odpovědět 8. srpna 8:01
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 9 zpráv z 9.