Windows Phone 8용 양방향 앱 만들기

2013-12-05

적용 대상: Windows Phone 8 전용입니다.

 

이 항목에서는 RTL(오른쪽에서 왼쪽) 또는 양방향 언어용 Windows Phone 앱을 만드는 방법에 대해 설명합니다.

Windows Phone 에서 지원하는 언어는 대부분 왼쪽에서 오른쪽으로 읽지만 아랍어, 히브리어 및 이란어와 같은 일부 언어는 오른쪽에서 왼쪽으로 읽습니다. 때때로 RTL 언어에는 왼쪽에서 오른쪽으로 렌더링해야 하는 URL 또는 숫자 등의 콘텐츠가 포함될 수 있습니다. 동일한 단락에서 LTR(왼쪽에서 오른쪽) 콘텐츠가 RTL 콘텐츠와 함께 사용되면 각 콘텐츠 유형이 고유한 방향으로 렌더링됩니다. 이를 양방향 콘텐츠라고 합니다.

RTL 언어용으로 Windows Phone 앱을 작성하는 경우 앱이 원하는 대로 작동하는지 확인할 수 있도록 다음 사항을 고려하세요.

이 항목에는 다음 단원이 포함되어 있습니다.

 

예를 들어 RTL 언어에 대해 앱을 작성하거나 지역화하는 경우 텍스트 및 UI 요소는 오른쪽부터 시작됩니다. 또한 텍스트를 올바르게 표시하려면 컨트롤, 이미지 등의 UI 요소가 원하는 대로 렌더링되는지 확인해야 합니다.

다음 그림에서는 Windows Phone 단말기의 양방향 콘텐츠의 예제를 보여 줍니다.

BiDi image

텍스트 및 UI 요소가 RTL 및 양방향 콘텐츠 시나리오에 표시되는 방식을 지정할 수 있도록 Windows Phone 에는 FlowDirection 속성이 있습니다. 이 속성을 두 가지 열거형 값 중 하나로 설정할 수 있습니다. LeftToRight 또는 RightToLeft입니다. 기본 FlowDirection 값은 LeftToRight입니다. FrameworkElement 클래스에서 상속되는 모든 요소와 함께 이 속성을 사용할 수 있습니다.

참고참고:

관리 Windows Phone 8 앱의 새 프로젝트 템플릿에는 지원되는 언어에 대해 앱의 FlowDirection에 영향을 주는 RootFrame 요소에 대한 언어 구성이 있습니다. 기본적으로 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 컨트롤의 HorizontalAlignmentLeft로 설정됩니다. FlowDirectionRightToLeft로 설정하면 컨트롤이 오른쪽에 맞춰집니다.

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(Uniform Resource Locator)을 설정합니다.

기타 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

다음 예제에서는 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 클래스에서 이 속성을 명시적으로 지정할 필요가 없습니다.

다음 예제에서는 세 개의 선을 사용하여 간단한 화살표를 그립니다. 화살표는 부모 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

표시:
© 2014 Microsoft