Partager via

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

  • Article

Cette rubrique présente des instructions pour les développeurs sur la manière d'écrire des applications Windows Presentation Foundation (WPF) avec des user interfaces (UIs) localisables. Dans le passé, la localisation d'une UI pouvait prendre beaucoup de temps. Chaque langue dans laquelle était adaptée l'UI nécessitait un réglage pixel par pixel. Aujourd'hui, grâce à une conception et des normes de code adaptées, il est possible de construire les UIs afin que les traducteurs aient moins de redimensionnement et de repositionnement à effectuer. L'approche consistant à écrire des applications qui sont plus faciles à redimensionner et à repositionner est appelée disposition automatique et peut être obtenue en utilisant la conception de l'application WPF.

Cette rubrique contient les sections suivantes.

  • Avantages de l'utilisation de la disposition automatique

  • Disposition automatique et contrôles

  • Disposition automatique et normes de codage

  • Disposition automatique et grilles

  • Disposition automatique et grilles en utilisant la propriété IsSharedSizeScope

  • Rubriques connexes

Avantages de l'utilisation de la disposition automatique

Du fait de la puissance et de la flexibilité du système de présentation WPF, il offre la possibilité de disposer des éléments dans une application qui peuvent être ajustés pour répondre aux exigences de différentes langues. La liste suivante souligne quelques-uns des avantages de la disposition automatique.

  • UI s'affiche correctement dans n'importe quelle langue.

  • Réduit le besoin de réajuster la position et la taille des contrôles une fois le texte traduit.

  • Réduit le besoin de réajuster la taille de la fenêtre.

  • La disposition de UI est restituée correctement dans n'importe quelle langue.

  • La localisation peut se trouver réduite à sa plus simple expression, à savoir la traduction d'une chaîne.

Disposition automatique et contrôles

La disposition automatique permet à une application d'ajuster automatiquement la taille d'un contrôle. Par exemple, un contrôle peut changer pour accommoder la longueur d'une chaîne. Cette possibilité permet aux traducteurs de traduire la chaîne, sans devoir redimensionner le contrôle pour que le texte traduit s'ajuste. L'exemple suivant crée un bouton avec un contenu en anglais.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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, votre seule tâche consiste à changer le texte pour que le bouton soit en français. Par exemple :

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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 illustre la sortie des exemples de code.

Bouton redimensionnable automatiquement

Même bouton avec le texte dans différentes langues

Disposition automatique et normes de codage

L'utilisation de l'approche basée sur la disposition automatique nécessite un jeu de normes de conception de code standard et de règles pour créer une UI entièrement localisable. Les indications suivantes vont simplifier le codage de votre disposition automatique.

Normes de codage

Description

N'utilisez pas de positions absolues.

Ne définissez pas de fenêtre à taille fixe.

 

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

Ajoutez un FlowDirection

  • Ajoutez une 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 sens du déroulement sont les suivants :

    • LeftToRight (LrTb) : disposition horizontale pour les langues latines, d'Asie orientale, etc.

    • RightToLeft (RlTb) : disposition bidirectionnelle pour l'arabe, l'hébreu, etc.

Utilisez des polices composites au lieu des polices physiques.

  • Avec les polices composites, il n'est pas nécessaire de traduire la propriété FontFamily.

  • Les développeurs peuvent utiliser l'une des polices suivantes ou créer la leur.

    • Interface utilisateur globale

    • San Serif globale

    • Serif globale

Ajoutez xml:lang.

  • Ajoutez l'attribut xml:lang dans l'élément racine de votre UI, par exemple xml:lang="en-US" pour une application en anglais

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

Disposition automatique et grilles

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

<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.

Grille

Exemple de grille

Disposition automatique et grilles en utilisant la propriété IsSharedSizeScope

Un élément Grid est utile dans les applications localisables pour créer des contrôles qui s'ajustent en fonction de leur contenu. Cependant, il arrive que vous souhaitiez que les contrôles conservent une taille particulière quel que soit le contenu. Par exemple, pour les boutons « OK », « Annuler » et « Parcourir », vous n'avez probablement pas besoin que les boutons d'adaptent à la taille du contenu. Dans ce cas, la propriété jointe Grid.IsSharedSizeScope s'avère utile pour partager le même dimensionnement entre plusieurs éléments de grille. L'exemple suivant montre comment partager les données de dimensionnement des colonnes et des 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 le code complet, consultez Comment : partager des propriétés de dimensionnement entre grilles.

Voir aussi

Tâches

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

Comment : utiliser une grille pour la disposition automatique

Concepts

Globalisation pour WPF