Justera layout och teckensnitt och stöd för RTL

Utforma appen så att den stöder layouter och teckensnitt för flera språk, inklusive RTL-flödesriktning (höger till vänster). Flödesriktningen är i vilken riktning skriptet skrivs och visas, och användargränssnittselementen på sidan genomsöks av ögat.

Riktlinjer för layout

Språk som tyska och finska använder vanligtvis fler tecken än engelska. Östasiatiska teckensnitt kräver vanligtvis mer höjd. Och språk som arabiska och hebreiska kräver att layoutpaneler och textelement läggs ut i rtl-läsordning (höger till vänster).

På grund av dessa variationer i måtten för översatt text rekommenderar vi att du inte bakar absolut positionering, fasta bredder eller fasta höjder i användargränssnittet (UI). Dra i stället nytta av de dynamiska layoutmekanismer som är inbyggda i Windows UI-element. Innehållskontroller (till exempel knappar), objektkontroller (till exempel rutnätsvyer och listvyer) och layoutpaneler (till exempel rutnät och stackpaneler) ändrar till exempel automatiskt storlek och omflöde som standard så att de passar deras innehåll. Pseudolokalisera din app för att upptäcka eventuella problematiska gränsfall där dina gränssnittselement inte storleksanpassas till innehåll korrekt.

Dynamisk layout är den rekommenderade tekniken och du kommer att kunna använda den i de flesta fall. Mindre att föredra, men ändå bättre än att baka storlekar i UI-markeringen, är att ange layoutvärden som en funktion av språket. Här är ett exempel på hur du kan exponera en bredd-egenskap i din app som en resurs som lokaliserare kan ställa in rätt för varje språk. I appens resursfil (.resw) lägger du först till en egenskapsidentifierare med namnet "TitleText.Width" (i stället för "TitleText" kan du använda valfritt namn som du vill). Använd sedan en x:Uid för att associera ett eller flera gränssnittselement med den här egenskapsidentifieraren.

<TextBlock x:Uid="TitleText">

Mer information om Resursfiler (.resw), egenskapsidentifierare och x:Uidfinns i Lokalisera strängar i ditt användargränssnitt och appens paketmanifest.

Teckensnitt

Använd klassen LanguageFont teckensnittsmappning för programmatisk åtkomst till den rekommenderade teckensnittsfamiljen, storlek, vikt och formatmall för ett visst språk. Klassen LanguageFont ger åtkomst till rätt teckensnittsinformation för olika innehållskategorier, inklusive gränssnittsrubriker, meddelanden, brödtext och användarredigerbara dokumenttextteckensnitt.

Spegelbilder

Om appen har bilder som måste speglas (dvs. samma bild kan vändas) för RTL kan du använda FlowDirection.

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

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

Om din app kräver en annan bild för att vända bilden korrekt kan du använda resurshanteringssystemet med LayoutDirection-kvalificeraren (se avsnittet LayoutDirection i Skräddarsy dina resurser för språk, skala och andra kvalificerare). Systemet väljer en bild med namnet file.layoutdir-rtl.png när appen körs på ett språk som är RTL (se Förstå användarprofilspråk och appmanifestspråk). Den här metoden kan vara nödvändig när en del av bilden vänds, men en annan del är det inte.

Hantera språk som skrivs från höger till vänster (RTL)

När appen är lokaliserad för RTL-språk (höger till vänster) använder du egenskapen FrameworkElement.FlowDirection och anger symmetrisk utfyllnad och marginaler. Layoutpaneler som Grid skalar och vänds automatiskt med värdet för FlowDirection som du anger.

Ställ in FlowDirection på sidans rotlayoutpanel (eller ram) eller på själva sidan. Detta gör att alla kontroller som ingår ärver den egenskapen.

Den programmatiska tekniken är att använda egenskapen LayoutDirection för det föredragna användarvisningsspråket för att ange egenskapen FlowDirection (se kodexemplet nedan). De flesta kontroller som ingår i Windows använder redan FlowDirection. Om du implementerar en anpassad kontroll bör den använda FlowDirection för att göra lämpliga layoutändringar för RTL- och LTR-språk.

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

Tekniken ovan gör FlowDirection till en funktion av egenskapen LayoutDirection för det föredragna användarvisningsspråket. Om du av någon anledning inte vill ha den funktionen kan du göra tillgänglig en FlowDirection-egenskap i appen som en resurs som lokalisatörer kan ange korrekt för varje målspråk de översätter till.

I appens resursfil (.resw) lägger du först till en egenskapsidentifierare med namnet "MainPage.FlowDirection" (i stället för "MainPage" kan du använda valfritt namn som du vill). Använd sedan ett x:Uid- för att associera huvudelementet Page (eller dess rotlayoutpanel eller ram) med den här egenskapsidentifieraren.

<Page x:Uid="MainPage">

I stället för en enda kodrad för alla språk beror detta på att översättaren "översätter" den här egenskapsresursen korrekt för varje översatt språk. Så tänk på att det finns den extra möjligheten för mänskliga fel när du använder den här tekniken.

Viktiga API:er

• FrameworkElement.FlowDirection
• LanguageFont

Relaterade ämnen

• Utforma din app för dubbelriktad text
• Lokalisera strängar i användargränssnittet och apppaketmanifestet
• Skräddarsy dina resurser för språk, skala och andra kvalificerare
• Förstå användarprofilspråk och appmanifestspråk