Anpassen von Layout und Schriftarten und Unterstützen von „Von rechts nach links“

  • Artikel

Entwerfen Sie Ihre App so, dass die Layouts und Schriftarten mehrerer Sprachen unterstützt werden, einschließlich der Rechts-nach-links-Flussrichtung.Design your app to support the layouts and fonts of multiple languages, including RTL (right-to-left) flow direction. Die Flussrichtung ist die Richtung, in der Skript geschrieben und angezeigt wird, und die UI-Elemente auf der Seite werden vom Auge gescannt.

Layoutrichtlinien

Sprachen wie Deutsch und Finnisch verwenden in der Regel mehr Zeichen als Englisch. Ostasiatische Schriftarten erfordern in der Regel mehr Höhe. Und Sprachen wie Arabisch und Hebräisch erfordern, dass Layoutbereiche und Textelemente in Leserichtung von rechts nach links (RTL) angeordnet werden.

Aufgrund dieser Abweichungen in den Metriken des übersetzten Texts wird empfohlen, keine absolute Positionierung, feste Breite oder feste Höhen in die Benutzeroberfläche (UI) zu backen. Nutzen Sie stattdessen die dynamischen Layoutmechanismen, die in die Windows-UI-Elemente integriert sind. Inhaltssteuerelemente (z. B. Schaltflächen), Elementsteuerelemente (z. B. Rasteransichten und Listenansichten) und Layoutpanels (z. B. Raster und Stackpanels) ändern die Größe und den Umbruch standardmäßig so, dass sie ihren Inhalt anpassen. Pseudolokalisieren Sie Ihre App, um problematische Randfälle aufzudecken, in denen ihre UI-Elemente nicht ordnungsgemäß auf Inhalte passen.

Das dynamische Layout ist die empfohlene Technik, und Sie können es in den meisten Fällen verwenden. Weniger bevorzugt, aber immer noch besser als das Backen von Größen in Ihrem UI-Markup ist das Festlegen von Layoutwerten als Funktion der Sprache. Hier ist ein Beispiel dafür, wie Sie eine Width-Eigenschaft in Ihrer App als Ressource verfügbar machen können, die Lokalisierer entsprechend pro Sprache festlegen können. Fügen Sie zunächst in der Ressourcendatei (RESW) Ihrer App einen Eigenschaftsbezeichner mit dem Namen "TitleText.Width" hinzu (anstelle von "TitleText", können Sie einen beliebigen Namen verwenden). Verwenden Sie dann eine x:Uid , um ein oder mehrere UI-Elemente diesem Eigenschaftsbezeichner zuzuordnen.

<TextBlock x:Uid="TitleText">

Weitere Informationen zu Ressourcendateien (RESW), Eigenschaftsbezeichnern und x:Uid finden Sie unter Lokalisieren von Zeichenfolgen in der Benutzeroberfläche und im App-Paketmanifest.

Schriftarten

Verwenden Sie die LanguageFont-Schriftartenzuordnungsklasse für den programmgesteuerten Zugriff auf die empfohlene Schriftfamilie, Größe, Stärke und Formatvorlage für eine bestimmte Sprache. Die LanguageFont-Klasse bietet Zugriff auf die richtigen Schriftartinformationen für verschiedene Inhaltskategorien, einschließlich UI-Kopfzeilen, Benachrichtigungen, Textkörper und bearbeitbare Schriftarten für Dokumenttexte.

Spiegeln von Bildern

Wenn Ihre App Bilder enthält, die gespiegelt werden müssen (d. h. dasselbe Bild kann gespiegelt werden) für RTL, können Sie FlowDirection verwenden.

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

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

Wenn Ihre App ein anderes Bild benötigt, um das Bild richtig zu kippen, können Sie das Ressourcenverwaltungssystem mit dem LayoutDirection Qualifizierer verwenden (siehe Abschnitt "LayoutDirection" der Ressourcen für Sprache, Skalierung und andere Qualifizierer). Das System wählt ein Bild aus, das benannt file.layoutdir-rtl.png wird, wenn die App-Laufzeitsprache (siehe Grundlegendes zu Benutzerprofilsprachen und App-Manifestsprachen) auf eine RTL-Sprache festgelegt ist. Dieser Ansatz kann erforderlich sein, wenn ein Teil des Bilds gekippt wird, aber kein anderer Teil ist.

Behandeln von Sprachen von rechts nach links (RTL)

Wenn Ihre App für Sprachen von rechts nach links (RTL) lokalisiert ist, verwenden Sie die Eigenschaft "FrameworkElement.FlowDirection ", und legen Sie symmetrische Abstände und Ränder fest. Layoutpanels wie Rasterskala und automatisches Kippen mit dem Von Ihnen festgelegten Wert von FlowDirection .

Legen Sie FlowDirection im Stammlayoutbereich (oder Rahmen) Ihrer Seite oder auf der Seite selbst fest. Dies bewirkt, dass alle steuerelemente, die darin enthalten sind, diese Eigenschaft erben.

Wichtig

FlowDirection wird jedoch nicht automatisch basierend auf der ausgewählten Anzeigesprache des Benutzers in den Windows-Einstellungen festgelegt, oder es ändert sich nicht dynamisch als Reaktion darauf, dass der Benutzer die Anzeigesprache wechselt. Wenn der Benutzer z. B. Windows-Einstellungen von Englisch zu Arabisch wechselt, ändert sich die FlowDirection-Eigenschaft nicht automatisch von links nach rechts nach links. Als App-Entwickler müssen Sie FlowDirection entsprechend für die Aktuell angezeigte Sprache festlegen.

Die programmgesteuerte Technik besteht darin, die LayoutDirection Eigenschaft der bevorzugten Benutzeranzeigesprache zum Festlegen der FlowDirection-Eigenschaft zu verwenden (siehe das folgende Codebeispiel). Die meisten in Windows enthaltenen Steuerelemente verwenden FlowDirection bereits. Wenn Sie ein benutzerdefiniertes Steuerelement implementieren, sollte FlowDirection verwendet werden, um geeignete Layoutänderungen für RTL- und LTR-Sprachen vorzunehmen.

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;
}

Die oben beschriebene Technik macht FlowDirection zu einer Funktion der LayoutDirection Eigenschaft der bevorzugten Benutzeranzeigesprache. Wenn Sie diese Logik aus irgendeinem Grund nicht benötigen, können Sie eine FlowDirection-Eigenschaft in Ihrer App als Ressource verfügbar machen, die Lokalisierer für jede sprache, in die sie übersetzen, entsprechend festlegen können.

Fügen Sie zunächst in der Ressourcendatei (RESW) Ihrer App einen Eigenschaftsbezeichner mit dem Namen "MainPage.FlowDirection" hinzu (anstelle von "MainPage", können Sie einen beliebigen Namen verwenden). Verwenden Sie dann eine x:Uid, um Ihr Hauptseitenelement(oder dessen Stammlayoutpanel oder Frame) diesem Eigenschaftenbezeichner zuzuordnen.

<Page x:Uid="MainPage">

Anstelle einer einzelnen Codezeile für alle Sprachen hängt dies vom Übersetzer "Übersetzen" dieser Eigenschaftsressource für jede übersetzte Sprache ordnungsgemäß ab; beachten Sie daher, dass es bei verwendung dieser Technik eine zusätzliche Möglichkeit für menschliche Fehler gibt.

Wichtige APIs