Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde

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

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

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 C# .NET 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 ovládací prvek vložili na souřadnice [120;77]. Aby jej tam zobrazil, umístí jej vlevo nahoru (proto atributy HorizontalAlignment="Left" a VerticalAlignment="Top") a nastaví mu vnější okraje na 120 zleva a 77 shora atributem Margin. Tak to vypadá, že je ovládací prvek na pozici [120;77], ale ve skutečnosti je kolem něj 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ý ovládací prvek 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í prvky ve formuláři 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 <Grid>:

<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 pomocí Margin. 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 Padding.

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 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í ovládacích prvků. 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í prvků. 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 ovládací prvky se zarovnávají do elementu, ve kterém jsou vložené. Tomuto elementu se říká rodičovský (anglicky parent).

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 309x (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?
18 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 sítě 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 (5)

 

 

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
the cake is a lie
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
the cake is a lie
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.5.2017 21:48

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

Odpovědět 13.5.2017 21:48
#c#
Avatar
Daniel Šup
Člen
Avatar
Daniel Šup:7.8.2017 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.8.2017 20:30
 
Odpovědět 7.8.2017 20:29
Avatar
patrik.valkovic
Šéfredaktor
Avatar
Odpovídá na Daniel Šup
patrik.valkovic:7.8.2017 22:55

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

Odpovědět  +1 7.8.2017 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.8.2017 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.8.2017 8:01
Avatar
Martin Šmakala:5.11.2017 4:19

Jsem zatim začátečník , ale s více zkušenostmi mne to docela začíná chytat , nice že tyto stránky vůbec existují , Díky lidi

 
Odpovědět  +1 5.11.2017 4:19
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 10 zpráv z 10.