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

  • Статья

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

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

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

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

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

<TextBlock x:Uid="TitleText">

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

Fonts

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

<Page x:Uid="MainPage">

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

Важные API