通过

调整布局和字体并支持 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 。 这会导致包含的所有控件继承该属性。

重要

但是， FlowDirection 不会 根据用户在 Windows 设置中选择的显示语言自动设置;也不会动态更改以响应用户切换显示语言。 例如，如果用户将 Windows 设置从英语切换到阿拉伯语，则 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