信息
您所需的主题如下所示。但此主题未包含在此库中。

创建 Windows Phone 8 的双向应用

2014/6/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

为了帮助您指定文本和 UI 元素在 RTL 和双向内容方案中的显示方式,Windows Phone 包括了 FlowDirection 属性。可以将该属性设置为两种枚举值中的其中一种:LeftToRightRightToLeft。默认 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)的任意点设置或重写它。

下面的示例在 LayoutRoot 网格中设置 FlowDirection 属性以便整个应用从右到左流动(控件的 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 是继承的。由于它们从 LayoutRoot 继承了 RTL FlowDirection,应用程序和页面标题向右对齐。

默认情况下,每种元素的 RightToLeft FlowDirection 属性应该从包含所有控件的 LayoutRoot 中继承。此示例演示了 FlowDirection 行为的三个方面。RichTextBox 控件和 Button 控件的 HorizontalAlignment 被设置为 Left。当您将 FlowDirection 设置为 RightToLeft 时,控件向右对齐。

Bi-Directional Example

有时,RTL 语言包含从左向右显示的内容。例如,如果要显示网络共享名称,如 \\server1\folder\file.ext,无论用阿拉伯语还是用英语,您总是希望它以相同的方式显示。在此类情况下,您可以使用 Run 元素分隔不同的语言,然后在 Run 级别设置 FlowDirection 属性。

以下示例演示如何通过在 Run 级别设置 FlowDirection 属性来显示双向内容。


<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

可使用 Image 控件在 Windows Phone 应用中显示图像。为此,请使用控件 Source 属性来设置您希望显示的图像的统一资源定位符 (URL)。

与其他 UI 元素不同,Image 控件不从其容器继承 FlowDirection 值。但是,如果直接在 Image 控件上将 FlowDirection 属性设置为 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>

下图演示了上述代码示例的呈现结果。请注意,Image 元素不继承 RightToLeft 流动方向。

Bi-Directional image

在下面的示例中,FlowDirection 属性在 Image 控件中被设置为 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

显示: