情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 の双方向アプリを作成する

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 のみ

このトピックでは、右から左 (RTL) の言語または双方向言語用の Windows Phone アプリを作成する方法について説明します。

Windows Phone がサポートするほとんどの言語は左から右に書かれる言語ですが、アラビア語、ヘブライ語、ペルシャ語など一部の言語は右から左に書かれます。RTL 言語には、URL や数字など、左から右に描画される必要があるコンテンツが含まれることもあります。左から右 (LTR) のコンテンツが右から左 (RTL) のコンテンツと共に同じ段落で使用される場合は、コンテンツの型ごとにそれぞれの方向に描画されます。これを双方向コンテンツと呼びます。

いずれかの RTL 言語用の Windows Phone アプリを記述する場合は、次の点について考慮することで、アプリが意図したとおりに動作することを確認できます。

このトピックは、次のセクションで構成されています。

ガイドラインとして、いずれかの RTL 言語用のアプリを記述またはローカライズする場合、テキストおよび UI 要素は右からフローします。また、テキストを正しく表示するには、コントロール、イメージなどの UI 要素も意図したとおりに描画されるようにする必要があります。

Windows Phone デバイスでの双方向コンテンツの例を次に図に示します。

BiDi image

RTL および双方向コンテンツのシナリオでのテキストと UI 要素の表示を指定できるように、Windows Phone には FlowDirection プロパティが用意されています。このプロパティは、2 つの列挙値 LeftToRight または RightToLeft のいずれかに設定できます。既定の FlowDirection 値は LeftToRight です。このプロパティは、FrameworkElement クラスから継承するすべての要素で使用できます。

メモメモ:

マネージ Windows Phone 8 アプリ用の新規プロジェクト テンプレートには、RootFrame 要素の言語構成があり、いずれかのサポートされている言語のアプリの FlowDirection に影響します。既定では、RTL 言語をサポートするカルチャを追加しているアプリは、サポート言語に設定されている表示言語のある電話上で、従来の RTL の FlowDirection に従います。

RTL 表示言語を設定した電話を使用してアプリを表示するときに LTR の配置を意図している場合、その言語をサポートするカルチャを追加でき、いずれかの要素で FlowDirection を設定することなく既定の動作を使用することができます。または、UI の一部の FlowDirection をロック、または動的にシフトする必要のある場合は、いずれかの子要素に明示的に FlowDirection を設定することで、常に既定の設定をオーバーライドします。

テキストを右から左に表示するには、使用するテキスト コントロールで FlowDirection プロパティを RightToLeft に明示的に設定します。

FlowDirection プロパティを使用して、RichTextBox コントロールでコンテンツが右から左にフローするようにする例を次に示します。


<StackPanel x:Name="LTRContentPanel" Grid.Row="0" Margin="0,10,0,-10">

<!-- 1) FlowDirection of the control inherited from default (LTR) --> 

    <RichTextBox FontSize="25" Height="119" Width="312">
        <Paragraph>
            <Run Text="Hello World!"/>
        </Paragraph>
        <Paragraph>
            <Run Text="مرحبا العالم!"/>
        </Paragraph>
    </RichTextBox>

<!-- 2) FlowDirection of the control set to RTL -->

    <RichTextBox FlowDirection="RightToLeft" Height="119" Width="312">
        <Paragraph>
            <Run Text="Hello World!"/>
        </Paragraph>
        <Paragraph>
            <Run Text="مرحبا العالم!"/>
        </Paragraph>
    </RichTextBox>

</StackPanel>







前のコード例によって生成される出力を次の図に示します。

Bi-directional example

前述の例では、RichTextBox コントロール内のテキストのみが、右から左に表示されます。アプリ内で使用する一部またはすべてのコントロールと要素が RightToLeft フローをするようにすることもできます。FlowDirection は継承されるため、FrameElement 階層で個々のコントロールからアプリ全体の RootFrame まで、任意の位置で設定またはオーバーライドできます。

次の例は、FlowDirection プロパティを LayoutRoot グリッドで設定し、コントロールの FlowDirection が継承された設定をオーバーライドするように明示的に設定する場合を除き、アプリ全体が右から左にフローするようにします。


<!--LayoutRoot is the root grid where all page content is placed-->
<!--FlowDirection for this sample is set in the LayoutRoot Grid:
    <Grid x:Name="LayoutRoot" Background="Transparent" FlowDirection="RightToLeft">-->

    
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Grid.RowSpan="2">
<!--THIS STACKPANEL INHERITS RTL-->
    <StackPanel x:Name="RTLContentPanel" Grid.Row="0" Background="DarkGray" Margin="0,10,0,321">

<!--This control set to LTR-->
        <RichTextBox FlowDirection="LeftToRight" FontSize="24 Height="53" Width="312" HorizontalAlignment="Left">
            <Paragraph>
                <Run Text="Hello World! مرحبا العالم!"/>
            </Paragraph>
        </RichTextBox>

<!--This control inherits RTL-->
        <RichTextBox FontSize="24" Height="48" Width="312" HorizontalAlignment="Left">
            <Paragraph>
                <Run Text="Hello World! مرحبا العالم!"/>
            </Paragraph>
        </RichTextBox>
    </StackPanel>
</Grid>
<Grid x:Name="xContentPanel" Grid.Row="1" Margin="12,0" Height="257" VerticalAlignment="Bottom">

<!--THIS STACKPANEL IS SET TO  LTR-->
    <StackPanel x:Name="LTRContentPanel"  FlowDirection="LeftToRight" Margin="0,-28,0,45" Background="DarkGreen">

<!--This control inherits LTR-->
        <RichTextBox FlowDirection="LeftToRight" FontSize="24" BorderBrush="AntiqueWhite" BorderThickness="2" Height="59" Width="312" HorizontalAlignment="Left">
            <Paragraph>
                <Run Text="Hello World! مرحبا العالم!"/>
            </Paragraph>
        </RichTextBox>

<!--This control is set to RTL-->
        <RichTextBox FlowDirection="RightToLeft" FontSize="24" BorderBrush="AntiqueWhite" BorderThickness="2" Height="61" Width="312" HorizontalAlignment="Left">
            <Paragraph>
                <Run Text="Hello World! مرحبا العالم!"/>
            </Paragraph>
        </RichTextBox>
    </StackPanel>


</Grid>


前のコード例によって生成される出力を次の図に示します。FlowDirection が継承されることに注意してください。RTL の FlowDirectionLayoutRoot から継承されるため、アプリケーションおよびページ タイトルは右端に揃えられます。

既定では、各要素の RightToLeft FlowDirection プロパティは、すべてのコントロールを含む LayoutRoot から継承される必要があります。FlowDirection の動作における 3 つの例を示します。RichTextBox コントロールおよび Button コントロールの HorizontalAlignment は、Left に設定されます。FlowDirectionRightToLeft に設定すると、コントロールは右端に揃えられます。

Bi-Directional Example

RTL 言語には、左から右にフローするコンテンツが含まれる場合があります。たとえば、\\server1\folder\file.ext などのネットワーク共有名を表示する場合は、アラビア語で表示する場合でも、英語で表示する場合でも、常に同じ方法で表示されるようにする必要があります。このような場合は、Run 要素を使用して言語を区切ってから、FlowDirection プロパティを Run レベルで設定します。

FlowDirection プロパティを Run レベルで設定して双方向コンテンツを表示する例を次に示します。


<StackPanel FlowDirection="RightToLeft" x:Name="TitlePanel" Grid.Row="0">
   <TextBlock x:Name="ApplicationTitle" Text="Windows Phone" FontSize="20"  Style="{StaticResource PhoneTextNormalStyle}"/>
   <TextBlock x:Name="PageTitle" Text="bi-di Sample" FontSize="35" Margin="0,0,0,20"  Style="{StaticResource PhoneTextTitle1Style}"/>
   <StackPanel x:Name="ContentPanel" Grid.Row="1" >
      
   <RichTextBox FlowDirection="RightToLeft"  FontSize="25" BorderBrush="AntiqueWhite" BorderThickness="2" Height="300" Width="460" HorizontalAlignment="Left">
         <Paragraph>
            <Run>ثنائية الاتجاه المحتوى: </Run>
            <Run FlowDirection="LeftToRight">\\wp8\efolder\filename.ppt</Run>
         </Paragraph>
        </RichTextBox>
     </StackPanel>
</StackPanel>

前のコード例によって生成される出力を次の図に示します。

Bi-directional example

Windows Phone アプリでイメージを表示するには、Image コントロールを使用します。そのためには、コントロールの Source プロパティを使用して、表示するイメージの URI (Uniform Resource Locator) を設定します。

その他の UI 要素とは異なり、Image コントロールはそのコンテナーから FlowDirection 値を継承しません。ただし、FlowDirection プロパティを直接 Image コントロールで RightToLeft 値に設定すると、水平方向に反転されます。これは、ほとんどの場合はイメージが反転されないようにしますが、イメージを水平方向に反転すると目的の効果が得られる場合もあるためです。双方向アプリでイメージを水平方向に反転する場合は、イメージの FlowDirection プロパティを RightToLeft に設定します。

StackPanel コントロール内の Image 要素を次の例に示します。StackPanelFlowDirection プロパティが RightToLeft に設定されます。


<StackPanel FlowDirection="RightToLeft" x:Name="ContentPanel" Grid.Row="0">
   <TextBlock x:Name="ApplicationTitle" Text="Windows Phone" FontSize="20"  Style="{StaticResource PhoneTextNormalStyle}"/>
   <TextBlock x:Name="PageTitle" Text="bi-di Sample" FontSize="35" Margin="0,0,0,20"  Style="{StaticResource PhoneTextTitle1Style}"/>

   <Image Source="microsoft.png" Height="100" Width="200" HorizontalAlignment="Left" />
</StackPanel>

前のコード例によって生成される出力を次の図に示します。イメージ要素は RightToLeft のフロー方向を継承しません。

Bi-Directional image

次の例では、Image コントロールで FlowDirection プロパティを RightToLeftに設定しています。


<StackPanel FlowDirection="RightToLeft" x:Name="ContentPanel" Grid.Row="0">
   <TextBlock x:Name="ApplicationTitle" Text="Windows Phone" FontSize="20"  Style="{StaticResource PhoneTextNormalStyle}"/>
   <TextBlock x:Name="PageTitle" Text="bi-di Sample" FontSize="35" Margin="0,0,0,20"  Style="{StaticResource PhoneTextTitle1Style}"/>

   <Image Source="microsoft.png" FlowDirection="RightToLeft" Height="100" Width="200" HorizontalAlignment="Left" />
</StackPanel>

前のコード例によって生成される出力を次の図に示します。Image コントロールは水平方向に反転されています。

Bi-directional image

Path オブジェクトを使用して、接続された一連の線と曲線を描画できます。これは FlowDirection での Image コントロールと同様に動作します。たとえば、その RightToLeft FlowDirection プロパティは、その LeftToRight プロパティのミラー イメージです。ただし、Image コントロールとは異なり、Path はそのコンテナーから FlowDirection プロパティを継承します。このプロパティを Path クラスで明示的に指定する必要はありません。

次の例では、3 本の線を用いて単純な矢印を描画します。矢印はその親 StackPanel から RightToLeft のフロー方向を継承します。


<StackPanel FlowDirection="RightToLeft" x:Name="ContentPanel" Grid.Row="0">
   <TextBlock x:Name="ApplicationTitle" Text="Windows Phone" FontSize="20"  Style="{StaticResource PhoneTextNormalStyle}"/>
   <TextBlock x:Name="PageTitle" Text="bi-di Sample" FontSize="35" Margin="0,0,0,20"  Style="{StaticResource PhoneTextTitle1Style}"/>

      <Path Stroke="Blue" StrokeThickness="4">
         <Path.Data>
            <GeometryGroup>
               <LineGeometry StartPoint="300,10" EndPoint="350,30" />
               <LineGeometry StartPoint="10,30" EndPoint="352,30" />
               <LineGeometry StartPoint="300,50" EndPoint="350,30" />
            </GeometryGroup>
         </Path.Data>
      </Path>
</StackPanel>

前述のコード例による出力を次の図に示します。

Bi-directional path

表示: