Utiliser une Grid : un formulaire de contact

Dans les chapitres précédents nous avons vu pas mal d'informations théoriques, chacune avec des exemples théoriques. Dans ce chapitre nous allons combiner ce que l'on a vu sur le Grid, à un exemple qui peut être utiliser dans la vie, à savoir : Un simple formulaire de contact

L'avantage du formulaire de contact est qu'il ne s'agit que d'un exemple d’interaction couramment utilisé - vous pouvez utiliser les techniques et les appliquer à presque tous les types d'interaction que vous avez besoin de créer.

Le premier exemple vous montrera un formulaire de contact très simple. Il utilise trois rangées, deux d'entre elles avec des hauteurs automatiques et la dernière avec une hauteur non indiquée, donc il consomme le reste de l'espace disponible :

<Window x:Class="WpfTutorialSamples.Panels.GridContactForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactForm" Height="300" Width="300">
    <Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>		
		<TextBox>Name</TextBox>
		<TextBox Grid.Row="1">E-mail</TextBox>
		<TextBox Grid.Row="2" AcceptsReturn="True">Comment</TextBox>		
	</Grid>
</Window>

Comme vous pouvez le voir, la dernière TextBox remplie tout l'espace restant, alors que les deux premières ne remplissent que l'espace requis. Essayez de redimensionner la fenêtre et vous verrez la TextBox [Comment] s'adapter à la nouvelle taille de la fenêtre.

Dans cet exemple très simple, il n'y a pas de label indiquant à quoi servent chacun des champs. A la place, il y a un texte explicite à l'intérieur du textbox, mais ce n'est pas une apparence standard. Essayons d'améliorer un peu le look.

<Window x:Class="WpfTutorialSamples.Panels.GridContactFormTake2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactFormTake2" Height="300" Width="300">
	<Grid Margin="10">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Label>Name: </Label>
		<TextBox Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="1">E-mail: </Label>
		<TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="2">Comment: </Label>
		<TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" />
	</Grid>
</Window>

Peut-être que dans votre situation, l'agencement et le contexte de l'écran sont suffisamment explicite pour ne pas nécessiter d'indiquer l'utilité du champ "Commentaire". Dans ce cas là, oubliez le label et utilisez le ColumnSpan pour avoir une zone de saisie la plus grande possible.

<TextBox Grid.ColumnSpan="2" Grid.Row="2" AcceptsReturn="True" />

Comme vous pouvez le voir, la Grid est un élément très puissant. Il sera d'une grande aide et vous pourrez utiliser toutes ces spécificités quand vous aurez à dessiner votre propre fenêtre.