Partager via

Ajuster la disposition et les polices, et prendre en charge RTL

Concevez votre application pour prendre en charge les dispositions et polices de plusieurs langues, y compris la direction du flux RTL (de droite à gauche). La direction du flux est la direction dans laquelle le script est écrit et affiché, et les éléments d’interface utilisateur de la page sont analysés par l’œil.

Recommandations en matière de disposition

Les langues telles que l’allemand et le finnois utilisent généralement plus de caractères que l’anglais. Les polices d’Asie orientale nécessitent généralement plus de hauteur. Et les langues telles que l’arabe et l’hébreu nécessitent que les panneaux de disposition et les éléments de texte soient disposés dans l’ordre de lecture de droite à gauche (RTL).

En raison de ces variations dans les métriques du texte traduit, nous vous recommandons de ne pas intégrer le positionnement absolu, les largeurs fixes ou les hauteurs fixes dans votre interface utilisateur. Au lieu de cela, tirez parti des mécanismes de disposition dynamique intégrés aux éléments de l’interface utilisateur Windows. Par exemple, les contrôles de contenu (tels que les boutons), les contrôles d’éléments (tels que les affichages de grille et les affichages de liste) et les panneaux de disposition (tels que les grilles et les stackpanels) redimensionnent et reflowent automatiquement par défaut pour ajuster leur contenu. Pseudo-localisez votre application pour découvrir les cas limites problématiques dans lesquels vos éléments d'interface utilisateur ne s'adaptent pas correctement au contenu.

La disposition dynamique est la technique recommandée et vous pourrez l’utiliser dans la majorité des cas. Moins souhaitable, mais toujours préférable à l'intégration rigide de tailles dans votre balisage d'interface utilisateur, est de définir des valeurs de disposition en fonction de la langue. Voici un exemple de la façon dont vous pouvez exposer une propriété Width dans votre application en tant que ressource que les localiseurs peuvent définir de manière appropriée par langue. Tout d’abord, dans le fichier de ressources de votre application (.resw), ajoutez un identificateur de propriété portant le nom « TitleText.Width » (au lieu de « TitleText », vous pouvez utiliser n’importe quel nom de votre choix). Ensuite, utilisez un x :Uid pour associer un ou plusieurs éléments d’interface utilisateur à cet identificateur de propriété.

<TextBlock x:Uid="TitleText">

Pour plus d’informations sur les Fichiers de Ressources (.resw), les identificateurs de propriétés et x :Uid, consultez Localiser les chaînes dans votre interface utilisateur et le manifeste de paquet d’application.

Polices

Utilisez la LanguageFont classe de mappage de polices pour l’accès par programmation à la famille de polices, la taille, le poids et le style recommandés pour une langue particulière. La classe LanguageFont permet d’accéder aux informations de police appropriées pour différentes catégories de contenu, notamment les en-têtes d’interface utilisateur, les notifications, le corps du texte et les polices de corps de document modifiables par l’utilisateur.

Mise en miroir d’images

Si votre application a des images qui doivent être mises en miroir (autrement dit, la même image peut être retournée) pour RTL, vous pouvez utiliser FlowDirection.

<!-- en-US\localized.xaml -->
<Image ... FlowDirection="LeftToRight" />

<!-- ar-SA\localized.xaml -->
<Image ... FlowDirection="RightToLeft" />

Si votre application nécessite une autre image pour retourner l’image correctement, vous pouvez utiliser le système de gestion des ressources avec le qualificateur LayoutDirection (voir la section LayoutDirection de Personnaliser vos ressources pour la langue, l’échelle et d’autres qualificateurs). Le système choisit une image nommée file.layoutdir-rtl.png lorsque le langage d’exécution de l’application (voir Comprendre les langues de profil utilisateur et les langues de manifeste d’application) est défini sur une langue RTL. Cette approche peut être nécessaire quand une partie de l’image est retournée, mais qu’une autre ne l'est pas.

Gestion des langues de droite à gauche (RTL)

Lorsque votre application est localisée pour les langues de droite à gauche (RTL), utilisez la propriété FrameworkElement.FlowDirection et définissez le remplissage et les marges symétriques. Panneaux de disposition tels que grille s'adaptent et se retournent automatiquement avec la valeur de FlowDirection que vous définissez.

Définissez FlowDirection sur le panneau de disposition racine (ou cadre) de votre page, ou sur la page elle-même. Cela entraîne toutes les commandes qu'il contient à hériter de cette propriété.

Important

Toutefois, FlowDirection n’est pas défini automatiquement en fonction de la langue d’affichage sélectionnée par l’utilisateur dans les paramètres Windows, et il ne change pas dynamiquement en réponse au changement de langue d’affichage de l’utilisateur. Si l’utilisateur bascule les paramètres Windows de l’anglais vers l’arabe, par exemple, la propriété FlowDirection n'pas passer automatiquement de gauche à droite à gauche. En tant que développeur d’applications, vous devez définir FlowDirection correctement pour la langue que vous affichez actuellement.

La technique programmatique consiste à utiliser la propriété LayoutDirection de la langue d’affichage utilisateur préférée pour définir la propriété FlowDirection (voir l’exemple de code ci-dessous). La plupart des contrôles inclus dans Windows utilisent FlowDirection déjà. Si vous implémentez un contrôle personnalisé, il doit utiliser FlowDirection pour apporter des modifications de disposition appropriées pour les langages RTL et LTR.

this.languageTag = Windows.Globalization.ApplicationLanguages.Languages[0];

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

var flowDirectionSetting = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues["LayoutDirection"];
if (flowDirectionSetting == "LTR")
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.LeftToRight;
}
else
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.RightToLeft;
}

#include <winrt/Windows.ApplicationModel.Resources.Core.h>
#include <winrt/Windows.Globalization.h>
...

m_languageTag = Windows::Globalization::ApplicationLanguages::Languages().GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView().QualifierValues().Lookup(L"LayoutDirection");
if (flowDirectionSetting == L"LTR")
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::LeftToRight);
}
else
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::RightToLeft);
}

this->languageTag = Windows::Globalization::ApplicationLanguages::Languages->GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView()->QualifierValues->Lookup("LayoutDirection");
if (flowDirectionSetting == "LTR")
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::LeftToRight;
}
else
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::RightToLeft;
}

La technique ci-dessus rend FlowDirection une fonction de la propriété LayoutDirection de la langue d’affichage utilisateur préférée. Si, pour une raison quelconque, vous ne souhaitez pas cette logique, vous pouvez exposer une propriété FlowDirection dans votre application en tant que ressource que les localiseurs peuvent définir de manière appropriée pour chaque langue dans laquelle ils se traduisent.

Tout d’abord, dans le fichier de ressources de votre application (.resw), ajoutez un identificateur de propriété portant le nom « MainPage.FlowDirection » (au lieu de « MainPage », vous pouvez utiliser n’importe quel nom de votre choix). Ensuite, utilisez une x :Uid pour associer votre élément principal Page (ou son panneau ou cadre de disposition racine) à cet identificateur de propriété.

<Page x:Uid="MainPage">

Au lieu d'une seule ligne de code pour toutes les langues, cela dépend de la capacité du traducteur à traduire correctement cette ressource de propriété pour chaque langue traduite ; sachez qu'il y a une opportunité supplémentaire d’erreur humaine lorsque vous utilisez cette technique.

API importantes