Xamarin forms scroll to top of listView which is inside a tabbed page by tapping Tabbed Page Top Bar

Question

Current Situation

I have made a xamarin forms cross-platform app which has a tabbed Page with an infinite scroll listView. The listView is populated in increments of 10 items whenever the last item appears.

The normal behaviour

Usually when we tap the top bar of the tabbed page (the bar containing the tabbed page's Title) for the first time (if we are not viewing the tab at that moment), the app will switch to view that page. Which is fine.

When we tap the top bar for the second time (when tapping the top bar of current viewing tabbed page), nothing happens (unlike twitter, u can tap to scroll to the top )

My Problem

I want to be able to make the listView to scroll back to the top (to the first Item on the list) when the top bar is tapped (something like how twitter does in its android app) while still maintaining all the already loaded items in my listView.

Any idea on how to make that top bar react to the tap to scroll the listView back to the top?

Answer 1

The TabbedPage exposes a CurrentPageChanged event (or you can override OnCurrentPageChanged) that fires only when the selected tab changes, so you'll need to subscribe to that if you want to scroll when the user changes tabs. It doesn't seem like this is needed, but just in case...

Xamarin.Forms doesn't have a built-in event that fires when the already-selected tab is selected a second time. You can make that happen with custom renderers though, by subclassing Xamarin's TabbedPage renderers. I wrote it up here and have a working Xamarin.Forms solution for iOS, Android, and UWP here.

You don't mention the platforms, so assuming you want iOS and Android, the core bits are below.

iOS custom renderer

public class MainTabPageRenderer : TabbedRenderer
{
    private UIKit.UITabBarItem _prevItem;

    public override void ViewDidAppear(bool animated)
    {
        base.ViewDidAppear(animated);

        if (SelectedIndex < TabBar.Items.Length)
            _prevItem = TabBar.Items[SelectedIndex];
    }

    public override void ItemSelected(UIKit.UITabBar tabbar,
                                      UIKit.UITabBarItem item)
    {
        if (_prevItem == item && Element is MainPage)
        {
            // the same tab was selected a second time, so do something
        }
        _prevItem = item;
    }
}

Android custom renderer

public class MainTabPageRenderer : TabbedPageRenderer, TabLayout.IOnTabSelectedListener
{
    void TabLayout.IOnTabSelectedListener.OnTabReselected(TabLayout.Tab tab)
    {
        if (Element is MainPage)
        {
            // the same tab was selected a second time, so do something
        }
    }
}

Once you have captured that event, use the ListView.ScrollTo method to scroll to the top.