Mac Catalyst window separator line being moved under certain circumstances

[beeradmoore]

Description

So this one is odd and took me some time to narrow down in a repro project to narrow it down.

The short of it is there is a horizontal line on a window that separates the window title area (where close/max/min buttons are) and the content of a ContentPage. Putting a CollectionView (and seems ONLY a CollectionView) on a ContentPage that replaces the default Window.Page property this horizontal line will be moved to the top of the CollectionView.

Demo project has the following main changes from a file -> new project

• Disabled all styles
• Deleted shell

Using Mac Catalyst desktop idom (UIDeviceFamily=6) does not change the issue.

App class will create a new Window, this Window sets its Page to MainPage via its constructor. MainPage has a single button which replaces the Page property of the root window with a new TestPage object with the following code.

App.Current.Windows[0].Page = new TestPage();

NOTE: Using new TestPage() instead of new MainPage() when creating the Window in App causes the issue to not occur. It only happens if we replace the Page of our root Window.

Inside the TestPage we have the following layout.

<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,*">
    <VerticalStackLayout Grid.Column="0" Grid.Row="0">
        <Label Text="Test Label" FontSize="22" />
    </VerticalStackLayout>

    <Grid Grid.Row="1" Grid.Column="1" RowDefinitions="44,*">
        <BoxView Grid.Row="0" BackgroundColor="Red" />
        <CollectionView Grid.Row="1" BackgroundColor="Blue" />
    </Grid>
</Grid>

Up the top we have a VerticalStackLayout and a Label. We just need something to size content above the CollectionView so it can be seen. Under that we have a Grid which has a red BoxView followed by a blue CollectionView.

Changing the first RowDefinitions to be anything but Auto for the first row (eg, * or 50) will cause the issue to not occur. I feel this has something to do with a certain measure not happening.

Changing CollectionView to another type (I tried a ListView) means the problem will also not occur.

The horizontal line in question will appear between the red and blew areas of the page. Here is an example.

If you resize the window, or do any of the things mentioned above for the issue to not occur then the page will look like this.

An interesting observation I alluded to before is that the horizontal line is the separator from the window title bar. Here is a gif of me resizing, so you can see it jump in real time.

(EDIT: macOS 15.4 resizing no longer caused the horizontal line to move)

I tested this on Windows, iOS, and Android, none of them showed the issue.

Steps to Reproduce

1. See the repro project
2. Run on Mac Catalyst
3. Click the button to go to the test page
4. Observe the window separator line not where it should be

Link to public reproduction project repository

https://github.com/beeradmoore/maui-issue-CollectionViewHorizontalLine

Version with bug

9.0.21 SR2.1
(EDIT: Updated sample to 9.0.50, problem still persists)

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

macOS

Affected platform versions

macOS Sequoia 15.2

EDIT: macOS 15.4 no longer has the line adjust go back to were it should be resizing the window.

Did you find any workaround?

Manually set the height of the content above a CollectionView. But considering this is the problem there will be other problems where that won't be acceptable.

Relevant log output

N/A

[piersdeseilligny]

I've noticed the same issue since upgrading to .net 9 - it essentially breaks the UI of any mac catalyst app which contains a CollectionView (which is a very wide range of apps).

[beeradmoore]

Just confirming this is still happening in MAUI 9.0.50

[beeradmoore]

Another update on this. I have narrowed the line itself (I think) down to whatever this view is. in WindowViewController.cs.

If I change that line to

platformTitleBar.TitleVisibility = UITitlebarTitleVisibility.Hidden;

The line never appears (neither does the titlebar). This is not a workaround at all. Also if you change the SeparatorStyle to have a shadow,

platformTitleBar.SeparatorStyle = UITitlebarSeparatorStyle.Shadow;

you can see that the the that is misplaced gets the shadow. Further conforming this is probably the view. I am just not sure why it is getting sized wrong.

I assume it is intended that _iTitleBarRef never has its inner value set to anything that isn't null. Because of this _contentWrapperTopConstraint.Constant = titleBarHeight; is always 0. Setting it to random numbers (eg,. 40 for nice size, 200 for silly size) does not make the problem go away.

The UITitleBar does not have Bounds or Frame properties so I am unsure what is setting its height.

The frame set in UpdateContentWrapperContentFrame does not change its height between the view working and not working so also probably unrelated.

Hey @tj-devel709, I can see you have done commits in this file. Is there any chance you'd know what would be causing this, or know who could be pinged who would?

[beeradmoore]

Re-visiting this I noticed the horizontal line no longer fixes itself when I resize the window. That was with MAUI 9.0.50 and Xcode 16.3. I downgraded to Xcode 16.2 and it did not resolve the issue. The only thing I can think of is macOS 15.4.1 (or is MacCatalyst workload v18.2.9180)

Bumping back to the latest things, Xcode 16.3 and MAUI 9.0.60.

Though workloads are being weird again.

> dotnet workload list  

Workload version: 9.0.203

Installed Workload Id      Manifest Version       Installation Source
---------------------------------------------------------------------
android                    35.0.39/9.0.100        SDK 9.0.200        
ios                        18.2.9180/9.0.100      SDK 9.0.200        
maccatalyst                18.2.9180/9.0.100      SDK 9.0.200        
macos                      15.1.9163/9.0.100      SDK 9.0.200        
maui                       9.0.20/9.0.100         SDK 9.0.200        
maui-maccatalyst           9.0.20/9.0.100         SDK 9.0.200        
wasm-tools                 9.0.2/9.0.100          SDK 9.0.200     

But this does not change if I do update per instructions

dotnet workload install maccatalyst --version 9.0.203

EDIT: I just nuked my entire .NET install. Removed all runtimes and SDKs with the dotnet uninstall tool, nuked ~/.dotnet/, nuked /usr/local/share/dotnet/, (forgot to nuke ~/.nuget/)

Installed my base stuff

sudo dotnet workload install ios maccatalyst android maui

and now

Installed Workload Id      Manifest Version       Installation Source
---------------------------------------------------------------------
android                    35.0.61/9.0.100        SDK 9.0.200        
ios                        18.4.9288/9.0.100      SDK 9.0.200        
maccatalyst                18.4.9288/9.0.100      SDK 9.0.200        
maui                       9.0.14/9.0.100         SDK 9.0.200    

I could see in the pre-nuke stage that Rider was using Mac Catalyst 18.2.9180, and I can confirm now it is using 18.4.9288.

The result is resizing still does not fix it.

Changing RowDefinitions to be anything but Auto also does not fix it. So the issue is seemingly worse than it was before.

[jeremy-visionaid]

Just hit this one too - a vertical line cuts right through the full page width just above a CollectionView on MacCatalyst. It looks awful if the CollectionView isn't a direct child of the page. Interestingly, AFAICT, the opactity of the line isn't affected by the fade animation between pages - it's full black until the animation completes and then it disappears. Testing with dotnet sdk 9.0.203, MAUI 9.0.60.

[jeremy-visionaid]

FWIW, I also tried the CollectionView2 handler but the issue persists

[jeremy-visionaid]

As a workaround, I find that placing the CollectionView in a VerticalStackLayout moves the horizontal line back to the top of the page/window. Not much of a workaround for most people though, since it breaks scrolling the collection.

[beeradmoore]

I was able to confirm that with my sample above, even after updating MAUI to v9.0.80.

<Grid Grid.Row="1" Grid.Column="1" RowDefinitions="44,*">
    <BoxView Grid.Row="0" BackgroundColor="Red" />
    <VerticalStackLayout Grid.Row="1" BackgroundColor="Green">
        <CollectionView BackgroundColor="Blue">
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>First Item</x:String>
                    <x:String>Second Item</x:String>
                    <x:String>Third Item</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </VerticalStackLayout>
</Grid>

However, in my production app this does not work. The rows inside the CollectionView never show.

What is odd about the above is that the CollectionView vertical space will only be as long as the 3 rows. I would have expected to see all blue and no green (even if I added VerticalOptions=Fill) but that was never the case. If that is true I then think we have hit another bug with CollectionView not working inside a VerticalStackLayout.

[jeremy-visionaid]

Some observations from different versions:

8.0.100 template: 2 pixel black line beneath nav bar
8.0.100 CollectionView: 2 pixel black line beneath nav bar
8.0.100 VerticalStackLayout + CollectionView: 1 pixel black line above nav bar and 1 below
9.0.80 template: Sometime 1 above and/or 1 below depending on resize/scroll
9.0.80 CollectionView: 1 pixel black line beneath nav bar
9.0.80 VerticalStackLayout + CollectionView: 1 pixel black line above nav bar

So, seems 9 is slightly better than 8, but I'd expect no black lines in any situation.

[jeremy-visionaid]

OK, I think this is the same thing as this upstream issue:

https://developer.apple.com/forums/thread/717560

And I also find that the separator line cuts through page transition transparency.

Setting UITitlebar.SeparatorStyle to UITitlebarSeparatorStyle.None gets rid of the line.

https://developer.apple.com/documentation/uikit/uititlebarseparatorstyle/automatic?changes=latest__9&language=objc

This could probably be refined a bit, but disabling it entirely is better than it cutting through the middle of a page IMHO:

    static void SetTitlebarSeparatorStyle(UITitlebarSeparatorStyle style)
    {
        foreach (UIWindowScene windowScene in UIApplication.SharedApplication.ConnectedScenes.OfType<UIWindowScene>())
        {
            if (windowScene.Titlebar is UITitlebar titlebar)
                titlebar.SeparatorStyle = style;
        }
    }