Rechts nach links

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.SchreibrichtungVorfuehrung"
            Spacing="12">
  <ToggleSwitch OffContent="Links nach rechts" OnContent="Rechts nach links" IsOn="True" Checked="Richtung_Checked" Unchecked="Richtung_Unchecked" />
  <StackPanel x:Name="Flaeche" Spacing="12" FlowDirection="RightToLeft">
    <!-- Text: der Absatz beginnt rechts, Zahlen und Latein darin laufen links-nach-rechts. -->
    <TextBlock Text="مرحبا بالعالم: الإصدار 6 من Kuonen.UI" FontSize="18" />
    <TextBlock Text="שלום עולם – גרסה 6.0" FontSize="18" />
    <TextBox Text="نص قابل للتحرير" Width="280" HorizontalAlignment="Left" />
    <!-- Layout und Bedienung: die Reihe beginnt rechts, der Regler wächst nach links, die Pfeiltasten folgen dem Schirm. -->
    <StackPanel Orientation="Horizontal" Spacing="8">
      <Button Content="Erster" />
      <Button Content="Zweiter" />
      <Button Content="Dritter" />
    </StackPanel>
    <Slider Maximum="100" Value="30" Width="280" HorizontalAlignment="Left" />
    <ProgressBar Value="60" Width="280" HorizontalAlignment="Left" />
    <CheckBox Content="Kästchen am Anfang" IsChecked="True" />
    <!-- Symbole: nur die mit Richtung drehen sich. -->
    <StackPanel Orientation="Horizontal" Spacing="12">
      <PathIcon Data="{x:Static Symbole.ChevronRechts}" />
      <PathIcon Data="{x:Static Symbole.PfeilRechts}" />
      <PathIcon Data="{x:Static Symbole.Haken}" />
      <TextBlock Text="Chevron und Pfeil zeigen nach vorn, der Haken bleibt." />
    </StackPanel>
    <!-- Eigene Richtung: Code liest immer links-nach-rechts. -->
    <CodeEditor Text="SELECT name FROM t WHERE id = 6" Width="280" Height="60" HorizontalAlignment="Left" />
  </StackPanel>
</StackPanel>

using Kuonen.UI;
using Kuonen.UI.Ereignisse;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class SchreibrichtungSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new SchreibrichtungVorfuehrung();
}

/// <summary>KXAML-Fassung der Seite „Rechts nach links“: der Baum steht in SchreibrichtungSeite.kxaml, hier nur das Umschalten.</summary>
public sealed partial class SchreibrichtungVorfuehrung
{
    public SchreibrichtungVorfuehrung() => InitializeComponent();

    private void Richtung_Checked(object sender, RoutedEventArgs e) => Flaeche.FlowDirection = FlowDirection.RightToLeft;

    private void Richtung_Unchecked(object sender, RoutedEventArgs e) => Flaeche.FlowDirection = FlowDirection.LeftToRight;
}

using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: Rechts nach links (<see cref="FrameworkElement.FlowDirection"/>).</summary>
public sealed partial class SchreibrichtungSeite : GalerieSeite
{
    public override string Titel => "Rechts nach links";

    public override string Beschreibung =>
        "FlowDirection = RightToLeft spiegelt Layout, Bedienung und Symbole mit Richtung; der Text bleibt lesbar: Arabisch und Hebräisch beginnen "
        + "rechts, eingebettete Zahlen und Latein laufen links-nach-rechts. Der Codeeditor behält seine eigene Richtung. Der Umschalter oben in der "
        + "Galerie stellt alle Seiten um.";

    public override string Stichworte => "FlowDirection RightToLeft RTL Arabisch Hebräisch Bidi spiegeln Schreibrichtung MatchParent";

    public override string Datei => nameof(SchreibrichtungSeite);

    public override UIElement Baue()
    {
        var flaeche = new StackPanel { Spacing = 12, FlowDirection = FlowDirection.RightToLeft };
        var richtung = new ToggleSwitch { OffContent = "Links nach rechts", OnContent = "Rechts nach links", IsOn = true };
        richtung.Checked += (_, _) => flaeche.FlowDirection = FlowDirection.RightToLeft;
        richtung.Unchecked += (_, _) => flaeche.FlowDirection = FlowDirection.LeftToRight;

        // Text: der Absatz beginnt rechts, Zahlen und Latein darin laufen links-nach-rechts.
        flaeche.Children.Add(new TextBlock { Text = "مرحبا بالعالم: الإصدار 6 من Kuonen.UI", FontSize = 18 });
        flaeche.Children.Add(new TextBlock { Text = "שלום עולם – גרסה 6.0", FontSize = 18 });
        flaeche.Children.Add(new TextBox { Text = "نص قابل للتحرير", Width = 280, HorizontalAlignment = HorizontalAlignment.Left });

        // Layout und Bedienung: die Reihe beginnt rechts, der Regler wächst nach links, die Pfeiltasten folgen dem Schirm.
        var reihe = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 8 };
        reihe.Children.Add(new Button { Content = "Erster" });
        reihe.Children.Add(new Button { Content = "Zweiter" });
        reihe.Children.Add(new Button { Content = "Dritter" });
        flaeche.Children.Add(reihe);
        flaeche.Children.Add(new Slider { Maximum = 100, Value = 30, Width = 280, HorizontalAlignment = HorizontalAlignment.Left });
        flaeche.Children.Add(new ProgressBar { Value = 60, Width = 280, HorizontalAlignment = HorizontalAlignment.Left });
        flaeche.Children.Add(new CheckBox { Content = "Kästchen am Anfang", IsChecked = true });

        // Symbole: nur die mit Richtung drehen sich.
        var symbole = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 12 };
        symbole.Children.Add(new PathIcon { Data = Symbole.ChevronRechts });
        symbole.Children.Add(new PathIcon { Data = Symbole.PfeilRechts });
        symbole.Children.Add(new PathIcon { Data = Symbole.Haken });
        symbole.Children.Add(new TextBlock { Text = "Chevron und Pfeil zeigen nach vorn, der Haken bleibt." });
        flaeche.Children.Add(symbole);

        // Eigene Richtung: Code liest immer links-nach-rechts.
        flaeche.Children.Add(new CodeEditor { Text = "SELECT name FROM t WHERE id = 6", Width = 280, Height = 60, HorizontalAlignment = HorizontalAlignment.Left });

        var seite = new StackPanel { Spacing = 12 };
        seite.Children.Add(richtung);
        seite.Children.Add(flaeche);
        return seite;
    }
}