Comment : utiliser une grille pour la disposition automatique

  • Article

Mise à jour : novembre 2007

Cet exemple décrit comment utiliser une grille lorsque la disposition automatique est employée pour créer une application localisable.

La localisation d'une interface utilisateur (UI) peut prendre beaucoup de temps. En plus de traduire le texte, les localisateurs doivent souvent redimensionner et repositionner des éléments. Dans le passé, il fallait faire des ajustements pour chaque langue dans laquelle l'interface utilisateur était adaptée. Désormais, les fonctions de Windows Presentation Foundation (WPF) vous permettent de concevoir des éléments qui réduisent les ajustements nécessaires. L'approche consistant à écrire des applications qui sont plus faciles à redimensionner et à repositionner est appelée auto layout.

L'exemple XAML (Extensible Application Markup Language) suivant illustre l'utilisation d'une grille pour positionner des boutons et du texte. Remarquez que la valeur définie pour la hauteur et la largeur des cellules est Auto, c'est-à-dire que la cellule qui contient le bouton imagé s'adapte à cette image. Comme l'élément Grid peut s'adapter à son contenu, il peut s'avérer utile lorsque la disposition automatique est employée pour concevoir des applications localisables.

Exemple

L'exemple suivant montre comment utiliser une grille.

<Grid Name="grid" ShowGridLines ="false">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="0" FontSize="24">Grid
</TextBlock>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="1" FontSize="12"  
    Grid.ColumnSpan="2">The following buttons and text are positioned using a Grid.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="2" Background="Pink" 
    BorderBrush="Black" BorderThickness="10">Button 1
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="2" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the background 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="3" Foreground="Red">
   Button 2
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="3" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the foreground 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="4">
   <Image Source="data\flower.jpg"></Image>
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="4" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Adds an image as 
   the button's content.
</TextBlock>
</Grid>

Le graphique suivant illustre la sortie de l'exemple de code.

Grille

Exemple de grille

Remarque :

Pour obtenir le code complet dont a été extrait l'exemple précédent consultez Grille pour applications localisables, exemple.

Voir aussi

Tâches

Comment : utiliser la disposition automatique pour créer un bouton

Concepts

Vue d'ensemble de l'utilisation de la disposition automatique