WPF Textbox Flow direction issue with Arabic language

Question

I am working on an application which supports many languages including Arabic. I am observing an odd behavior in the WPF text box while entering the values but strangely the same is working fine in a Windows Form text box.

All I am doing is this

Create a Text Box and keep it's flow direction to the default value which is LeftToRight
Change the language of the app to Arabic.
Type the following letter one by one in the text box 1 a 2 j

(where a and j denotes any two Arabic character).

Result : Wpf Text box shows the value as 1j2a While the Win forms text box displays it as j2a1.

Since Arabic is right to left , so the value shown by Win form is correct but that of WPF is wrong.

Wpf displays the correct value if we type the first character as Arabic and then enter any non-Arabic character.

Also, if I set the FlowDirection of the TextBox to RightToLeft, then WPF textbox works fine. But that will make my string move to the right and the app will have alignment issues.

Does anyone have any idea on why WPF text box shows the incorrect value while windows forms works fine ?

Also, can we keep the text aligned to left if we set the flow direction as RightToLeft ?

Viv Viv · Accepted Answer · 2013-07-04T15:14:38

Also, if I set the FlowDirection of the TextBox to RightToLeft, then WPF textbox works fine. But that will make my string move to the right and the app will have alignment issues.

That kinda says you're having bigger problems than basic alignment. The whole point of FlowDirection is to allow those non native LeftToRight readers to have a native UX in your application.

string moving to the right is what it should be and that's what your Arabic users would expect.

Microsoft Home Page in en-US

Same page in ar-iq

There is a reason why not just characters look different, but the actual text-flow as well(It's what users of that language would expect)

If you're sure you want to keep the content aligned left even when FlowDirection is reversed, apply a Style.Trigger to do so accordingly but do look into how your UX feels.

<TextBox>
  <TextBox.Style>
    <Style TargetType="{x:Type TextBox}">
      <Setter Property="HorizontalContentAlignment"
              Value="Left" />
      <Style.Triggers>
        <Trigger Property="FlowDirection"
                  Value="RightToLeft">
          <!-- "Right" - HorizontalContentAlignment with FlowDirection="RightToLeft" is
               the same end render visually as "Left" - HorizontalContentAlignment with
               FlowDirection="LeftToRight" -->
          <Setter Property="HorizontalContentAlignment"
                  Value="Right" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </TextBox.Style>
</TextBox>

Update:

As the OP now states the control's actually a TextBlock the above Style would look like:

<TextBlock>
  <TextBlock.Style>
    <Style TargetType="{x:Type TextBlock}">
      <Setter Property="TextAlignment"
              Value="Left" />
      <Style.Triggers>
        <Trigger Property="FlowDirection"
                  Value="RightToLeft">
          <Setter Property="TextAlignment"
                  Value="Right" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </TextBlock.Style>
</TextBlock>

WPF Textbox Flow direction issue with Arabic language

2 Answers