次の方法で共有

レイアウトとフォントを調整し、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 修飾子でリソース管理システムを使用できます (言語、スケール、およびその他の修飾子用にリソースを調整するの LayoutDirection セクションを参照してください)。 アプリランタイム言語 (file.layoutdir-rtl.pngを理解するを参照) が RTL 言語に設定されている場合、システムは という名前のイメージを選択します。 この方法は、画像の一部が反転されているが、別の部分が反転していない場合に必要になる場合があります。

右から左 (RTL) 言語の処理

アプリが右から左 (RTL) 言語用にローカライズされている場合は、FrameworkElement.FlowDirection プロパティを使用し、対称パディングと余白を設定します。 Grid などのレイアウト パネル、設定した FlowDirection の値 自動的に拡大縮小および反転されます。

ページのルート レイアウト パネル (またはフレーム) またはページ自体に、FlowDirection を設定します。 これにより、そのプロパティに含まれるすべてのコントロールがそのプロパティを継承します。

Von Bedeutung

ただし、FlowDirection は、Windows 設定でユーザーが選択した表示言語に基づいて自動的に設定 。また、ユーザーの切り替え表示言語に応じて動的に変更されることはありません。 たとえば、ユーザーが Windows の設定を英語からアラビア語に切り替えた場合、FlowDirection プロパティは、自動的に左から右から右から左に変更 。 現在表示している言語に合わせて、アプリ開発者はFlowDirectionを適切に設定する必要があります。

プログラムによる手法では、優先ユーザー表示言語の プロパティを使用して、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 になります。 何らかの理由でそのロジックが不要な場合は、ローカライズ担当者が翻訳する言語ごとに適切に設定できるリソースとして、アプリで FlowDirection プロパティを公開できます。

まず、アプリのリソース ファイル (.resw) で、"MainPage.FlowDirection" という名前のプロパティ識別子を追加します ("MainPage" ではなく、任意の名前を使用できます)。 次に、x:Uid を使用して、メインの Page 要素 (またはそのルート レイアウト パネルまたはフレーム) をこのプロパティ識別子に関連付けます。

<Page x:Uid="MainPage">

すべての言語に対して 1 行のコードを記述する代わりに、翻訳された言語ごとにこのプロパティ リソースを正しく "翻訳" するかによって異なります。そのため、この手法を使用すると、人的エラーが発生する可能性があることに注意してください。

重要な API