Grid - Spanning (rozpínání)

Výchozí chování Gridu je takové, že každý ovládací prvek zabírá přesně jednu buňku, ale někdy chceme, aby některý prvek zabral dva nebo více řádků (či sloupců). Naštěstí to Grid velice ulehčuje, za pomoci připojených vlastností ColumnSpan a RowSpan. Výchozí hodnota pro tuto vlastnost je očividně jednička, ale to lze specifikovat na větší číslo, aby prvek zaujímal více řádků (či sloupců).

Zde je velice jednoduchý příklad, kde můžeme použít vlastnost ColumnSpan:

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

Definujeme pouze dva sloupce a dva řádky, každý zaujímající stejný podíl jejich místa. První dvě tlačítka používají klasicky jeden sloupec, ale třetí tlačítko uděláme tak, aby zabralo dva sloupce na druhém řádku, pomocí ColumnSpan atributu.

Tohle všechno je tak jednoduché, že můžeme prostě použít kombinaci panelů, abychom docílili stejného účinku, ale pro trochu pokročilejší případy, je to opravdu užitečné. Zkusme něco, co lépe ukáže, jakou sílu to skrývá:

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpanAdvanced"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpanAdvanced" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button Grid.ColumnSpan="2">Button 1</Button>
		<Button Grid.Column="3">Button 2</Button>
		<Button Grid.Row="1">Button 3</Button>
		<Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">Button 4</Button>
		<Button Grid.Column="0" Grid.Row="2">Button 5</Button>
	</Grid>
</Window>

Se třemi sloupci a třemi řádky bychom za normálních okolností měli devět buněk, ale v tomto případě, používáme kombinaci řádkového a sloupcového rozpětí na zaplnění dostupných míst s jenom pěti tlačítky. Jak si můžete všimnout, ovládací prvek se může rozprostírat na více sloupcích, více řádcích nebo v případě tlačítka 4: oboje.

Jak lze z tohoto článku poznat, zabírání několika řádků anebo sloupců je v Gridu více než jednoduché. V budoucích článcích budeme používat spanning, zároveň se všemi ostatními Grid technikami ve více praktickém použití.