レイアウトやフォントの調整と RTL のサポート
RTL （右から左） のテキストの方向を含め、複数の言語のレイアウトやフォントをサポートするアプリを設計します。 フローの方向とは、スクリプトが書き込まれ、表示される方向であり、ページ上の UI 要素が目でスキャンされます。
レイアウトのガイドライン
ドイツ語やフィンランド語などの言語では、通常、英語よりも多くの文字が使用されます。 東アジアのフォントでは、通常、より高さが必要です。 また、アラビア語やヘブライ語などの言語では、レイアウト パネルとテキスト要素を右から左 (RTL) の読み取り順序でレイアウトする必要があります。
翻訳されたテキストのメトリックにこれらのバリエーションがあるため、絶対配置、固定幅、固定高さをユーザー インターフェイス (UI) にベイクしないことをお勧めします。 代わりに、Windows UI 要素に組み込まれている動的レイアウト メカニズムを利用してください。 たとえば、コンテンツ コントロール (ボタンなど)、項目コントロール (グリッド ビューやリスト ビューなど)、レイアウト パネル (グリッドやスタックパネルなど) は、コンテンツに合わせて既定で自動的にサイズ変更およびリフローされます。 アプリを擬似ローカライズして、UI 要素のサイズがコンテンツに適切に合わない問題のあるエッジ ケースを明らかにします。
動的レイアウトが推奨される手法であり、ほとんどの場合に使用できます。 あまり望ましくありませんが、UI マークアップにサイズをベイクするよりも優れているのは、レイアウト値を言語の関数として設定することです。 ローカライザーが言語ごとに適切に設定できるリソースとして、アプリで Width プロパティを公開する方法の例を次に示します。 まず、アプリのリソース ファイル (.resw) で、"TitleText.Width" という名前のプロパティ識別子を追加します ("TitleText" の代わりに、任意の名前を使用できます)。 次に、 x:Uid を使用して、1 つ以上の 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 修飾子を使用してリソース管理システムを使用できます ( 言語、スケール、その他の修飾子については、リソースのレイアウト方向に関するセクションを参照してください)。 システムは、アプリランタイム言語 (ユーザー プロファイル言語とアプリ マニフェスト言語を参照) が RTL 言語に設定されている場合に、file.layoutdir-rtl.pngという名前のイメージを選択します。 この方法は、画像の一部が反転されているが、別の部分が反転していない場合に必要になる場合があります。
右から左 (RTL) 言語の処理
アプリが右から左 (RTL) 言語用にローカライズされている場合は、 FrameworkElement.FlowDirection プロパティを使用し、対称パディングと余白を設定します。 Grid などのレイアウト パネル設定した FlowDirection の値を使用して自動的に拡大縮小および反転します。
FlowDirectionページのルート レイアウト パネル (またはフレーム) またはページ自体に設定します。 これにより、そのプロパティに含まれるすべてのコントロールがそのプロパティを継承します。
重要
ただし、FlowDirectionは、Windows 設定で選択したユーザーの表示言語に基づいて自動的に設定されません。また、ユーザーの表示言語の切り替えに応じて動的に変更されることはありません。 たとえば、ユーザーが Windows の設定を英語からアラビア語に切り替えた場合、FlowDirection プロパティは自動的に左から右から右から左に変更されません。 アプリ開発者は、 FlowDirection 現在表示している言語に適切に設定する必要があります。
プログラムによる手法では、優先ユーザー表示言語の LayoutDirection プロパティを使用して、 FlowDirection プロパティを設定します (以下のコード例を参照)。 Windows に含まれるほとんどのコントロールでは、 FlowDirection が既に使用されています。 カスタム コントロールを実装する場合は、
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">
すべての言語に対して 1 行のコードを記述する代わりに、翻訳された言語ごとにこのプロパティ リソースを正しく "翻訳" するかによって異なります。そのため、この手法を使用すると、人的エラーが発生する可能性があることに注意してください。
重要な API
関連トピック
Windows developer