Ajuster la disposition et les polices, et prendre en charge le sens du flux DàG

  • Article

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 faire cuire 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 de périphérie problématiques dans lesquels vos éléments d’interface utilisateur ne sont pas de taille pour le contenu correctement.

La disposition dynamique est la technique recommandée et vous pourrez l’utiliser dans la majorité des cas. Moins préférable, mais toujours mieux que les tailles de baking dans votre balisage d’interface utilisateur, consiste à définir des valeurs de disposition comme fonction du langage. 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 Resources Files (.resw), les identificateurs de propriétés et x:Uid, consultez Localiser les chaînes dans votre manifeste de package d’interface utilisateur et d’application.

Fonts

Utilisez la classe de mappage de police LanguageFont 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 texte du corps 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 LayoutDirection qualificateur (consultez la section LayoutDirection de Personnaliser vos ressources pour la langue, la mise à 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 du manifeste de l’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 partie n’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 l’échelle de la grille et retournent automatiquement avec la valeur de FlowDirection que vous définissez.

Définissez FlowDirection dans le panneau de disposition racine (ou frame) de votre page, ou sur la page elle-même. Cela entraîne l’héritage de toutes les commandes contenues dans 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 ; 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 ne passe pas automatiquement de gauche à droite à droite. En tant que développeur d’applications, vous devez définir FlowDirection de manière appropriée pour la langue que vous affichez actuellement.

La technique programmatique consiste à utiliser la LayoutDirection propriété du langage d’affichage utilisateur préféré pour définir la propriété FlowDirection (voir l’exemple de code ci-dessous). La plupart des contrôles inclus dans Windows utilisent déjà FlowDirection . Si vous implémentez un contrôle personnalisé, il doit utiliser FlowDirection pour apporter des modifications de disposition appropriées aux 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 LayoutDirection propriété 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 un x:Uid pour associer votre élément de page principal (ou son panneau de disposition racine ou son cadre) à cet identificateur de propriété.

<Page x:Uid="MainPage">

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

API importantes