[Bug] Xamarin iOS Large Title Scroll Velocity Snapping

[zachwooding]

Description

On iOS, using the large title with a scrollable view does not behave as expected. Instead of smoothly transitioning to the small title while scrolling, the large title bar will snap quickly to the small title.

Steps to Reproduce

1. Use a large title on any view that is scrollable (TableView, ScrollView, CollectionView)
2. Large title display mode = automatic
3. Scroll the page

Expected Behavior

Actual Behavior

Basic Information

• Version with issue: 5.0.0.2291
• Last known good version: Unknown
• Platform Target Frameworks:
  • iOS: 15.0

Workaround

1. Use a custom renderer to set the LayoutConstraints of the scrollable view (Doesn't work)
   Another user recommended doing this but it did not fix the problem.

[assembly: ExportRenderer(typeof(ContentPage), typeof(MyBarRenderer))]
namespace FormsApp.iOS
{
    internal class MyBarRenderer : PageRenderer
    {
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            ExtendedLayoutIncludesOpaqueBars = true;

            foreach (UIView view in View.Subviews)
            {
                if (view is UIScrollView sc)
                {
                    NSLayoutConstraint.ActivateConstraints(new NSLayoutConstraint[] {
                        sc.TopAnchor.ConstraintEqualTo(View.TopAnchor),
                        sc.LeftAnchor.ConstraintEqualTo(View.LeftAnchor),
                        sc.BottomAnchor.ConstraintEqualTo(View.BottomAnchor),
                        sc.RightAnchor.ConstraintEqualTo(View.RightAnchor),
                    });
                }
            }
        }
    }
}

2. Use native iOS ViewControllers
   Create a UITableViewController in a custom renderer then convert the Xamarin TableView element to a UITableView and set it to the TableView property of the UITableViewController then PushViewController to the new UITableViewController. This method is not recommended but it did create the desired scroll animation.

[brett-estabrook]

@jfversluis - I'm having this issue too, is there anything more you need to investigate?

[brett-estabrook]

Thought I'd link to the stackoverflow where this started: https://stackoverflow.com/questions/70423989/xamarin-ios-large-tittle-scroll-velocity-snapping-issue

[jfversluis]

Thanks for all the input here! I think it's clear what the problem is. I'll be very honest though, I'm not sure how high this ranks in terms of priority. But I'll see if I can give it a few minutes of my time and if there is an easy fix to this.

[AlleSchonWeg]

As a workaround you must set this properties in you NavigationPage:

ios:NavigationPage.IsNavigationBarTranslucent="True"
ios:NavigationPage.PrefersLargeTitles="True"

In your ContentPage (MyPage):

ios:Page.LargeTitleDisplay="Always"
ios:Page.UseSafeArea="False"

Then the content must look like this:

<ContentPage.Content>
	<ScrollView Orientation="Neither">	
		<AbsoluteLayout>
			<ListView  />
			<Frame />
		</AbsoluteLayout>
	</ScrollView>
</ContentPage.Content>

The ScrollView is needed. If you delete it, the content is "under" the NavigationBar. Setting UseSafeArea = true or IsNavigationBarTranslucent = false brings the snapping effect back. The content inside the ScrollView is just an example.

var navPage = new NavigationPage(new MyPage());
await _navigation.PushModalAsync(navPage);

The snapping effect appears also in the XF controls samples in the repository.