Custom TitleBar is not work well in RTL

[ghost1372]

Describe the bug

Custom title bar doesn't work well in Right To Left layout I used the code from the documentation

Below you can see the reaction of the title bar when layout is right to left with different methods:

1. Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = "fa-IR";

As you can see, the title does not stick to the right side and is as far as the CaptionButtons

2.FlowDirection="RightToLeft"

As you can see, CaptionButtons and title are placed in each other

3. using NativeMethods WS_EX_LAYOUTRTL and SetWindowLong(hWnd, GWL_EXSTYLE, exstyle | WS_EX_LAYOUTRTL)

The drag regions are not correct and the title is still on the left side

4. using NativeMethods WS_EX_LAYOUTRTL and SetWindowLong(hWnd, GWL_EXSTYLE, exstyle | WS_EX_LAYOUTRTL) and FlowDirection="RightToLeft"

Steps to reproduce the bug

create a winui 3 project + full titlebar customization change your app to RTL layout with 3 methods

Expected behavior

Caption buttons should be on the left side, title and icon should be on the right side, Also, the title and icon should be placed on the right without spaces [see first image]

Screenshots

No response

NuGet package version

Windows App SDK 1.3.2: 1.3.230602002

Packaging type

Packaged (MSIX), Unpackaged

Windows version

Windows 11 version 22H2 (22621, 2022 Update)

IDE

Visual Studio 2022

Additional context

No response

[Avid29]

I reported it in the wrong repo earlier with a video example: https://github.com/microsoft/microsoft-ui-xaml/issues/8559

[DarranRowe]

Does setting WS_EX_LAYOUTRTL and FlowDirection="RightToLeft" at the same time work? There is some fun quirkiness here, but WS_EX_LAYOUTRTL means that the frame is mirrored but the content doesn't have to be and FlowDirection="RightToLeft" means that the content is mirrored but the frame doesn't have to be. This is especially true since one of your previous bug reports showed that Xaml wasn't properly working with the underlying window. FrameworkElement.FlowDirection does state that the default is LeftToRight after all.

[ghost1372]

@DarranRowe No, as you can see, title is far from the right side

The bug I reported earlier was in a very bad state, The title bar and caption buttons were not working. They fixed that bug . But here we have a space on the right!

[pratikone]

I would suggest using winappsdk 1.4 preview and see if it covers some of it. RTL in custom titlebar is still a in-progress issue but with merger with appwindow titlebar, 1.4 custom titlebar should be doing most of the heavy lifting of RTL display. can you test it out and let me know the experience ? Thanks

[Avid29]

@pratikone I gave it a test in my C# project and it no longer mismatches the buttons visible location from their hitboxes, however it behaves as if it were LTR. Is there a way to set the TitleBar layout/flow direction in the C# API?

Also, in 1.2 when you didn't enable ExtendsContentIntoTitleBar the titlebar would match the system language's flow direction. However, in 1.4 that behavior has changed and it will always be LTR.

[ghost1372]

@pratikone i tested with 1.4-preview1 First of all, there is no right-to-left functionality with C# code! In version 1.3, the app can be set to right to left with the following code: Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = "fa-IR"; But in 1.4 no code works except p/invoke Second, I changed app layout to right to left with P/invoke and issue is still exists

[pratikone]

Thanks for providing these. It is very useful feedback towards a fully functional RTL. I will start exploring what other gaps here. @Avid29 we didn't change anything in that end for flow direction. Are you following https://learn.microsoft.com/en-us/windows/apps/design/globalizing/manage-language-and-region and have a RTL language in app manifest ? If it doesn't work after all that, I suggest opening a new issue as it is separate from custom titlebar related RTL issue. Would be better for tracking

[ghost1372]

Tnx @pratikone I should also mention that UnPackaged Apps have more issues and only p/invoke code works and no C# code can change the layout. So we need a new API to change the layout for Packaged/UnPackaged

[pratikone]

we are working on a good api to act as source of truth for RTL. hang tight. meanwhile, calling WS_EX_LAYOUTRTL and FlowDirection="RightToLeft" on XamlRoot.Content is not fixing it entirely ? @ghost1372 I defintely suggest opening a new issue for the gap one so that we can track it separately. what other issues ppl are facing when they do WS_EX_LAYOUTRTL and FlowDirection="RightToLeft" on XamlRoot.Content

[ghost1372]

we are working on a good api to act as source of truth for RTL. hang tight. meanwhile, calling WS_EX_LAYOUTRTL and FlowDirection="RightToLeft" on XamlRoot.Content is not fixing it entirely ? @ghost1372 I defintely suggest opening a new issue for the gap one so that we can track it separately. what other issues ppl are facing when they do WS_EX_LAYOUTRTL and FlowDirection="RightToLeft" on XamlRoot.Content

Excellent, thank you. I hope that the new API will work for packaged and unpackage mode. i tested with wasdk v1.4.3 (latest titlebar api) and issue still exists. using WS_EX_LAYOUTRTL with FlowDirection has 2 issues:

i opened i new issue