Freigeben über

Layout und Schriftarten anpassen und RTL unterstützen

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 empfehlen wir, keine absolute Positionierung, feste Breiten oder feste Höhen in die Benutzeroberfläche (UI) einzubauen. 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 Layoutfelder (z. B. Raster und Stapelpanelen) ändern die Größe und den Umbruch standardmäßig, um ihren Inhalt anzupassen. Pseudolokalisieren Sie Ihre App, um problematische Randfälle aufzudecken, in denen Ihre Benutzerschnittstellenelemente nicht ordnungsgemäß an die Inhalte angepasst werden.

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 Größen fest in Ihr UI-Markup einzubauen, ist es, Layoutwerte als Funktion der Sprache festzulegen. 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 ein x:Uid-, um einem oder mehreren UI-Elementen diesen Eigenschaftsbezeichner zuzuordnen.

<TextBlock x:Uid="TitleText">

Weitere Informationen zu Ressourcendateien (.resw), Eigenschaftskennungen und x:Uidfinden Sie unter Lokalisierung von Zeichenfolgen in der Benutzeroberfläche und im App-Paketmanifest.

Schriftarten

Verwenden Sie die LanguageFont Schriftzuordnungsklasse, um programmatischen Zugriff auf die empfohlene Schriftfamilie, Größe, Stärke und Stil für eine bestimmte Sprache zu erhalten. 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 für RTL gespiegelt werden müssen (d. h. dasselbe Bild kann umgedreht werden), können Sie FlowDirectionverwenden.

<!-- 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 korrekt zu kippen, können Sie das Ressourcenverwaltungssystem mit dem LayoutDirection Qualifizierer verwenden (siehe Abschnitt "LayoutDirection" von Anpassen 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 umgedreht ist, ein anderer Teil jedoch nicht.

Umgang mit von rechts nach links geschriebenen Sprachen (RTL)

Wenn Ihre App für Sprachen von rechts nach links (RTL) lokalisiert ist, verwenden Sie die FrameworkElement.FlowDirection-Eigenschaft, und legen Sie symmetrische Abstände und Ränder fest. Layout-Panels wie Grid skalieren und kippen automatisch mit dem von Ihnen festgelegten Wert 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.

Von Bedeutung

FlowDirection- ist jedoch nicht automatisch basierend auf der ausgewählten Anzeigesprache des Benutzers in den Windows-Einstellungen festgelegt; Es ändert sich auch nicht dynamisch als Reaktion darauf, dass der Benutzer die Anzeigesprache wechselt. Wenn der Benutzer z. B. Windows-Einstellungen von Englisch zu Arabisch wechselt, wird die FlowDirection--Eigenschaft nicht automatisch von links nach rechts nach links wechseln. Als der 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 zu verwenden, um die FlowDirection-Eigenschaft festzulegen (siehe Codebeispiel unten). Die meisten Steuerelemente, die in Windows enthalten sind, verwenden bereits FlowDirection. Wenn Sie ein benutzerdefiniertes Steuerelement implementieren, sollte es FlowDirection verwenden, 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 obenstehende Technik macht FlowDirection zu einer Funktion der LayoutDirection Eigenschaft der bevorzugten Anzeigesprache des Benutzers. 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 ein x:Uid-, um Ihr Hauptelement Page (oder dessen Stammlayoutpanel oder Rahmen) diesem Eigenschaftsbezeichner zuzuordnen.

<Page x:Uid="MainPage">

Anstatt einer einzigen Codezeile für alle Sprachen hängt es davon ab, dass der Übersetzer diese Eigenschaftsressource für jede übersetzte Sprache korrekt übersetzt; beachten Sie daher, dass bei Verwendung dieser Technik ein zusätzliches Potenzial für menschliche Fehler besteht.

Wichtige APIs