調整配置和字型，並支援 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 元素 (或其根佈局面板或框架) 與此屬性標識符關聯。

<Page x:Uid="MainPage">

這取決於翻譯者為每種翻譯語言正確地「翻譯」此屬性資源，而不是針對所有語言的一行程式碼； 因此請注意，使用此技術時存在額外的人為錯誤機會。

重要 API