Настройка макета и шрифтов и поддержка RTL

Создайте приложение для поддержки макетов и шрифтов нескольких языков, включая направление потока RTL (справа налево). Направление потока — это направление, в котором скрипт записывается и отображается, а элементы пользовательского интерфейса на странице сканируются глазом.

Рекомендации по макету

Такие языки, как немецкий и финский, обычно используют больше символов, чем английский. Для восточноазиатских шрифтов обычно требуется больше высоты. Для таких языков, как арабский и иврит, требуется, чтобы панели макета и текстовые элементы были размещены в порядке чтения справа налево (RTL).

Из-за этих вариаций в метриках переведенного текста рекомендуется не создавать абсолютные позиции, фиксированную ширину или фиксированные высоты в пользовательском интерфейсе. Вместо этого используйте механизмы динамического макета, встроенные в элементы пользовательского интерфейса Windows. Например, элементы управления содержимым (например, кнопки), элементы управления элементами (например, представления сетки и представления списка), а также панели макета (например, сетки и стеки) автоматически изменяются и перетекаются по умолчанию, чтобы соответствовать их содержимому. Псевдолокализуйте ваше приложение, чтобы выявить любые проблемные крайние случаи, когда элементы пользовательского интерфейса не соответствуют содержимому по размеру.

Динамический макет — это рекомендуемая техника, которую вы сможете использовать в большинстве случаев. Менее предпочтительно, но все же лучше, чем жестко прописывать размеры в разметке пользовательского интерфейса, — задавать значения макета как функцию языка. Ниже приведен пример предоставления свойства Width в приложении в качестве ресурса, который локалиизаторы могут задать соответствующим образом на язык. Во-первых, в файле ресурсов приложения (RESW) добавьте идентификатор свойства с именем TitleText.Width (вместо TitleText, можно использовать любое имя, которое вы хотите). Затем используйте x:Uid для связывания одного или нескольких элементов пользовательского интерфейса с этим идентификатором свойства.

<TextBlock x:Uid="TitleText">

Дополнительные сведения о файлах ресурсов (RESW), идентификаторах свойств и x:Uid см. в разделе "Локализация строк" в манифесте пакета пользовательского интерфейса и приложения.

Шрифты

Используйте класс шрифтового сопоставления LanguageFont для программного доступа к рекомендуемому семейству шрифтов, размеру, весу и стилю для определенного языка. Класс LanguageFont предоставляет доступ к правильным сведениям о шрифте для различных категорий содержимого, включая заголовки пользовательского интерфейса, уведомления, текст текста и шрифты текста документа, редактируемые пользователем.

Зеркальные изображения

Если в приложении есть изображения, которые должны быть зеркальными (т. е. те же изображения можно перевернуть) для RTL, можно использовать FlowDirection.

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

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

Если вашему приложению требуется другое изображение для правильного отображения при перевороте, можно использовать систему управления ресурсами с квалификатором LayoutDirection (см. раздел LayoutDirection Настройка ресурсов для языка, масштабирования и других квалификаторов). Система выбирает изображение с именем file.layoutdir-rtl.png , если для языка среды выполнения приложения (см. раздел " Общие сведения о языках профилей пользователей и языках манифеста приложения") задан язык RTL. Этот подход может потребоваться, если часть изображения перевернута, но другая часть нет.

Обработка языков справа налево (RTL)

Если приложение локализовано для языков RTL справа налево, используйте свойство FrameworkElement.FlowDirection и задайте симметричное заполнение и поля. Панели макета, такие как Grid, автоматически масштабируются и переворачиваются в зависимости от установленного значения 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 (или его корневую панель макета или кадр) с этим идентификатором свойства.

<Page x:Uid="MainPage">

Вместо одной строки кода для всех языков, это зависит от того, что переводчик правильно переведет этот ресурс свойства для каждого языка, так что стоит помнить, что при использовании этого метода существует дополнительная возможность для человеческой ошибки.

Важные API

• FrameworkElement.FlowDirection
• LanguageFont

Связанные темы

• Локализация строк в манифесте пользовательского интерфейса и пакета приложения
• Адаптируйте ресурсы в зависимости от языка, масштаба и других характеристик
• Общие сведения о языках профилей пользователей и языках манифестов приложений