Ovládací prvek Grid

Grid je asi nejsložitější typ panelu. Grid může obsahovat několik řad a sloupců. Můžeme definovat výšku každého řádku a šířku každého sloupce zadáním absolutní pixelové hodnoty, procentem dostupného místa nebo zadáním slova auto, kdy sloupec nebo řada automaticky mění svoji velikost podle jejího obsahu. Používejte Grid, když vám ostatní panely nestačí, např. když potřebujete více sloupců nebo kombinovat více druhů panelů.

Ve své nejjednodušší podobě Grid roztáhne každý ovládací prvek, který do něj vložíme, na maximální možnou velikost, a naskládá je všechny přes sebe:

<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>

Jak můžete vidět, poslední ovládací prvek získá nejvyšší pozici, což v tomto případě znamená, že nemůžeme vidět první tlačítko. V tomto případě to úplně užitečné není, tak pojďme ten prostor zkusit rozdělit, což je to, co grid dělá nejlépe. Uděláme to použitím ColumnDefinitions a RowDefinitions. V prvním příkladu se podíváme na sloupce:

<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 příkladu jsme jednoduše rozdělili dostupný prostor do dvou sloupců, které si prostor rovnoměrně dělí, protože jsme použily "Hvězdičkovou šířku" (Tohle bude vysvětleno později). Na druhém tlačítku také používám takzvanou připojenou vlastnost, abych ho posunul do druhého sloupce (0 je první sloupec, 1 je druhý sloupec a tak dále). Tuto vlastnost jsem také mohl použít u prvního tlačítka, ale ono je automaticky umístěno do prvního sloupce a první řady, a přesně to tu teď chceme.

Jak můžete vidět, ovládací prvky zabírají všechno možné místo, což je jejich výchozí chování, když grid rozmisťuje všechny své prvky. Dělá to nastavením vlastností HorizontalAlignment a VerticalAlignment na jeho potomcích na hodnotu Stretch.

V některých situacích ale chceme, aby prvky zabíraly jen to místo, které opravdu potřebují a/nebo ovládat, jak jsou v Gridu umístěny. Nejjednodušší způsob, jak toho docílit je nastavení vlastností HorizontalAlignment a VerticalAlignment přímo na ovládacích prvcích, se kterými chceme manipulovat. Zde je modifikovaná verze předchozího pří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>

Jak můžete vidět na výsledném obrázku, první tlačítko je nyní nahoře a vycentrováno a druhé tlačítko je uprostřed a zarovnáno doprava.

Shrnutí

Grid je velmi univerzální panel s mnohem více možnostmi, než jsme viděli v tomto článku. Do zbytku možností se ponoříme v následujících několika článcích.