Xamarin.Forms ListView Scrolling Up/Down Detection

download.pngI have a FAB on my page and wanted it to fade when the ListView was scrolled down, and fade back when scrolling up. Here’s an easy way to do it.

I assume you have a image or button on your form called fabCreateButton.

Wire up the OnDisappearing event in your ListView to this in your code behind:

private int _lastItemAppearedIdx = 0;
private bool _lastDirectionWasUp = false;
 
private void ListView_OnItemDisappearing(object sender, ItemVisibilityEventArgs e)
{
    if (e.Item is AddressBookItem item)
    {
        var currentIdx = Model.Items.IndexOf(item);
        if (currentIdx > _lastItemAppearedIdx)
        {
            if (_lastDirectionWasUp == falsefabCreateButton.FadeTo(.3, 250, Easing.Linear);
            _lastDirectionWasUp = true;
        }
        else
        {
            if (_lastDirectionWasUp == truefabCreateButton.FadeTo(1, 250, Easing.Linear);
            _lastDirectionWasUp = false;
        }
        _lastItemAppearedIdx = currentIdx;
    }
}

 

animation.gif

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s