Partager via

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

Cette rubrique présente des instructions pour les développeurs sur la façon d’écrire des applications Windows Presentation Foundation (WPF) avec des interfaces utilisateur localisables. Dans le passé, la localisation d’une interface utilisateur était un processus fastidieux. Pour chaque langue pour laquelle l’interface utilisateur a été adaptée, un ajustement pixel par pixel était nécessaire. Aujourd’hui, avec la conception appropriée et les normes de codage appropriées, les interfaces utilisateur peuvent être construites afin que les localiseurs aient moins de redimensionnement et de repositionnement à faire. L’approche de l’écriture d’applications qui peuvent être plus facilement redimensionnées et repositionnées est appelée disposition automatique et peut être obtenue à l’aide de la conception d’applications WPF.

Avantages de l’utilisation de la disposition automatique

Étant donné que le système de présentation WPF est puissant et flexible, il permet de mettre en page des éléments dans une application qui peuvent être ajustés pour répondre aux exigences des différentes langues. La liste suivante indique certains des avantages de la disposition automatique.

  • L’interface utilisateur s’affiche correctement dans n’importe quelle langue.

  • Réduit la nécessité de réajuster la position et la taille des contrôles après la traduction du texte.

  • Réduit la nécessité de réajuster la taille de la fenêtre.

  • La disposition de l’interface utilisateur s’affiche correctement dans n’importe quelle langue.

  • La localisation peut être réduite au point qu’il ne s’agit que de la traduction de chaînes.

Disposition et contrôles automatiques

La disposition automatique permet à une application d’ajuster automatiquement la taille d’un contrôle. Par exemple, un contrôle peut changer pour s'adapter à la longueur d’une chaîne. Cette fonctionnalité permet aux localiseurs de traduire la chaîne ; ils n’ont plus besoin de redimensionner le contrôle pour qu’il corresponde au texte traduit. L’exemple suivant crée un bouton avec du contenu anglais.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

<DockPanel> 
    <Button FontSize="28" Height="50">My name is Hope.</Button>
</DockPanel>
</Window>

Dans l’exemple, tout ce que vous devez faire pour faire un bouton espagnol est de modifier le texte. Par exemple,

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

 <DockPanel> 
    <Button FontSize="28" Height="50">Me llamo Esperanza.</Button>
  </DockPanel>
</Window>

Le graphique suivant montre la sortie des exemples de code :

Le même bouton avec du texte dans différentes langues

Normes de disposition et de codage automatiques

L’utilisation de l’approche de disposition automatique nécessite un ensemble de normes et de règles de codage et de conception pour produire une interface utilisateur entièrement localisable. Les instructions suivantes vous aideront à coder automatiquement la mise en page.

n’utilisez pas de positions absolues

Pour une discussion sur différents types de panneaux, consultez Vue d’ensemble des panneaux.

Ne pas définir de taille fixe pour une fenêtre

  • Utilisez Window.SizeToContent. Par exemple:

    
<StackPanel
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="GridLoc.Pane1"
>

Ajouter un FlowDirection

  • Ajoutez un FlowDirection à l’élément racine de votre application.

    WPF offre un moyen pratique de prendre en charge les dispositions horizontales, bidirectionnelles et verticales. Dans l’infrastructure de présentation, la propriété FlowDirection peut être utilisée pour définir la disposition. Les modèles de direction de flux sont les suivants :

Utiliser des polices composites au lieu de polices physiques

  • Avec les polices composites, la propriété FontFamily n’a pas besoin d’être localisée.

  • Les développeurs peuvent utiliser l’une des polices suivantes ou créer leur propre police.

    • Interface utilisateur globale
    • Global San Serif
    • Global Serif

Ajouter xml:lang

  • Ajoutez l’attribut xml:lang dans l’élément racine de votre interface utilisateur, tel que xml:lang="en-US" pour une application anglaise.

  • Étant donné que les polices composites utilisent xml:lang pour déterminer la police à utiliser, définissez cette propriété pour prendre en charge les scénarios multilingues.

Disposition automatique et grilles

L’élément Grid est utile pour la disposition automatique, car il permet à un développeur de positionner des éléments. Un contrôle Grid peut répartir l’espace disponible entre ses éléments enfants à l’aide d’une disposition de ligne et de colonne. Les éléments de l’interface utilisateur peuvent s’étendre sur plusieurs cellules et il est possible d’avoir des grilles dans les grilles. Les grilles sont utiles, car elles vous permettent de créer et de positionner une interface utilisateur complexe. L’exemple 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.

<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 grille produite par le code précédent.

Exemple de grille Grille

Mise en page et grilles automatiques à l'aide de la propriété IsSharedSizeScope

Un élément Grid est utile dans les applications localisables pour créer des contrôles qui s’ajustent au contenu. Toutefois, parfois, vous souhaitez que les contrôles conservent une taille particulière, quel que soit le contenu. Par exemple, si vous avez « OK », « Annuler » et « Parcourir », vous ne souhaitez probablement pas que les boutons soient dimensionnés pour s’adapter au contenu. Dans ce cas, la propriété jointe Grid.IsSharedSizeScope est utile pour partager le même dimensionnement entre plusieurs éléments de grille. L’exemple suivant montre comment partager des données de dimensionnement de colonnes et de lignes entre plusieurs éléments Grid.

   <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">  
       <Button Click="setTrue" Margin="0,0,10,10">Set IsSharedSizeScope="True"</Button>
       <Button Click="setFalse" Margin="0,0,10,10">Set IsSharedSizeScope="False"</Button>
   </StackPanel> 

   <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

   <Grid ShowGridLines="True" Margin="0,0,10,0">
     <Grid.ColumnDefinitions>
       <ColumnDefinition SharedSizeGroup="FirstColumn"/>
       <ColumnDefinition SharedSizeGroup="SecondColumn"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
       <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
     </Grid.RowDefinitions>

       <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
       <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>

       <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
       <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
   </Grid>

   <Grid ShowGridLines="True">
     <Grid.ColumnDefinitions>
       <ColumnDefinition SharedSizeGroup="FirstColumn"/>
       <ColumnDefinition SharedSizeGroup="SecondColumn"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>        
       <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
     </Grid.RowDefinitions>

       <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0"/>
       <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"/>

       <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
       <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
   </Grid>
   
   </StackPanel>

   <TextBlock Margin="10" DockPanel.Dock="Top" Name="txt1"/>

Remarque

Pour obtenir l’exemple de code complet, consultez Partager les propriétés de taille entre les grilles.

Voir aussi

  • Last updated on