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

Article
08/22/2008

Mise à jour : novembre 2007

Cette rubrique présente des instructions pour les développeurs sur la manière d'écrire des applications Windows Presentation Foundation (WPF) avec des interfaces utilisateur (UI) localisables. Dans le passé, la localisation d'une interface utilisateur pouvait prendre beaucoup de temps. Chaque langue dans laquelle était adaptée l'interface utilisateur 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 interfaces utilisateur 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 d'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.

interface utilisateur 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 interface utilisateur 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

Remarque :
Pour obtenir le code complet dont ont été extraits les exemples précédents, consultez Disposition automatique pour applications localisables, exemple.

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 interface utilisateur entièrement localisable. Les indications suivantes vont simplifier le codage de votre disposition automatique.

Normes de codage	Description
N'utilisez pas de positions absolues.	N'utilisez pas de zone de dessin car elle positionner les éléments de façon absolue. Utilisez DockPanel, StackPanel et Grid pour positionner les contrôles. Pour obtenir des explications sur les divers types de panneaux, consultez Vue d'ensemble de Panel.
Ne définissez pas de fenêtre à taille fixe.	Utilisez SizeToContent. Par exemple : `<StackPanel xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="GridLoc.Pane1" >`
Ajoutez une classe 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 le latin, les langues 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 la propriété XmlLang dans l'élément racine de votre interface utilisateur, par exemple xml:lang="fr-FR" pour une application en français. Du fait 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 capable de distribuer l'espace disponible parmi ses éléments enfants disposés en colonnes et lignes, et de placer les éléments interface utilisateur dans chaque cellule. Les éléments interface utilisateur 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 interface utilisateur 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

Remarque :
Pour obtenir l'exemple de code complet, consultez Grille pour applications localisables, exemple.

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

Les Grilles sont utiles dans les applications localisables pour créer des contrôles qui s'ajustent dont le contenu s'adapte. 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é attachée IsSharedSizeScope de l'élément Grid s'avère utile pour partager le même dimensionnement parmi 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.