3. diel - Pozíciovanie v VB.NET WPF

V minulom dieli, Jazyk XAML v VB.NET WPF , sme si uviedli základné syntax jazyka XAML.

V dnešnom dieli sa naučíme elementy pozicový, čo je posledná vec, ktorú musíme poznať pred tým, aby sme tvorili záživnější aplikácie.

Absolútnej a relatívnej pozície

V úvodnom článku sme už spomenuli, že WPF zavádza relatívnu pozíciu prvkov na formulári. V našej prvej aplikácii s pozdravom mal však TextBlock pozíciu absolútne. Poďme sa pozrieť na jeho XAML kód, ktorý vygeneroval grafický návrhár po tom, čo sme TextBlock na formulár pridali z ToolBox.

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

Absolútnej pozície

Vo WPF priamo do Gridu v okne nemožno vkladať prvky na absolútnu pozíciu, môžeme si však pomôcť okrajom. Návrhár v príklade vyššie zistil, že sme kontrolku vložili na súradnice [120; 77]. Aby ju tam zobrazil, umiestni ju vľavo hore (preto atribúty HorizontalAlignment = "Left" a VerticalAlignment = "Top") a nastaví ju vonkajšie okraje na 120 zľava a 77 zhora atribútom Margin. Tak to vyzerá, že je kontrolka na pozícii [120; 77], ale v skutočnosti je okolo nej okraj.

Asi najväčšia nevýhoda používania absolútnych pozícií je, že formulár nereaguje na roztiahnutie alebo dokonca zmenu pomeru jeho strán. To sa dnešným aplikáciám často stáva, keďže každé zariadenie má inak veľký displej (mobil, tablet, PC). Ďalšou nevýhodou je, že ak nejaká kontrolka zväčší svoju veľkosť, musíme ručne tie okolité posunúť, aby sa formulár nerozsýpal. To môže byť u väčších aplikácií naozaj veľmi neprehľadné.

Hoci sme TextBlock naklikli doprostred formulára, po jeho roztiahnutí vyzerá aplikácie takto:

Je vidieť, že naklikať prvky na pevnej pozície je síce jednoduché a rýchle, ale tiež krátkozraké. Preto sa tak formuláre už nerobia.

Relatívnej pozície

Relatívna pozícia na rozdiel od absolútnej rešpektuje okolitú kontrolky vo formulári aj samotné okno. Upravme XAML kód TextBlocku tak, aby sa centroval do elementu, v ktorom je vložený. V našom prípade bude v stredu Gridu:

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

Keď aplikáciu teraz spustíme a formulár napr. Zúžime zvisle a roztiahneme vodorovne, TextBlock je stále uprostred. Asi nemusím hovoriť, že HorizontalAlignment nastavuje vodorovné zarovnanie a VerticalAlignment zvislé.

Okraje

Každý element má vnútorné a vonkajšie okraje. Vnútorným sa hovorí Padding a tým vonkajším Margin. Znalci HTML tu budú ako doma.

Každý okraj môžeme nastaviť iný pre rôzne strany alebo ho na všetkých stranách elementu nastaviť na jednu veľkosť.

Vymastíme z aplikácie TextBlock a namiesto neho vložíme tlačidlo pomocou nasledujúceho XAML kódu:

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

Výsledok vyzerá takto:

Je vidieť, že hoci je tlačidlo zarovnané doprostred, jeho vonkajší okraj je na ľavej strane 100. Túto hodnotu sme nastavili marginom. U vnútorného okraja tlačidla naopak vidíme, že ten horná je výrazne väčší než ostatné. To je hodnota 50 v padding.

Hodnoty zadávame v poradí: ľavý okraj, horný, pravý, dolný a oddeľujeme je čiarkami. Je možné zadať len jednu hodnotu, ktorá nastaví všetky okraje na rovnakú veľkosť. Rovnako tak môžeme zadať aj 2 hodnoty, jednu pre vodorovné okraje a jednu pre zvislé.

Všimnite si, že sme tlačidle v príklade vyššie zadali šírku pomocou atribútu Width. To sa u tlačidiel zvyčajne robí, pretože nevyzerá pekne, keď je každé inak širokej podľa dĺžky textu v ňom.

Device Independent Pixels

Veľkosti zadávame v jednotkách DIP. DIP označuje Device Independent Pixels. Pri DPI 96, čo je východisková hodnota po inštalácii Windows, má 1 DIP veľkosť 1 pixel na displeji. Užívatelia veľkých monitorov (napríklad ja) majú nastavené vyššie DPI (Dots Per Inch, bodov na palec) a teda 1 DIP vychádza napr. Na 1.25 fyzického pixelu. DPI bude stále dôležitejšie, pretože sa dajú bežne kúpiť 2k displeja a na trh mieri i 4k displeje, ktoré majú 4x väčšie rozlíšenie ako tie, ktoré sú teraz štandardom. Ak by sa namiesto DIP používali obyčajné pixely, vaše aplikácie by nebola na takomto displeji pomaly ani vidieť. S DIP bude vyzerať stále rovnako, WPF teda urobí všetko za nás.

K nastaveniu DPI sa vo Windows dostanete pravým kliknutím na pracovnú plochu a výberom možnosti prispôsobiť. V okne zvolíte vľavo dole Zobrazenie. Bude vám ponúknuté zmeniť veľkosť písma a položiek na obrazovke.

Môžete si skúsiť nastaviť vyššiu DPI (po nastavení vyžaduje odhlásení) a potom spustiť vašej WPF aplikáciu, ktorá sa novému DPI prispôsobí. Windows Forms aplikácie by sa rozsypala alebo rozmazala, skúste si spustiť niektoré aplikácie, ktoré používate. Väčšina z nich nebude fungovať správne, pretože používa ešte staré technológie.

Pozíciovanie

Na koniec dnešnej lekcie si spomeňme ešte niečo málo o pozicovanie kontroliek. Upravte XAML kód tlačidlá tak, aby vyzeral nasledovne:

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

Tlačidlo sa roztiahne po celom gridu:

Toto je predvolené správanie kontroliek. Ak totiž neurčíme zarovnanie, predpokladajú sa v nich hodnoty Stretch:

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

Do atribútov HorizontalAlignment môžeme nastaviť nasledujúce hodnoty:

• Center - Zarovnanie na stred
• Left - Zarovnanie vľavo
• Right - Zarovnanie vpravo
• Stretch - Roztiahnutie

U VerticalAlignment sú hodnoty podobné, len miesto Left a Right nastavujeme Top a Bottom.

Vyskúšajte si jednotlivé hodnoty. Pre istotu ešte raz spomeniem, že kontrolky sa zarovnávajú do elementu, v ktorom sú vložené. Tomuto elementu sa hovorí rodičovský (anglicky parrent).

Výška a šírka elementov

Pre výšku a šírku elementov používame atribúty Width a Height. Okrem DIP tu môžeme nastaviť aj hodnotu Auto, ktorá je predvolená. Veľkosť sa potom určí podľa obsahu elementu, napr. Podľa dĺžky textu popisku tlačidla. Môžeme tiež nastaviť minimálne alebo maximálne rozmer pomocou atribútov MinWidth, MinHeight, MAXWIDTH a MaxHeight.

Nabudúce, Návrh formulára pre kalkulačku v VB.NET WPF , budeme navrhovať formulár pre jednoduchú kalkulačku. Dnešné príklad je ako vždy v prílohe k stiahnutiu.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.