WPF RTL (Right-to-Left) Support

Implement bidirectional text and mirrored layouts for RTL languages.

1. RTL Languages

Language Culture Code Direction

Arabic ar-SA, ar-EG RTL

Hebrew he-IL RTL

Persian (Farsi) fa-IR RTL

Urdu ur-PK RTL

2. Setting FlowDirection

2.1 Window Level

<!-- Left-to-Right (default) --> <Window FlowDirection="LeftToRight" Title="My Application">

<!-- Right-to-Left --> <Window FlowDirection="RightToLeft" Title="التطبيق">

2.2 Element Level

<Window FlowDirection="RightToLeft"> <StackPanel> <!-- Inherits RTL from parent --> <TextBlock Text="مرحبا بالعالم"/>

    <!-- Override to LTR for specific content -->
    <TextBlock FlowDirection="LeftToRight"
               Text="user@example.com"/>
</StackPanel>

</Window>

2.3 Resource-Based

<Window FlowDirection="{DynamicResource AppFlowDirection}">

<!-- In ResourceDictionary --> <FlowDirection x:Key="AppFlowDirection">RightToLeft</FlowDirection>

3. Dynamic FlowDirection

3.1 Based on Culture

public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); SetFlowDirection(); }

private void SetFlowDirection()
{
    var culture = Thread.CurrentThread.CurrentUICulture;
    FlowDirection = culture.TextInfo.IsRightToLeft
        ? FlowDirection.RightToLeft
        : FlowDirection.LeftToRight;
}

}

3.2 Language Switching

public void SwitchLanguage(string cultureName) { var culture = new CultureInfo(cultureName);

Thread.CurrentThread.CurrentCulture = culture;
Thread.CurrentThread.CurrentUICulture = culture;

// Update FlowDirection
Application.Current.MainWindow.FlowDirection =
    culture.TextInfo.IsRightToLeft
        ? FlowDirection.RightToLeft
        : FlowDirection.LeftToRight;

}

4. Mirroring Behavior

4.1 What Gets Mirrored

Element Mirrored

Text alignment ✅

StackPanel Horizontal ✅

Grid columns ✅

Margins/Padding ✅

ScrollBar position ✅

Menu items ✅

4.2 What Should NOT Be Mirrored

<!-- Images (logos, icons) --> <Image Source="logo.png" FlowDirection="LeftToRight"/>

<!-- Phone numbers --> <TextBlock FlowDirection="LeftToRight" Text="+1-234-567-8900"/>

<!-- Email addresses --> <TextBlock FlowDirection="LeftToRight" Text="user@example.com"/>

<!-- Numbers in specific format --> <TextBlock FlowDirection="LeftToRight" Text="12345"/>

<!-- Progress bars --> <ProgressBar FlowDirection="LeftToRight" Value="75"/>

<!-- Sliders --> <Slider FlowDirection="LeftToRight" Value="50"/>

5. Bidirectional Text

5.1 Mixed Content

<!-- Arabic text with English --> <TextBlock> <Run Text="مرحبا "/> <Run FlowDirection="LeftToRight" Text="John"/> <Run Text=" كيف حالك؟"/> </TextBlock>

5.2 TextBlock with Mixed Direction

<TextBlock FlowDirection="RightToLeft"> السعر: <Run FlowDirection="LeftToRight">$99.99</Run> </TextBlock>

6. Layout Considerations

6.1 Grid Layout

<!-- RTL: Column 0 appears on right --> <Grid FlowDirection="RightToLeft"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <!-- Right side in RTL --> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <!-- Left side in RTL --> </Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Text="الاسم:"/>
<TextBox Grid.Column="1"/>
<Button Grid.Column="2" Content="حفظ"/>

</Grid>

6.2 DockPanel

<!-- RTL: DockPanel.Dock="Left" appears on right --> <DockPanel FlowDirection="RightToLeft"> <Button DockPanel.Dock="Left" Content="القائمة"/> <!-- Right side --> <TextBlock Text="المحتوى"/> </DockPanel>

7. Testing RTL

// Force RTL for testing (even on LTR system) public partial class App : Application { protected override void OnStartup(StartupEventArgs e) { // Test with Arabic culture var culture = new CultureInfo("ar-SA"); Thread.CurrentThread.CurrentCulture = culture; Thread.CurrentThread.CurrentUICulture = culture;

    base.OnStartup(e);
}

}

8. Common Pitfalls

Issue Solution

Icons look wrong Set FlowDirection="LeftToRight" on Image

Numbers reversed Wrap in Run with LTR

Progress bar wrong Set FlowDirection="LeftToRight"

Checkbox text spacing Check Margin/Padding

9. References

• Bidirectional Features - Microsoft Docs

• FlowDirection - Microsoft Docs