3. diel - Pozíciovanie v C # .NET WPF

V minulej lekcii, Jazyk XAML v C # .NET WPF , sme si uviedli základné syntax jazyka XAML. V dnešnom C# .NET tutoriálu 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 vo chvíli, čo sme TextBlock na formulár pridali z ToolBox.

<TextBlock x:Name="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 Grid uv 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 ovládací prvok vložili na súradnice [120; 77]. Aby ho tam zobrazil, umiestni ho vľavo hore (preto atribúty HorizontalAlignment="Left" a VerticalAlignment="Top") a nastaví mu vonkajšie okraje na 120 zľava a 77 zhora atribútom Margin. Tak to vyzerá, že je ovládací prvok na pozícii [120; 77], ale v skutočnosti je okolo neho 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ý ovládací prvok 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ú prvky vo formulári aj samotné okno. Upravme XAML kód elementu <TextBlock> tak, aby sa centroval do elementu, v ktorom je vložený. V našom prípade bude v stredu elementu <Grid>:

<TextBlock x:Name="textBlock" HorizontalAlignment="Center" TextWrapping="Wrap" 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 pomocou Margin. 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 D EVIC Aj ndependent P ixels. Pri DPI 96, čo je východisková hodnota po inštalácii Windows, má 1 DIP veľkosť 1 fyzického pixelu na displeji. Užívatelia veľkých monitorov (napríklad ja) majú nastavené vyššie DPI (D ots P er I nch, 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ť aj 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 prispôsobí 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 ovládacích prvkov. 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 prvkov. 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 cez celú šírku

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 ovládacie prvky sa zarovnávajú do elementu, v ktorom sú vložené. Tomuto elementu sa hovorí rodičovský (anglicky parent).

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.

V budúcej lekcii, Návrh formulára pre kalkulačku v C # .NET WPF , budeme navrhovať formulár pre jednoduchú kalkulačku. Dnešné príklad je ako vždy v prílohe k stiahnutiu.