La Grid - Lignes et Colonnes

Dans le dernier chapitre, nous vous avons présenté le fameux panel Grid, et nous vous avons montré quelques exemples d'utilisation basique. Dans ce chapitre, nous allons mettre en place quelques dispositions plus avancées, et la Grid révélera toute sa puissance. Tout d'abord, créons quelques colonnes et quelques lignes afin d'obtenir une véritable disposition en tableau:

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

Nous avons un total de neuf boutons, chacun placé dans une cellule d'une grille à trois lignes et trois colonnes. Nous avons de nouveau utilisé des dimensions "*", mais nous avons également précisé des nombres: la première ligne et la première colonne ont des dimensions de 2*, ce qui signifie qu'elles seront deux fois plus hautes ou plus larges que celles dont la dimension est 1* (ou juste *, ce qui revient au même). L'ensemble prenant quoiqu'il en soit tout l'espace disponible.

Vous remarquerez également que j'ai utilisé les propriétés attachées Grid.Row et Grid.Column pour positionner mes contrôles dans la Grid. Et une fois encore vous remarquerez que j'ai omis ces propriétés lorsqu'il s'agissait de la première colonne, de la première ligne ou des deux à la fois. C'est équivalent à spécifier une valeur de 0. Cela permet d'économiser un peu de code, mais peut-être préférerez vous les spécifier systématiquement pour une meilleure lisibilité - faites comme bon vous semble!