WPF 4 – Grid

1
816

V tomto diely sa pozrieme na základný ovládací prvok, ktorý je nevyhnutný pre pridávanie ďalších prvkov do vašej aplikácie. Jedná sa o Grid.

Úvod

Grid je ovládací prvok, ktorý vám dovoľuje vkladať viac ako jeden iný prvok do hlavného okna. Tiež vám umožňuje (čo je nadmieru užitočné) pridané prvky zarovnávať do mriežky – je totiž možné nastaviť, aby boli vždy napríklad 5 px od ľavého okraja atď.

Absolútne zarovnávanie

Pokiaľ chcete prvok, ktorý sa nachádza vo vašom gride zarovnávať absolútne (čiže vždy o rovnaký počet pixelov), stačí ho do gridu vložiť. Následne máte niekoľko možností ako zarovnávanie nastaviť.

A) Designer

Zarovnávanie môžete nastaviť v designeri. Po vložení prvku do gridu a jeho vybraní sa vám zobrazia čiary označujúce zarovnanie.

DesignerFull

Tieto čiary vám pomôžu lepšie zarovnať prvok aby pasoval k ostatným, ktoré v gride máte. Všimnite si aj malé „reťaze“ na koncoch čiar, ktoré označujú prepojenie z okrajom. Reťaz môže mať dva stavy – uzamknutýDesignerChain alebo odomknutýDesignerOpen. Pokiaľ je znak uzamknutý, znamená to, že váš prvok je napevno pripojený k tomu okraju a bude si od neho vždy udržovať rovnakú vzdialenosť. Toto uzamknutie je možné nastaviť aj dvom protiľahlým stranám a v tom prípade sa prvok bude automaticky rozťahovať.

B) XAML

Nastavenie zarovnania môžete ovplyvniť aj priamo cez kód designera. Na výber zarovnania ku strane sa používajú vlastnosti VerticalAlignmentHorizontalAlignment. VerticalAlignment môže mať hodnoty TopBottomCenterStretch, pričom prvé zarovnáva k vrchu, druhé ku spodnej časti gridu, tretie umiestni prvok do stredu a posledné ho roztiahne medzi oboma okrajmi. HorizontalAlignment má rovnaké vlastnosti, len namiesto Top a Bottom je to LeftRight. Vzdialenosť od konkrétnych strán potom nastavujete vo vlastnosti Margin, ktorá ma tvar Margin=“Left,Top,Right,Bottom“.

Príkľad :

<Button x:Name="button" Content="Button" Margin="100,50,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="60" Height="20"/>

Tento button je umiestnený 100 pixelov zľava a 50 pixelov zhora.

Relatívne zarovnanie podľa mriežky.

Pokiaľ chcete zarovnávať prvky podľa mriežky, ktorá bude mať percentuálnu veľkosť, je to možné. Najprv však musíte definovať riadky a/alebo stĺpce.

Tie môžete pridať do gridu opäť dvoma spôsobmi – cez designer alebo cez xaml.

A) Designer

Aby ste pridali riadok, alebo stĺpec do gridu cez designer, stačí nájsť k hornému alebo ľavému okraju gridu a váš kurzor sa zmení na šípku s veľkým bielym plus. Následne už len stačí kliknúť a váš stĺpec/riadok sa pridá. Je zobrazovaný ako modrá čiara, ktorú môžete presunúť pomocou malej šípky hore alebo vľavo.

B) XAML

V XAML kóde pridávate riadky alebo stĺpce ako obsah gridu. Preto v ňom musíte vytvoriť nové objekty – Grid.RowDefinitions pre riadky alebo Grid.ColumnDefinitions pre stĺpce. Do nich môžete pridať nové stĺpce pomocou objektov RowDefinition alebo ColumntDefinition. Pre riadok nastavíte veľkosť vlastnosťou Height a pre stĺpec vlastnosťou Width. Pre relatívne veľkosti za veľkosť dajte znak hviezdička. Celková veľkosť sa potom rovnomerne rozráta (Môžete pridať tri riadky z veľkosťou 1* a rozdelia sa na tri rovnaké časti po celom gride, pretože veľkosti je 1:1:1).

<Grid.RowDefinitions>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*"/>
    <ColumnDefinition Width="1*"/>
    <ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>

Po pridaní riadkov môžete váš prvok umiestniť v designeri do vami vybranej bunky, alebo mu ju nastaviť v xaml pomocou vlastností Grid.ColumnGrid.Row. Nezabudnite, že sa vždy začína nulou.

<Button x:Name="button" Content="Button" Margin="10,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="60" Height="20" Grid.Row="1" Grid.Column="1"/>

Tento button by bol umiestnení v druhom stĺpci a druhom riadku, 10 px od ľavého okraja a 10 px od horného okraja.

A týmto sme si prebrali prvok Grid, ktorý je nevyhnutný pre reálne využitie WPF a tak sa nabudúce pozrieme na funkčnosť základného prvku – Buttonu.

1 Komentár

Názory k článku

Please enter your comment!
Please enter your name here