XamarinForms sticky header - xamarin

Question

Im searching for a solution represented here as a gif from my designer: enter link description here
Basically, I need a list, with a header, or with a another view (grid, or stacklayout). On a scroll, I need to catch event (scrolling down, scrolling up) and to move list with that header.
Can you suggest me some referrals?
Here is the example code from syncfusion:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/AnimateHeaderOnScroll1119606059

Answer 1

You can achieve your requirement by handling Scrolled event as below,
public MainPage()
{
InitializeComponent();
container = _listView.GetVisualContainer();
_scrollView = _listView.GetScrollView();
_scrollView.Scrolled += ScrollView_Scrolled;
}
private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
scrollOffet = (double)container.GetType().GetRuntimeProperties().First(p => p.Name == "ScrollOffset").GetValue(container);
if (e.ScrollY == 0)
(BindingContext as MainViewModel).CanPassTouch = true;
}
private void PanGestureRecognizer_PanUpdated(object sender, PanUpdatedEventArgs e)
{
if(e.StatusType == GestureStatus.Running)
{
var y = e.TotalY;
//Up scroll
if (y < 0)
{
if (!_originalHeaderHeight.HasValue)
{
_originalHeaderHeight = _headerView.Height;
}
var newHeight = _originalHeaderHeight.Value + y;
_headerView.HeightRequest = newHeight > MIN_HEADER_HEIGHT ? newHeight : MIN_HEADER_HEIGHT;
}
//Down scroll
else
{
if (!_originalHeaderHeight.HasValue)
{
_originalHeaderHeight = _headerView.Height;
}
var newHeight = _originalHeaderHeight.Value + y;
_headerView.HeightRequest = newHeight < MAX_HEADER_HEIGHT ? newHeight : MAX_HEADER_HEIGHT;
}
//Enable InputTransparent for SfListView, to enable the ListView scrolling
//after reaching the Header min/max heights based on scrolling.
if (_headerView.HeightRequest == MIN_HEADER_HEIGHT && y < 0)
(BindingContext as MainViewModel).CanPassTouch = false;
if (_headerView.HeightRequest == MAX_HEADER_HEIGHT && scrollOffet > 0)
(BindingContext as MainViewModel).CanPassTouch = false;
}
}
Sample