How to collapse a header based on SfListView scrolling

[Malcolm Jack]

See attached sample.

Requirement: I'd like to collapse the header view when the listview is scrolled.

The attached code achieves this - but the issue is the listview continues to scroll as well.

How can I collapse the header, and only initiate listview scrolling once the header is fully collapsed?

Attachment: ListViewSample_ef4c7bdf.zip

[Chandrasekar Sampathkumar]

Hi Malcolm, 

Thank you for using Syncfusion products. 

We have checked the reported query “How to collapse a header based on SfListView scrolling” from our end. We would like to let you know that it is not recommended to use Scrolled event to resize Header (Grid) based on scrolling ListView items. To achieve your requirement, we suggest you to use ListView GroupHeader template and set IsStickyHeader=”True”. Refer the following UG documentation for more reference, 

UG Link: https://help.syncfusion.com/xamarin/listview/headerandfooter#sticky-header-and-footer 

Please let us know if you need further assistance. 

Regards, 

Chandrasekar Sampathkumar 

[Malcolm Jack]

Thanks for the suggestion - unfortunately sticky header won't work for my scenario.

The header is above a SFtabview - and each tab contains an SfListview.

if either of the listviews scroll up, the header should animate closed before the listview starts scrolling.

Similar to the following example:

https://github.com/AndreiMisiukevich/XamarinFormsProfilePage

I have a feeling that the answer lies in listening to PanGesture on the broader view....

[Chandrasekar Sampathkumar]

Hi Malcolm, 

Sorry for the inconvenience caused. 

We are currently preparing sample based on your requirement and provide you further details on 12^th May, 2020. We appreciate your patience until then. 

Regards, 

Chandrasekar Sampathkumar 

[Jayaleshwari N]

Hi Malcolm, 

Sorry for the inconvenience caused. 

We have checked the sample using ScrollView as parent to Header(Grid) and ListView with IsScrollingEnabled as False, the header is resizing based on your requirement but it is completely scrolled along with ListView. We also checked by adding PanGestures to ListView ItemTemplate in which we are facing some issues. We are currently validating and provide you the best possible sample level solution on or before May 14, 2020. We appreciate your patience until then. 

Regards, 

Chandrasekar Sampathkumar 

[Chandrasekar Sampathkumar]

Hi Malcolm, 

Sorry for the delay caused. 

We have checked the reported query “How to collapse a header based on SfListView scrolling” from our end. We would like to inform you that you can achieve your requirement using PanGestureRecognizer for the parent element of the Header and SfListView, Please refer the following code snippets for more reference, 

Xaml: Add PanGestureRecognizer for Grid and trigger PanUpdated event. Also, bind InputTransparent for SfListView. 

<Grid BackgroundColor="Blue"> 

    <border:SfBorder Padding="0" BorderWidth="0" CornerRadius="10,10,0,0"> 

        <Grid BackgroundColor="Red"> 

 

            <Grid.GestureRecognizers> 

                <PanGestureRecognizer PanUpdated="PanGestureRecognizer_PanUpdated"/> 

            </Grid.GestureRecognizers> 

 

            <Grid.RowDefinitions> 

                <RowDefinition Height="Auto" /> 

                <RowDefinition Height="*" /> 

                <RowDefinition Height="100" /> 

            </Grid.RowDefinitions> 

 

            <Grid x:Name="_headerView" BackgroundColor="Blue" HeightRequest="200"> 

                <Label FontSize="Large" HorizontalOptions="Center" Text="HEADER" TextColor="White" VerticalOptions="Center" /> 

            </Grid> 

 

            <listviewsample:SfListViewEx x:Name="_listView" Grid.Row="1" Margin="0,20,0,20" AllowSwiping="True" AutoFitMode="Height" DragStartMode="OnHold, OnDragIndicator" ItemDragging="SfListView_ItemDragging" ItemSpacing="0" InputTransparent="{Binding CanPassTouch}" ItemsSource="{Binding ItemCollection}" RightSwipeCommand="{Binding SwipeRightCommand}" SwipeOffset="200"> 

                ... 

Code behind: 

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; 

    } 

} 

We have attached the sample and video in the following links, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewXamarin86965799 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video1661832928 

You can also refer online documentation regarding GestureRecongnizers in Xamarin.Forms from the following link, 

Reference: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/  

Please let us know if you need further assistance. 

Regards, 

Lakshmi Natarajan 

[Malcolm Jack]

... for those checking on on this thread - I've updated the posted example with some improvements (see attached project)

It's still not 100%, but very close to desired behavior.

Attachment: AnimateHeaderOnScroll_277d2ff0.zip

[Chandrasekar Sampathkumar]

Hi Malcolm, 

Thank you for the update. 

We have checked the attached sample and it was really helpful. 

Regards, 

Chandrasekar Sampathkumar