WinUI 3自定义标题栏如何适配FlowDirection.RightToLeft？

要让自定义标题栏的系统按钮（最小化/最大化/关闭）和标题文本遵循RightToLeft(RTL)布局，你需要调整窗口级别的FlowDirection设置，而非仅设置子元素的FlowDirection，具体步骤如下：

1. 设置窗口全局FlowDirection #

系统标题栏的非客户端区域（包括caption按钮、标题文本）不会继承子元素（如MainGrid）的FlowDirection，必须设置Window本身的FlowDirection才能让这部分响应RTL布局。你可以通过两种方式实现：

方式一：在XAML中直接设置 #

修改Window标签，添加FlowDirection="RightToLeft"：

<Window
    x:Class="YourNamespace.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourNamespace"
    FlowDirection="RightToLeft">
    
    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>

    <Grid x:Name="MainGrid" RowDefinitions="auto,*">
        <TitleBar
            Title="Custom Title Bar"
            IsBackButtonEnabled="True"
            IsBackButtonVisible="True"
            Subtitle="Beta">
            <TitleBar.RightHeader>
                <PersonPicture Height="25" Initials="JD" />
            </TitleBar.RightHeader>
        </TitleBar>
        <StackPanel Grid.Row="1">
            <Button Content="Click" />
        </StackPanel>
    </Grid>
</Window>

方式二：在后台代码中设置 #

将原来设置MainGrid.FlowDirection的代码替换为设置窗口自身的FlowDirection：

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // 设置窗口全局RTL布局
        this.FlowDirection = FlowDirection.RightToLeft;

        ExtendsContentIntoTitleBar = true;

        this.AppWindow.TitleBar.IconShowOptions = Microsoft.UI.Windowing.IconShowOptions.ShowIconAndSystemMenu;
        this.AppWindow.TitleBar.ButtonBackgroundColor = Microsoft.UI.Colors.Transparent;
        this.AppWindow.TitleBar.PreferredHeightOption = Microsoft.UI.Windowing.TitleBarHeightOption.Tall;
    }
}

2. 自定义TitleBar内容的自动适配 #

设置窗口FlowDirection后，自定义TitleBar控件会自动继承RTL布局规则：

• 标题文本会自动右对齐
• TitleBar.RightHeader中的元素会显示在标题栏左侧区域，TitleBar.LeftHeader元素会显示在右侧（符合RTL布局的视觉习惯）

关键说明 #

这并非WinUI 3的已知限制，而是因为系统标题栏的非客户端区域不受子元素布局属性影响，必须通过窗口级别的FlowDirection设置来触发镜像布局。如果需要更极致的自定义（比如调整按钮顺序），可以完全隐藏系统标题栏按钮，自行实现一套自定义按钮控件，但上述方法已能满足绝大多数RTL布局需求。

内容的提问来源于stack exchange，提问作者Abdul Saboor Habibi