WPF의 양방향 기능 개요

아티클
08/20/2008

업데이트: 2007년 11월

다른 개발 플랫폼과 달리 WPF에는 양방향 콘텐츠의 신속한 개발을 지원하는 많은 기능(예: 동일한 문서에 왼쪽에서 오른쪽 데이터 및 오른쪽에서 왼쪽 데이터를 혼합하는 기능)이 있습니다. 이와 동시에 WPF는 아랍어 및 히브리어 사용자와 같은 양방향 기능이 필요한 사용자를 위한 뛰어난 경험을 제공합니다.

다음 단원에서는 양방향 콘텐츠를 가장 잘 표시하는 방법에 대한 예제와 함께 다양한 양방향 기능에 대해 설명합니다. 대부분의 샘플에서는 XAML이 사용되지만 이러한 개념을 C# 또는 Microsoft Visual Basic 코드에 쉽게 적용할 수 있습니다.

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

FlowDirection
FlowDocument
Span 요소
텍스트가 아닌 요소가 있는 FlowDirection
숫자 대체

FlowDirection

WPF 응용 프로그램에서 콘텐츠 흐름 방향을 정의하는 기본 속성은 FlowDirection입니다. 이 속성은 두 개의 열거형 값인 LeftToRight와 RightToLeft 중 하나로 설정할 수 있습니다. 이 속성은 FrameworkElement에서 상속되는 모든 WPF 요소에 사용할 수 있습니다.

참고

이 항목의 모든 그래픽에서는 코드와 함께 XAMLPad 도구에서 코드가 렌더링되는 방법을 보여 줍니다. 또한 대부분의 경우 다운로드할 수 있는 샘플이 제공됩니다.

다음 예제에서는 TextBox 요소의 흐름 방향을 설정합니다.

왼쪽에서 오른쪽으로 흐름 방향

<TextBlock Background="DarkBlue" Foreground="LightBlue" 
   FontSize="20" FlowDirection="LeftToRight">
        This is a left-to-right TextBlock
</TextBlock>

오른쪽에서 왼쪽으로 흐름 방향

<TextBlock Background="LightBlue" Foreground="DarkBlue"
   FontSize="20" FlowDirection="RightToLeft">
        This is a right-to-left TextBlock
</TextBlock>

전체 샘플은 LeftToRight 및 RightToLeft 샘플을 참조하십시오.

다음 그래픽에서는 위 코드가 렌더링되는 방법을 보여 줍니다.

FlowDirection을 보여 주는 그래픽

TextBlock 맞춤

UI(사용자 인터페이스) 트리 내의 요소는 컨테이너에서 FlowDirection을 상속합니다. 다음 예제에서 TextBlock은 Window에 상주하는 Grid 안에 있습니다. FlowDirection을 Window에 대해 설정하는 것은 Grid 및 TextBlock에 대해서도 설정하는 것을 의미합니다.

다음 예제에서는 FlowDirection을 설정하는 방법을 보여 줍니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="FlowDirectionApp.Window1"
    Title="BidiFeatures" Height="200" Width="700" 
    FlowDirection="RightToLeft">

    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0" >
          This is a right-to-left TextBlock
      </TextBlock>

      <TextBlock Grid.Column="1" FlowDirection="LeftToRight">
          This is a left-to-right TextBlock
      </TextBlock>
    </Grid>
</Window>

최상위 수준 Window에는 RightToLeft FlowDirection이 있으므로 포함된 모든 요소도 동일한 FlowDirection을 상속합니다. 지정된 FlowDirection을 요소에서 재정의하려면 LeftToRight으로 변경되는 이전 예제의 두 번째 TextBlock과 같은 명시적 방향 변경을 추가해야 합니다. FlowDirection이 정의되지 않은 경우 기본 LeftToRight가 적용됩니다.

전체 샘플은 FlowDirection 샘플을 참조하십시오.

다음 그래픽에서는 위 예제의 출력을 보여 줍니다.

명시적으로 할당된 FlowDirection을 보여 주는 그래픽

흐름 방향 설명

FlowDocument

HTML, Win32 및 Java™와 같은 대부분의 개발 플랫폼은 양방향 콘텐츠 개발을 위한 특수한 지원을 제공합니다. HTML과 같은 태그 언어는 텍스트를 필수 방향으로 표시하는 데 필요한 태그(예: “rtl” 또는 “ltr”을 값으로 사용하는 HTML 4.0 태그 “dir”)를 콘텐츠 작성자에게 제공합니다. 이 태그는 FlowDirection 속성과 비슷하지만 FlowDirection 속성은 텍스트 콘텐츠에 대한 고급 레이아웃 방법을 제공하며 텍스트가 아닌 콘텐츠에 사용할 수 있습니다.

WPF에서 FlowDocument는 텍스트, 표, 이미지 및 기타 요소의 조합을 호스팅할 수 있는 다양성을 가진 UI 요소입니다. 다음 단원의 샘플에서는 이 요소를 사용합니다.

FlowDocument에 텍스트를 추가하는 작업을 여러 방법으로 수행할 수 있습니다. 간단한 방법은 텍스트와 같은 콘텐츠를 그룹화하는 데 사용되는 블록 수준 요소인 Paragraph를 사용하는 것입니다. 인라인 수준 요소에 텍스트를 추가하기 위해 샘플에서는 Span 및 Run을 사용합니다. Span은 다른 인라인 요소를 그룹화하는 데 사용되는 인라인 수준 유동 콘텐츠 요소이고 Run은 서식 없는 텍스트의 실행을 포함하기 위한 인라인 수준 유동 콘텐츠 요소입니다. Span은 여러 Run 요소를 포함할 수 있습니다.

첫 번째 문서 예제에 나와 있는 문서의 네트워크 공유 이름은 여러 개입니다(예: \\server1\folder\file.ext). 아랍어 또는 영어 문서에서 이러한 네트워크 링크가 있는 경우 항상 동일한 방법으로 표시되기를 원할 것입니다. 다음 그래픽에서는 아랍어 RightToLeft 문서의 링크를 보여 줍니다.

Span 요소 사용을 보여 주는 그래픽

오른쪽에서 왼쪽으로 진행되는 문서

텍스트가 RightToLeft이므로 “\”와 같은 모든 특수 문자는 오른쪽에서 왼쪽 순서로 텍스트를 구분합니다. 이로 인해 링크가 올바르게 순서로 표시되지 않으며 이 문제를 해결하려면 LeftToRight로 흐르는 별개의 Run을 유지하도록 텍스트를 포함해야 합니다. 언어별로 개별 Run을 가지는 대신에 사용 빈도가 낮은 영어 텍스트를 사용 빈도가 높은 아랍어 Span에 포함하면 이 문제를 보다 쉽게 해결할 수 있습니다.

다음은 이를 보여 주는 그래픽입니다.

Span 요소에 포함된 Run 요소 사용을 보여 주는 그래픽

XamlPad 스크린 샷

다음 예제에서는 문서에서 Run 및 Span 요소를 사용하는 방법을 보여 줍니다.

<Page
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    FlowDirection="RightToLeft">

  <FlowDocument>
    <Paragraph>
      <Span FlowDirection="RightToLeft" >
        ستجد الملف هنا:
        <Run FlowDirection="LeftToRight">
           \\server1\filename\filename1.txt</Run>
        ثم باقى النص!
      </Span>
    </Paragraph>
  </FlowDocument>
</Page>

전체 샘플은 RunSpan 샘플을 참조하십시오.

Span 요소

Span 요소는 흐름 방향이 서로 다른 텍스트 간을 구분하는 경계로 사용됩니다. 흐름 방향이 동일한 Span 요소도 다른 양방향 범위를 가진 것으로 간주되며 이는 컨테이너의 FlowDirection에 따라 Span 요소의 순서가 지정되고 Span 내의 콘텐츠만 Span의 FlowDirection을 따르는 것을 의미합니다.

다음 그래픽에서는 여러 TextBlock 요소의 흐름 방향을 보여 줍니다.

여러 TextBlock 요소의 FlowDirection을 보여 주는 그래픽

여러 흐름 방향의 텍스트 블록

다음 예제에서는 Span 및 Run 요소를 사용하여 이전 그래픽에 표시된 결과를 생성하는 방법을 보여 줍니다.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <StackPanel >

    <TextBlock FontSize="20" FlowDirection="RightToLeft">
      <Run FlowDirection="LeftToRight">العالم</Run>
      <Run FlowDirection="LeftToRight" Foreground="Red" >فى سلام</Run>
    </TextBlock>

    <TextBlock FontSize="20" FlowDirection="LeftToRight">
      <Run FlowDirection="RightToLeft">العالم</Run>
      <Run FlowDirection="RightToLeft" Foreground="Red" >فى سلام</Run>
    </TextBlock>

    <TextBlock FontSize="20" Foreground="Blue">العالم فى سلام</TextBlock>

    <Separator/>

    <TextBlock FontSize="20" FlowDirection="RightToLeft">
      <Span Foreground="Red" FlowDirection="LeftToRight">Hello</Span>
      <Span FlowDirection="LeftToRight">World</Span>
    </TextBlock>

    <TextBlock FontSize="20" FlowDirection="LeftToRight">
      <Span Foreground="Red" FlowDirection="RightToLeft">Hello</Span>
      <Span FlowDirection="RightToLeft">World</Span>
    </TextBlock>

    <TextBlock FontSize="20" Foreground="Blue">Hello World</TextBlock>

  </StackPanel>

</Page>

전체 코드 샘플은 Span 샘플을 참조하십시오.

샘플의 TextBlock 요소에서 Span 요소는 해당 부모의 FlowDirection에 따라 레이아웃되지만 각 Span 요소 내의 텍스트는 고유한 FlowDirection에 따라 흐릅니다. 이는 라틴어와 아랍어 또는 다른 모든 언어에 적용할 수 있습니다.

xml:lang 추가

다음 그래픽에서는 “200.0+21.4=221.4”와 같은 숫자 및 산술 연산자를 사용하는 다른 예제를 보여 줍니다. FlowDirection만 설정된다는 것에 주의합니다.

FlowDirection만 사용하여 숫자를 표시하는 그래픽

오른쪽에서 왼쪽으로 진행되는 숫자

FlowDirection이 올바르지만 숫자가 아랍어 숫자 모양이 아니기 때문에 이 응용 프로그램의 사용자는 출력에 만족하지 않을 것입니다.

XAML 요소는 각 요소의 언어를 정의하는 XAML의 xml:lang 처리(Language: 해당 별칭)라는 XML 속성을 상속합니다. 이전 예제에서는 Run 요소 또는 해당 최상위 요소에 언어가 정의되지 않았으므로 기본 Language인 en-US가 사용되었습니다. WPF(Windows Presentation Foundation)의 내부 숫자 셰이핑 알고리즘은 해당 Language(이 경우는 영어)의 숫자를 선택합니다. 아랍어 숫자를 올바르게 렌더링하려면 XAML의 xml:lang 처리(Language)를 설정해야 합니다.

다음 그래픽에서는 Language 속성이 추가된 예제를 보여 줍니다.

xml:lang 특성 사용을 보여 주는 그래픽

오른쪽에서 왼쪽으로 진행되는 아랍어 숫자

다음 예제에서는 응용 프로그램에 XAML의 xml:lang 처리(Language)를 추가합니다.

<Page
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    FlowDirection="RightToLeft">
      <FlowDocument>
         <Paragraph>
            <Span FlowDirection="RightToLeft" Language="ar-SA">
              العملية الحسابية: "200.0+21.4=221.4"
            </Span>
         </Paragraph>
      </FlowDocument>
</Page>

전체 샘플은 LanguageAttribute 샘플을 참조하십시오.

대부분의 언어의 경우 Language 값이 대상으로 지정된 지역에 따라 서로 다릅니다. 예를 들어 “ar-SA” 및 “ar-EG”는 두 개의 아랍어 변형을 나타냅니다. 위 예제에서는 Language(xml:lang) 및 FlowDirection 속성을 모두 정의해야 한다는 것을 보여 줍니다.

텍스트가 아닌 요소가 있는 FlowDirection

FlowDirection은 텍스트 요소에서 텍스트가 흐르는 방법뿐만 아니라 거의 모든 다른 UI 요소의 흐름 방향을 정의합니다. 다음 그래픽에서는 가로 LinearGradientBrush를 사용하여 해당 배경을 그리는 ToolBar를 보여 줍니다.

왼쪽에서 오른쪽으로의 그라데이션이 있는 도구 모음을 표시하는 그래픽

그라데이션 스크린 샷

FlowDirection을 RightToLeft로 설정한 후 ToolBar 단추가 오른쪽에서 왼쪽으로 정렬될 뿐만 아니라 LinearGradientBrush는 오른쪽에서 왼쪽으로 흐르도록 해당 오프셋을 다시 맞춥니다.

다음 그래픽에서는 LinearGradientBrush의 다시 맞춤을 보여 줍니다.

오른쪽에서 왼쪽으로의 그라데이션이 있는 도구 모음을 표시하는 그래픽

오른쪽에서 왼쪽으로 진행되는 그라데이션

다음 예제에서는 RightToLeft ToolBar를 그립니다. 왼쪽에서 오른쪽으로 그리려면 ToolBar에서 FlowDirection 특성을 제거합니다.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <ToolBar FlowDirection="RightToLeft" Height="50" DockPanel.Dock="Top">
    <ToolBar.Background>
      <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,1">
        <LinearGradientBrush.GradientStops>
          <GradientStop Color="DarkRed" Offset="0" />
          <GradientStop Color="DarkBlue" Offset="0.3" />
          <GradientStop Color="LightBlue" Offset="0.6" />
          <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </ToolBar.Background>

    <Button FontSize="12" Foreground="White">Button1</Button>
    <Rectangle Width="20"/>
    <Button FontSize="12" Foreground="White">Button2</Button>
    <Rectangle Width="20"/>
    <Button FontSize="12" Foreground="White">Button3</Button>
    <Rectangle Width="20"/>
    <Button FontSize="12" Foreground="White">Button4</Button>
    <Rectangle Width="20"/>
  </ToolBar>
</Page>

전체 샘플은 그라데이션 샘플을 참조하십시오.

FlowDirection 예외

FlowDirection가 예상대로 작동하지 않는 몇 가지 경우가 있습니다. 이 단원에서는 이러한 예외 중 두 가지를 설명합니다.

Image

Image는 이미지를 표시하는 컨트롤을 나타냅니다. XAML에서는 표시할 Image의 URI(Uniform Resource Identifier)를 정의하는 Source 속성과 함께 사용할 수 있습니다.

다른 UI 요소와 달리 Image는 컨테이너에서 FlowDirection을 상속하지 않습니다. 그러나 FlowDirection이 명시적으로 RightToLeft로 설정된 경우 Image는 가로로 대칭되어 표시됩니다. 이미지를 가로로 대칭하면 원하는 효과가 발생하는 경우가 있기 때문에 이는 양방향 콘텐츠 개발자를 위한 편리한 기능으로 구현됩니다.

다음 그래픽에서는 대칭 이동한 Image를 보여 줍니다.

대칭 이동한 이미지를 보여 주는 그래픽

XamlPad 스크린 샷

다음 예제에서는 FlowDirection이 포함된 StackPanel에서 Image가 이 속성을 상속하는 데 실패하는 경우를 보여 줍니다. 참고 이 예제를 실행하려면 C:\ 드라이브에 ms_logo.jpg라는 파일이 있어야 합니다.

<StackPanel 
  xmlns='https://schemas.microsoft.com/winfx/2006/xaml/presentation' 
  FlowDirection="RightToLeft">

  <Image Source="file://c:/ms_logo.jpg" 
         Width="147" Height="50"/>
  <Separator Height="10"/>
  <Image Source="file://c:/ms_logo.jpg" 
         Width="147" Height="50" FlowDirection="LeftToRight" />
  <Separator Height="10"/>
  <Image Source="file://c:/ms_logo.jpg" 
         Width="147" Height="50" FlowDirection="RightToLeft"/>
</StackPanel>

전체 예제는 Image 샘플을 참조하십시오. 참고 다운로드 파일에는 ms_logo.jpg 파일이 포함되어 있습니다. 코드에서는 .jpg 파일이 프로젝트에 없지만 C:\ 드라이브의 어딘가에 있다고 가정합니다. .jpg를 프로젝트 파일에서 C:\ 드라이브로 복사하거나 코드를 변경하여 프로젝트 안에서 파일을 찾도록 해야 합니다. 이렇게 하려면 Source="file://c:/ms_logo.jpg"를 Source="ms_logo.jpg"로 변경합니다.

Paths

Image 외에도 또 다른 흥미로운 요소는 Path입니다. Path는 일련의 연결된 선과 곡선을 그릴 수 있는 개체로, 해당 FlowDirection과 관련해서는 Image와 비슷하게 작동합니다. 예를 들어 해당 RightToLeft FlowDirection은 해당 LeftToRight의 수평 미러입니다. 그러나 Image와 달리 Path는 컨테이너에서 FlowDirection을 상속하며 이를 명시적으로 지정할 필요가 없습니다.

다음 예제에서는 세 개의 선을 사용하여 간단한 화살표를 그립니다. 첫 번째 화살표는 StackPanel에서 RightToLeft 흐름 방향을 상속하므로 해당 시작점과 끝점이 오른쪽의 루트로부터 측정됩니다. 명시적 RightToLeft FlowDirection이 있는 두 번째 화살표도 오른쪽에서 시작됩니다. 그러나 세 번째 화살표의 경우 왼쪽에 시작 루트가 있습니다. 그리기에 대한 자세한 내용은 LineGeometry 및 GeometryGroup을 참조하십시오.

<StackPanel 
  xmlns='https://schemas.microsoft.com/winfx/2006/xaml/presentation' 
  FlowDirection="RightToLeft">

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

  <Path Stroke="Red" StrokeThickness="4" FlowDirection="RightToLeft">
    <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>

  <Path Stroke="Green" StrokeThickness="4" FlowDirection="LeftToRight">
    <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>

전체 샘플은 Path 샘플을 참조하십시오.

다음 그래픽에서는 위 예제의 출력을 보여 줍니다.

Path 요소를 사용하여 그린 화살표를 보여 주는 그래픽

Image 및 Path는 WPF(Windows Presentation Foundation)에서 FlowDirection을 사용하는 방법을 보여 주는 두 가지 예입니다. 컨테이너 내에서 UI 요소를 특정 방향으로 레이아웃하는 것 외에도 FlowDirection은 화면에서 잉크를 렌더링하는 InkPresenter, LinearGradientBrush, RadialGradientBrush 등과 같은 요소와 함께 사용할 수 있습니다. 왼쪽에서 오른쪽으로의 동작을 모방하는 오른쪽에서 왼쪽으로의 동작 또는 그 반대의 동작이 콘텐츠에 필요한 경우 WPF(Windows Presentation Foundation)는 항상 해당 기능을 제공합니다.

숫자 대체

지금까지 Windows는 동일한 숫자에 대한 다양한 문화권 도형 표시를 허용하여 숫자 대체를 지원했으며 이러한 숫자의 내부 저장소는 다양한 로캘에서 통합된 상태로 유지되었습니다. 예를 들어 숫자는 잘 알려진 16진수 값인 0x40, 0x41 등으로 저장되지만 선택한 언어에 따라 표시됩니다.

이에 따라 응용 프로그램은 숫자 값을 한 언어에서 다른 언어로 변환할 필요 없이 처리할 수 있었습니다. 예를 들어 사용자는 지역화된 아랍어 Windows에서 Microsoft Excel 스프레드시트를 열고 아랍어 모양의 숫자를 볼 수 있지만 해당 스프레드시트를 유럽 버전의 Windows에서 열 경우 유럽 버전으로 표시된 동일한 숫자를 볼 수 있습니다. 쉼표 구분 기호 및 백분율 기호와 같은 다른 기호는 일반적으로 동일한 문서에서 숫자를 수반하므로 이러한 기호에도 이 작업이 필요합니다.

WPF(Windows Presentation Foundation)는 동일한 기능을 계속 지원할 뿐만 아니라 이 기능에 대한 추가 지원을 제공하여 대체가 사용되는 시기와 방법을 사용자가 더 많이 제어할 수 있게 합니다. 이 기능은 모든 언어에 사용하도록 디자인되었지만 응용 프로그램이 실행되는 다양한 문화권으로 인해 응용 프로그램 개발자가 특정 언어의 숫자 셰이핑을 수행하기 어려운 양방향 콘텐츠에서 특히 유용합니다.

WPF(Windows Presentation Foundation)에서 숫자 대체가 작동하는 방법을 제어하는 핵심 속성은 Substitution 종속성 속성입니다. NumberSubstitution 클래스는 텍스트의 숫자를 표시하는 방법을 지정합니다. 이 클래스에는 해당 동작을 정의하는 세 개의 공용 속성이 있습니다. 각 속성을 요약하면 다음과 같습니다.

CultureSource:

이 속성은 숫자에 대한 문화권을 결정하는 방법을 지정하며 다음과 같은 세 개의 NumberCultureSource 열거형 값 중 하나를 사용합니다.

Override: 숫자 문화권이 CultureOverride 속성의 문화권입니다.
Text: 숫자 문화권이 텍스트 런(Text Run)의 문화권입니다. 태그에는 이것은 XAML의 xml:lang 처리 또는 해당 별칭인 Language입니다. 또한 FrameworkContentElement에서 파생되는 클래스의 기본값입니다. 이러한 클래스에는 System.Windows.Documents.Paragraph, System.Windows.Documents.Table, System.Windows.Documents.TableCell 등이 포함됩니다.
User: 숫자 문화권이 현재 스레드의 문화권입니다. 이 속성은 Page, Window 및 TextBlock와 같은 FrameworkElement의 모든 서브클래스에 대한 기본값입니다.

CultureOverride:

CultureOverride 속성은 CultureSource 속성이 Override로 설정된 경우에만 사용되고 그렇지 않은 경우 무시됩니다. 이 속성은 숫자 문화권을 지정합니다. 기본값인 null 값은 en-US로 해석됩니다.

Substitution:

이 속성은 수행할 숫자 대체의 형식을 지정하며 다음 NumberSubstitutionMethod 열거형 값 중 하나를 사용합니다.

AsCulture: 대체 메서드가 숫자 문화권의 NumberFormatInfo.DigitSubstitution 속성 값에 따라 결정됩니다. 이 옵션이 기본값입니다.
Context: 숫자 문화권이 아랍어 또는 페르시아어 문화권이면 컨텍스트에 따라 숫자가 결정되도록 지정합니다.
European: 숫자가 항상 유럽 숫자로 렌더링됩니다.
NativeNational: 문화권의 NumberFormatInfo 속성에 의해 지정된 대로 숫자 문화권에 대한 해당 국가의 숫자를 사용하여 숫자를 렌더링합니다.
Traditional: 숫자 문화권에 대한 전통 숫자를 사용하여 숫자를 렌더링합니다. 대부분의 문화권에서 NativeNational과 동일합니다. 그러나 NativeNational을 사용하면 일부 아랍어 문화권에 대해 라틴 숫자가 사용되며 이 값을 사용하면 모든 아랍어 문화권에 대해 아랍어 숫자가 사용됩니다.

양방향 콘텐츠 개발자에게 이러한 값은 어떤 의미가 있습니까? 대부분의 경우 개발자는 각 텍스트 UI 요소의 FlowDirection 및 언어(예: Language="ar-SA")만 정의하면 되고 올바른 UI에 따라 숫자를 표시하는 작업은 NumberSubstitution 논리에 의해 수행됩니다. 다음 예제에서는 아랍어 버전의 Windows에서 실행 중인 WPF(Windows Presentation Foundation) 응용 프로그램에서 아랍어 및 영어 숫자를 사용하는 경우를 보여 줍니다.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel>
   <TextBlock Background="LightGreen" FontSize="32" 
      Language="ar-SA" FlowDirection="RightToLeft">1+2=3</TextBlock>
   <TextBox Background="LightGreen" FontSize="32" 
      Language="ar-SA" FlowDirection="RightToLeft">1+2=3</TextBox>
   <TextBlock Background="LightBlue" FontSize="32">1+2=3</TextBlock>
   <TextBox Background="LightBlue" FontSize="32">1+2=3</TextBox>
 </StackPanel>
</Page>

다음 그래픽에서는 아랍어 버전의 Windows에서 실행 중인 경우 이전 샘플의 출력을 보여 줍니다.

표시된 아랍어 및 영어 숫자를 보여 주는 그래픽

숫자가 있는 XamlPad 스크린 샷

전체 샘플은 Numbers 샘플을 참조하십시오.

FlowDirection을 LeftToRight로 설정하면 유럽 숫자가 생성되므로 이 경우 FlowDirection이 중요했습니다. 다음 단원에서는 문서 전체에서 통일되게 숫자를 표시하는 방법에 대해 설명합니다. 이 예제가 아랍어 Windows에서 실행 중이 아닌 경우 모든 숫자는 유럽 숫자로 표시됩니다.

대체 규칙 정의

실제 응용 프로그램에서는 Language를 프로그래밍 방식으로 설정해야 할 수 있습니다. 예를 들어 Language(xml:lang) 특성을 시스템의 UI에 사용되는 것과 동일하게 설정하거나 응용 프로그램 상태에 따라 Language를 변경할 수 있습니다.

응용 프로그램의 상태에 따라 변경을 수행하려면 WPF(Windows Presentation Foundation)에 의해 제공되는 다른 기능을 사용합니다.

먼저 응용 프로그램 구성 요소의 NumberSubstitution.CultureSource=¢¢ç¢®¨¡Text¢¢ç¢®¨ú를 설정합니다. 이 설정을 사용하면 TextBlock과 같은 “User”를 기본값으로 사용하는 텍스트 요소의 UI에서 설정이 제공되지 않습니다.

예를 들면 다음과 같습니다.

<TextBlock

Name="text1" NumberSubstitution.CultureSource="Text">

1234+5679=6913

</TextBlock>

해당 C# 코드에서 Language 속성을 예를 들어 “ar-SA”로 설정합니다.

text1.Language =

System.Windows.Markup.XmlLanguage.GetLanguage("ar-SA");

Language 속성을 현재 사용자의 UI 언어로 설정해야 할 경우 다음 코드를 사용합니다.

text1.Language =

System.Windows.Markup.XmlLanguage.GetLanguage(

System.Globalization.CultureInfo.CurrentUICulture.IetfLanguageTag);

CurrentCulture는 런타임에 현재 스레드에 사용되는 현재 문화권을 나타냅니다.

최종 XAML 예제는 다음 예제와 비슷해야 합니다.

<Page x:Class="WindowsApplication.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Code Sample" Height="300" Width="300"
>
    <StackPanel>
      <TextBlock Language="ar-SA" 
         FlowDirection="RightToLeft">عربى: 1+2=3
      </TextBlock>
      <TextBlock Language="ar-SA" 
         FlowDirection="RightToLeft" 
         NumberSubstitution.Substitution="European">عربى: 1+2=3 
      </TextBlock>
    </StackPanel>
</Page>

전체 샘플은 Numbers2 샘플을 참조하십시오.

최종 C# 예제는 다음과 비슷해야 합니다.

namespace BidiTest
{
    public partial class Window1 : Window
    {

        public Window1()
        {
            InitializeComponent();

            string currentLanguage = 
                System.Globalization.CultureInfo.CurrentCulture.IetfLanguageTag;

            text1.Language = System.Windows.Markup.XmlLanguage.GetLanguage(currentLanguage);

            if (currentLanguage.ToLower().StartsWith("ar"))
            {
                text1.FlowDirection = FlowDirection.RightToLeft;
            }
            else
            {
                text1.FlowDirection = FlowDirection.LeftToRight;
            }
        }
    }
}

전체 샘플은 NumbersCSharp 샘플을 참조하십시오.

다음 그래픽에서는 둘 중 하나의 프로그래밍 언어에 대해 창이 어떻게 표시되는지 보여 줍니다.

아랍어 숫자를 표시하는 그래픽

아랍어 숫자

대체 속성 사용

WPF(Windows Presentation Foundation)에서 숫자 대체가 작동하는 방법은 텍스트 요소의 Language 및 해당 FlowDirection에 따라 달라집니다. FlowDirection이 왼쪽에서 오른쪽인 경우 유럽 숫자가 렌더링됩니다. 그러나 아랍어 텍스트가 앞에 오거나 언어가 “ar”로 설정되고 FlowDirection이 RightToLeft인 경우 아랍어 숫자가 렌더링됩니다.

그러나 모든 사용자를 위한 유럽 숫자와 같이 통일된 응용 프로그램을 만들어야 할 경우가 있습니다. 또는 특정 Style의 Table 셀에 아랍어 숫자가 필요할 수 있습니다. 이 작업을 수행하기 위한 쉬운 방법은 Substitution 속성을 사용하는 것입니다.

다음 예제에서 첫 번째 TextBlock에는 Substitution 속성이 설정되어 있지 않으므로 알고리즘은 아랍어 숫자를 예상대로 표시합니다. 그러나 두 번째 TextBlock에서는 대체가 유럽으로 설정되어 아랍어 숫자에 대한 기본 대체를 재정의하므로 유럽 숫자가 표시됩니다.

<Page x:Class="WindowsApplication.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Code Sample" Height="300" Width="300"
>
    <StackPanel>
      <TextBlock Language="ar-SA" 
         FlowDirection="RightToLeft">عربى: 1+2=3
      </TextBlock>
      <TextBlock Language="ar-SA" 
         FlowDirection="RightToLeft" 
         NumberSubstitution.Substitution="European">عربى: 1+2=3 
      </TextBlock>
    </StackPanel>
</Page>

전체 샘플은 Numbers3 샘플을 참조하십시오.

다음을 통해 공유