Guide pratique pour utiliser une grille pour la disposition automatique

  • Article

Cet exemple décrit comment utiliser une grille quand vous tirez parti de la disposition automatique pour créer une application localisable.

La localisation d’une interface utilisateur peut prendre du temps. Les localisateurs doivent souvent redimensionner et repositionner les éléments, en plus de traduire le texte. Dans le passé, chaque langue qu’une interface utilisateur a été adaptée pour l’ajustement requis. Maintenant, avec les fonctionnalités de Windows Presentation Foundation (WPF), vous pouvez concevoir des éléments qui réduisent le besoin d’ajustement. L’approche consistant à écrire des applications qui peuvent être plus facilement redimensionnées et repositionnées est appelée auto layout.

L’exemple XAML (Extensible Application Markup Language) suivant illustre l’utilisation d’une grille pour positionner certains boutons et du texte. Notez que la hauteur et la largeur des cellules sont définies sur Auto. Ainsi, la cellule qui contient le bouton avec une image s’ajuste à l’image. Étant donné que l’élément Grid peut s’ajuster à son contenu, il peut être utile de prendre l’approche de disposition automatique pour concevoir des applications qui peuvent être localisées.

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 montre la sortie générée par l’exemple de code.

Grid example
Grid

Voir aussi