From wpf-dev-pack
Implements Right-to-Left (RTL) layout support in WPF using FlowDirection for Arabic, Hebrew, Persian, Urdu apps.
npx claudepluginhub christian289/dotnet-with-claudecode --plugin wpf-dev-packThis skill uses the workspace's default tool permissions.
Implement bidirectional text and mirrored layouts for RTL languages.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Implement bidirectional text and mirrored layouts for 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 |
<!-- Left-to-Right (default) -->
<Window FlowDirection="LeftToRight"
Title="My Application">
<!-- Right-to-Left -->
<Window FlowDirection="RightToLeft"
Title="التطبيق">
<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>
<Window FlowDirection="{DynamicResource AppFlowDirection}">
<!-- In ResourceDictionary -->
<FlowDirection x:Key="AppFlowDirection">RightToLeft</FlowDirection>
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;
}
}
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;
}
| Element | Mirrored |
|---|---|
| Text alignment | ✅ |
| StackPanel Horizontal | ✅ |
| Grid columns | ✅ |
| Margins/Padding | ✅ |
| ScrollBar position | ✅ |
| Menu items | ✅ |
<!-- 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"/>
<!-- Arabic text with English -->
<TextBlock>
<Run Text="مرحبا "/>
<Run FlowDirection="LeftToRight" Text="John"/>
<Run Text=" كيف حالك؟"/>
</TextBlock>
<TextBlock FlowDirection="RightToLeft">
السعر: <Run FlowDirection="LeftToRight">$99.99</Run>
</TextBlock>
<!-- 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>
<!-- RTL: DockPanel.Dock="Left" appears on right -->
<DockPanel FlowDirection="RightToLeft">
<Button DockPanel.Dock="Left" Content="القائمة"/> <!-- Right side -->
<TextBlock Text="المحتوى"/>
</DockPanel>
// 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);
}
}
| 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 |