How to adjust layout and fonts for various languages, and support RTL layouts (XAML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
Support localized layouts and fonts in your Windows Store apps by following a few simple guidelines.
Instructions
Layout guidelines
Some languages, such as German and Finnish, require more space than English for their text.
Use flexible layout mechanisms instead of absolute positioning, fixed widths, or fixed heights. When necessary, particular UI elements can be adjusted based on language.
Specify a Uid for an element:
<TextBlock x:Uid="Block1">
Ensure that your app's ResW file has a resource for Block1.Width, which you can set for each language that you localize into.
Some languages, such as Arabic and Hebrew, require that text layout and app layout must be in right-to-left (RTL) reading order.
For Windows Store apps using C++, C#, or Visual Basic, use the FlowDirection property, with symmetrical padding and margins, to enable localization for other layout directions.
Extensible Application Markup Language (XAML) layout controls such as Grid scale and flip automatically with the FlowDirection property. Expose your own FlowDirection property in your Windows Store apps using C++, C#, or Visual Basic as a resource for localizers.
Specify a Uid for the main page of your app:
<Page x:Uid="MainPage">
Ensure that your app's ResW file has a resource for MainPage.FlowDirection, which you can set for each language that you localize into.
Mirroring images
If your app has images that must be mirrored for RTL, you can apply the FlowDirection property:
<!-- en-US\localized.xaml -->
<Image ... FlowDirection="LeftToRight" />
<!-- ar-SA\localized.xaml -->
<Image ... FlowDirection="RightToLeft" />
If your app requires a different image to flip the image correctly, you can use the resource management system with the layoutdir qualifier qualifier. The system chooses an image named file.layoutdir-rtl.png when the application language is set to an RTL language. This approach may be necessary when some part of the image is flipped, but another part isn't.
Fonts
Use the LanguageFont font-mapping APIs for programmatic access to the recommended font family, size, weight, and style for a particular language. The LanguageFont object provides access to the correct font info for various categories of content including UI headers, notifications, body text, and user-editable document body fonts.