La Grid - Extension (spanning)

Le comportement par défaut d'une Grid est que chaque contrôle occupe une case ou cellule. Mais parfois nous voudrions qu'un composant occupe plus d'une ligne ou plus d'une colonne. Heureusement, la Grid rend cela vraiment facile grâce aux propriétés attachées ColumnSpan et RowSpan. Par défaut cette valeur est évidemment de 1, mais vous pouvez préciser un nombre plus grand pour étendre votre contrôle sur plusieurs lignes ou colonnes.

Voici un exemple très simple où nous utilisons la propriété 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>

Nous définissons uniquement deux colonnes et deux lignes, chacune partageant l'espace avec l'autre. Les deux premiers boutons utilisent les colonnes normalement, mais le troisième bouton s'étend sur deux colonnes et occupe toute la seconde ligne grâce à l'utilisation de la propriété ColumnSpan.

Cette disposition est tellement simple que nous aurions pu utiliser une combinaison de plusieurs panels pour réaliser le même effet. Mais pour des cas plus avancés, le Grid est vraiment utile. Essayons un autre exemple qui nous montre à quel point cela peut être puissant:

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

Avec trois colonnes et trois lignes nous devrions normalement avoir neuf cellules, mais dans cet exemple nous utilisons une combinaison d'extensions sur lignes et colonnes pour remplir l'espace avec seulement cinq boutons. Comme vous pouvez le constater, un contrôle peut aussi bien s'étendre sur plusieurs colonnes, sur plusieurs lignes ou même les deux à la fois comme dans le cas du bouton 4.

Comme vous l'avez vu, étirer un contrôle sur plusieurs lignes et/ou colonnes dans une Grid est très simple. Dans un article ultérieur, nous utiliserons cette technique en combinaison avec d'autres techniques de Grid pour une application plus pratique.