Partager via

Guide pratique pour utiliser une grille pour la disposition automatique

Cet exemple décrit comment utiliser une grille dans l’approche de disposition automatique pour créer une application localisable.

La localisation d’une interface utilisateur peut prendre du temps. Souvent, les localiseurs doivent redimensionner et repositionner des éléments en plus de traduire du texte. Dans le passé, chaque langue pour laquelle une interface utilisateur était adaptée nécessitait des ajustements. 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 de l’écriture d’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; par conséquent, la cellule qui contient le bouton avec une image s’ajuste pour s’adapter à 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 de l’exemple de code.

exemple Exemple de grille
Grille

Voir aussi