调整布局和字体，并支持 RTL

设计应用以支持多种语言的布局和字体，包括 RTL（从右到左）的流程方向。 流方向是编写和显示脚本的方向，页面上的 UI 元素由眼睛扫描。

布局指南

德语和芬兰语等语言通常使用比英语更多的字符。 东亚字体通常需要更高的高度。 阿拉伯语和希伯来语等语言要求布局面板和文本元素按从右到左（RTL）阅读顺序布局。

由于翻译文本的指标存在这些变化，因此建议不要将绝对定位、固定宽度或固定高度嵌入到用户界面（UI）中。 而是利用内置于 Windows UI 元素中的动态布局机制。 例如，内容控件（如按钮）、项控件（如网格视图和列表视图）和布局面板（如网格和堆栈窗格）默认会自动调整和重排大小以适应其内容。 伪本地化你的应用，以发现 UI 元素无法正确调整内容大小的任何有问题的边缘情况。

动态布局是推荐的技术，大多数情况下都可以使用它。 虽然不太理想，但比直接将尺寸嵌入到 UI 标记要好，最好是根据语言设置布局值。 这是一个示例，展示如何将应用程序中的 Width 属性作为资源公开，以便本地化人员可以根据语言进行适当的设置。 首先，在应用的“资源文件”（.resw）中添加一个名称为“TitleText.Width”的属性标识符（而不是“TitleText”），可以使用你喜欢的任何名称。 然后，使用 x：Uid 将一个或多个 UI 元素与此属性标识符相关联。

<TextBlock x:Uid="TitleText">

有关资源文件（.resw）、属性标识符和 x：Uid的详细信息，请参阅 UI 和应用包清单中的字符串本地化。

字体

使用 LanguageFont 字体映射类以编程方式访问特定语言的建议字体系列、大小、粗细和样式。 LanguageFont 类提供对各种类别内容（包括 UI 标头、通知、正文文本和用户可编辑文档正文字体）的正确字体信息的访问权限。

镜像映像

如果应用中有必须镜像（即同一图像可以被翻转）用于 RTL 的映像，则可以使用 FlowDirection。

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

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

如果你的应用需要不同的图像来正确翻转图像，则可以将资源管理系统与 LayoutDirection 限定符一起使用（请参阅 的 LayoutDirection 部分，为语言、缩放和其他限定符定制资源）。 当应用运行时语言（请参阅了解用户配置文件语言和应用清单语言）设置为 RTL 语言时，系统会选择一个名为file.layoutdir-rtl.png的图像。 当图像的某些部分翻转，但另一部分不是时，可能需要此方法。

处理从右到左 （RTL） 语言

当应用本地化为从右到左（RTL）语言时，请使用 FrameworkElement.FlowDirection 属性，并设置对称填充和边距。 网格 等布局面板会根据您设置的 FlowDirection 的值自动缩放和翻转。

在页面的根布局面板（或框架）上或页面本身上设置 FlowDirection 。 这会导致包含的所有控件继承该属性。

编程方法是使用 LayoutDirection 首选用户显示语言的属性来设置 FlowDirection 属性（请参阅下面的代码示例）。 Windows 中包含的大多数控件都已经使用 flowDirection。 如果要实现自定义控件，则应使用 FlowDirection 为 RTL 和 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;
}

上述技术使 FlowDirection 成为根据首选用户显示语言的 LayoutDirection 属性的一个函数。 如果您出于某种原因不需要该逻辑，可以将应用程序中的 FlowDirection 属性公开为一种资源，让本地化人员能够为他们翻译的每种语言适当地进行设置。

首先，在应用的“资源文件”（.resw）中添加一个名称为“MainPage.FlowDirection”的属性标识符（而不是“MainPage”），可以使用你喜欢的任何名称。 然后，使用 x：Uid将主页元素 （或其根布局面板或框架）与此属性标识符相关联。

<Page x:Uid="MainPage">

相对于为所有语言编写一行代码，这种方法依赖于翻译人员为每一种翻译语言正确地“翻译”此属性资源；因此，请注意，使用此技术时可能会增加人为错误的风险。

重要 API

• FrameworkElement.FlowDirection
• LanguageFont

相关主题

• 在 UI 和应用包清单中对字符串进行本地化
• 根据语言、规模和其他限定条件调整您的资源
• 了解用户配置文件语言和应用清单语言