設計您的應用程式以支援多種語言的配置和字型,包括 RTL(由右至左)的流程方向。 流程方向是腳本寫入和顯示的方向,而且頁面上的UI元素會由眼睛掃描。
版面配置指導方針
德文和芬蘭文等語言通常會使用比英文更多的字元。 東亞字型通常需要更多高度。 阿拉伯文和希伯來文等語言需以從右至左(RTL)閱讀順序配置版面和文字元素。
由於翻譯文字度量的這些變化,我們建議您不要在用戶介面中嵌入絕對位置、固定寬度或固定高度。 請改用 Windows UI 元素內建的動態配置機制。 例如,內容控件(例如按鈕)、專案控件(例如網格線檢視和列表檢視),以及版面配置面板(例如網格線和堆棧窗格)預設會自動重設大小和重排以符合其內容。 運用仿本地化來測試您的應用程式,以找出UI元素無法正確適應內容的任何有問題的邊界情況。
動態配置是建議的技術,而且您大部分情況下都可以使用它。 較不理想,但仍然比將大小硬編碼到UI標記中更好,是將佈局值依據語言設定。 以下是如何在應用程式中公開 Width 屬性作為當地語系化人員可針對每個語言適當設定的資源的範例。 首先,在 app 的資源檔 (.resw) 中,新增名稱為 “TitleText.Width” 的屬性識別碼(而不是 “TitleText”,您可以使用任何您想要的名稱)。 然後,使用 x:Uid 將一或多個 UI 元素與這個屬性識別碼產生關聯。
<TextBlock x:Uid="TitleText">
如需有關 Resources Files (.resw)、屬性識別碼及 x:Uid的詳細資訊,請參閱 在您的 UI 和應用程式套件中本地化字串的方式。
字體
使用 LanguageFont 字型對應類別,以程式設計方式存取特定語言的建議字型系列、大小、粗細和樣式。 LanguageFont 類別可讓您存取各種內容類別的正確字型資訊,包括 UI 標頭、通知、內文文字,以及用戶可編輯的檔本文字型。
鏡像影像
如果應用程式具有必須鏡像的映像(也就是可以翻轉相同的映像),則您可以使用 FlowDirection。
<!-- en-US\localized.xaml -->
<Image ... FlowDirection="LeftToRight" />
<!-- ar-SA\localized.xaml -->
<Image ... FlowDirection="RightToLeft" />
如果您的 app 需要不同的影像才能正確翻轉影像,則您可以使用資源管理系統搭配 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 屬性,作為本地化人員可以針對其翻譯的每個語言適當設定的資源。
首先,在 app 的資源檔 (.resw) 中,新增名稱為 “MainPage.FlowDirection” 的屬性標識碼(而不是 “MainPage”,您可以使用任何您想要的名稱)。 然後,使用 x:Uid,將主要 Page 元素(或其根配置面板或框架)與此屬性標識碼連結。
<Page x:Uid="MainPage">
這不同於為所有語言使用單一的程式碼,而是依賴翻譯者為每種翻譯語言正確地「翻譯」這個屬性資源;因此請注意,當您使用這項技術時,會有更多人為錯誤的可能性。