Ovládací prvok Grid

Grid (mriežka) je pravdepodobne najkomplexnejšia z typov panelov. Grid môže obsahovať viacero riadkov a stĺpcov. Môžete definovať výšku pre každý riadok a šírku pre každý zo stĺpcov v absolútnom množstve pixelov, v percentách dostupného miesta, alebo ako auto, kde riadok, alebo stĺpec automaticky upraví svoju veľkosť v závislosti od obsahu. Používajte Grid všade tam, kde potrebujete viac stĺpcov, alebo riadkov a tiež v kombinácii s ostatnými panelmi.

V najzákladnejšej podobe bude Grid jednoducho obsahovať všetky ovládacie prvky, ktoré do neho vložíte, roztiahnete ich tak, aby ste využili maximálny voľný priestor a umiestnili ich nad sebou:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Ako môžete vidieť, posledný prvok bude na hornej pozícii, čo v tomto prípade znamená, že prvé tlačidlo nemôžete vôbec vidieť. Nie je to veľmi užitočné pre väčšinu situácií a tak skúste rozdeliť priestor, čo je to, čo Grid robí tak dobre. Robíme to pomocou ColumnDefinitions a RowDefinitions. V prvom príklade vytvoríme stĺpce:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

V tomto príklade sme jednoducho rozdelili dostupný priestor na dva stĺpce, ktoré rovnako zdieľajú priestor pomocou značky "*" (to bude vysvetlené neskôr). Na druhom tlačidle používam tzv. pripojenú vlastnosť na umiestnenie do druhého stĺpca (0 je prvý stĺpec, 1 je druhý a tak ďalej). Mohol som túto vlastnosť použiť aj na prvom tlačidle, ale automaticky sa priradí k prvému stĺpcu a prvému riadku, čo je presne to, čo tu chceme.

Ako môžete vidieť, ovládacie prvky zaberajú všetok dostupný priestor, čo je predvolené správanie, keď Grid usporiada svoje podriadené ovládacie prvky. Robí sa to tak, že nastavíte HorizontalAlignment a VerticalAlignment na jeho podriadené ovládacie prvky na Stretch.

V niektorých situáciách by ste mohli chcieť, aby zaberali len priestor, ktorý potrebujú, a/alebo radili sa ako sú vkladané na Grid. Najjednoduchší spôsob, ako to urobiť, je nastaviť HorizontalAlignment a VerticalAlignment priamo na ovládacie prvky. Tu je upravená verzia vyššie uvedeného príkladu:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Ako môžete vidieť z výslednej snímky obrazovky, prvé tlačidlo je teraz zarovnané hore a na stred. Druhé tlačidlo na stred a doprava.

Summary

The Grid is a very versatile panel, with many more possibilities than we saw in this article. We'll dig into the rest of them in the next several articles.