La Grid - Lo span

Il comportamento Grid predefinito è che ogni controllo occupa una cella, ma a volte si desidera che un determinato controllo occupi più righe o colonne. Fortunatamente la griglia lo rende molto facile, con le proprietà associate ColumnSpan e RowSpan. Il valore predefinito per questa proprietà è ovviamente 1, ma è possibile specificare un numero più grande per fare in modo che il controllo si estenda su più righe o colonne.

Qui c'è un esempio molto semplice, dove usiamo la proprietà 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>

Definiamo solo due colonne e due righe, tutte che prendono la loro uguale quota del posto. I primi due pulsanti usano normalmente le colonne, ma con il terzo pulsante, facciamo in modo che occupi due colonne di spazio sulla seconda riga, usando l'attributo ColumnSpan.

È tutto così semplice che avremmo potuto usare solo una combinazione di pannelli per ottenere lo stesso effetto, ma per casi leggermente più avanzati, questo è davvero utile. Proviamo qualcosa che mostra meglio quanto è potente:

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

Con tre colonne e tre righe avremmo normalmente nove celle, ma in questo esempio usiamo una combinazione di righe e colonne che si estende per riempire tutto lo spazio disponibile con solo cinque pulsanti. Come puoi vedere, un controllo può estendersi su colonne aggiuntive, righe aggiuntive o nel caso del pulsante 4: entrambi.

Quindi, come puoi vedere, lo spanning di più colonne e/o righe in una griglia è molto semplice. In un articolo successivo, utilizzeremo lo spanning, insieme a tutte le altre tecniche di Grid, in un esempio più pratico.