Grid - rozsah

Predvolené správanie Gridu spočíva v tom, že každý ovládací prvok zaberá jednu bunku, ale niekedy chcete, aby určitá kontrolka zaberala viac riadkov, alebo stĺpcov. Našťastie Grid to robí veľmi jednoducho s pripojenými vlastnosťami ColumnSpan a RowSpan. Predvolená hodnota pre túto vlastnosť je samozrejme 1, ale môžete špecifikovať väčšie číslo, aby kontrolky zaberali viac riadkov, alebo stĺpcov.

Tu je veľmi jednoduchý príklad, kde používame vlastnosť 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>

Jednoducho definujeme dva stĺpce a dva riadky, pričom každý z nich zaberá rovnaký priestor. Prvé dve tlačidlá používajú stĺpce normálne, ale pri treťom tlačidle použijeme vlastnosť ColumnSpan, aby bolo roztiahnuté cez dva stĺpce v druhom riadku.

Je to tak jednoduché, že by sme mohli jednoducho použiť kombináciu panelov na dosiahnutie toho istého efektu, ale len pre o niečo pokročilejšie prípady je to naozaj užitočné. Skúsme niečo, čo lepšie ukazuje, aké silné to je:

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

S troma stĺpcami a troma riadkami by sme mali normálne deväť buniek, ale v tomto príklade používame kombináciu rozpätia riadkov a stĺpcov, čo vyplní všetok dostupný priestor len piatimi tlačidlami. Ako môžete vidieť, ovládací prvok môže sa môže rozpínať buď ďalšie stĺpce, ďalšie riadky, alebo v prípade tlačidla 4: na obe.

Takže ako môžete vidieť, preklenutie viacerých stĺpcov a/alebo riadkov v Gride je veľmi jednoduché. V ďalšom článku budeme používať spanning spolu so všetkými ostatnými technikami Gridu v praktickejšom príklade.