La Grid

La Grid est probablement le panel le plus complexe. Une Grid peut contenir plusieurs colonnes et plusieurs lignes. Vous définissez les hauteurs pour chaque ligne et les largeurs pour chaque colonne. Ces valeurs peuvent être spécifiées soit en nombre de pixels, soit en pourcentage de l'espace disponible, soit en automatique auquel cas la colonne ou la ligne se redimensionnera en fonction de son contenu. Utilisez la Grid lorsque les autres panels ne sont pas adaptés, par exemple lorsque vous avez besoin de plusieurs colonnes en combinaison avec d'autres panels.

Dans sa forme basique, la Grid prendra simplement chacun des contrôles enfants, les étirera pour occuper tout l'espace disponible, et les placera les uns sur les autres:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Comme vous pouvez le voir, le dernier contrôle est au dessus des autres, et vous ne pouvez même pas voir le premier bouton. C'est plutôt inutile dans la plupart des situations, donc divisons l'espace, ce qui est ce que la Grid fait le mieux. Nous le faisons en utilisant ColumnDefinition et RowDefinition. Dans le premier exemple, nous en resterons aux colonnes:

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

Dans cet exemple, nous avons simplement divisé l'espace disponible en deux colonnes de tailles identiques, en utilisant une "largeur *" ( Width="*", cela sera expliqué plus tard). Sur le second bouton, j'ai utilisé une propriété attachée pour le positionner dans la deuxième colonne (0 est la première colonne, 1 est la seconde, et ainsi de suite). J'aurais pu utiliser cette propriété sur le premier bouton aussi, mais il est par défaut assigné à la première ligne et la première colonne, ce qui est exactement ce que nous voulons ici.

Comme vous pouvez le voir, les contrôles occupent tout l'espace disponible, ce qui est le comportement par défaut de la Grid lors de l'arrangement du contenu. Cela est fait en initialisant les propriétés HorizontAlignement et VerticalAlignment des contrôles enfants à Stretch (étiré).

Dans certaines situations vous voudrez peut-être que les contrôles ne prennent que l'espace nécessaire, ou contrôler précisément leur positionnement dans la Grid. La façon la plus facile est de modifier les propriétés HorizontalAlignment et VerticalAlignment directement sur les contrôles de votre choix. Voici une modification de l'exemple précédent:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Comme vous pouvez le voir sur l'aperçu, le premier bouton est désormais placé en haut au centre. Le second bouton est placé au milieu, et aligné sur la droite.

Résumé

La Grid est un panel très versatile, avec beaucoup plus de possibilités que celles vues dans cet article. Nous entrerons plus en profondeur dans ces dernières dans les prochains articles.