Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Xamarin forms: Auto scrolling for CarouselPage children

SreeeeSreeee INMember ✭✭✭✭✭

I have 4 children (page1,page2,page3, and page4) in a CarouselPage, I need to auto-scroll the children in every 3 seconds. Initially, page1 is showing on the UI, then page2 -> page3 -> page 4 again starting from page1.

I have done like below for this feature using OnCurrentPageChanged() and await Task.Delay(TimeSpan.FromSeconds(3));:

protected async override void OnCurrentPageChanged()
{
    base.OnCurrentPageChanged();
    await Task.Delay(TimeSpan.FromSeconds(3));
    int index = Children.IndexOf(CurrentPage);
    if (index == 0)
    {
        CurrentPage = Children[1];
    }
    else if (index == 1)
    {
        CurrentPage = Children[2];
    }
    else if (index == 2)
    {
        CurrentPage = Children[3];
    }
    else if (index == 3)
    {
        CurrentPage = Children[0];
    }
}

The auto-scroll is successful by this approach.

But if I manually scroll the page in between the auto-scroll, then the time delay is reducing. Suddenly(less than 3 sec) the next page is showing on the screen. If I manually swipe the page I need to wait on the page for 3 seconds. How can I solve this issue?

Best Answer

  • ColeXColeX Member, Xamarin Team Xamurai
    edited March 18 Accepted Answer

    Do not put logic into OnCurrentPageChanged method , it will trigger when you manually scroll the page , the method trigger again and again so it looks like the time delay is reducing .

    Correct way

    Set up a timer ,move the logic into the function which would be triggered depending on the interval.

    public YourCarouselPage ()
        {
            InitializeComponent();
    
            Device.StartTimer(TimeSpan.FromSeconds(3), (Func<bool>)(() =>
            {
    
                int index = Children.IndexOf(CurrentPage);
                if (index == 0)
                {
                    CurrentPage = Children[1];
                }
                else if (index == 1)
                {
                    CurrentPage = Children[2];
                }
                else if (index == 2)
                {
                    CurrentPage = Children[3];
                }
                else if (index == 3)
                {
                    CurrentPage = Children[0];
                }
                return true;
            }));
        }
    

    However, this is just a workaround , it does not meet

    If I manually swipe the page I need to wait on the page for 3 seconds

    Maybe you have to use custom renderer, stop and reset timer after end dragging the page ,that's another story..

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited March 18 Accepted Answer

    Do not put logic into OnCurrentPageChanged method , it will trigger when you manually scroll the page , the method trigger again and again so it looks like the time delay is reducing .

    Correct way

    Set up a timer ,move the logic into the function which would be triggered depending on the interval.

    public YourCarouselPage ()
        {
            InitializeComponent();
    
            Device.StartTimer(TimeSpan.FromSeconds(3), (Func<bool>)(() =>
            {
    
                int index = Children.IndexOf(CurrentPage);
                if (index == 0)
                {
                    CurrentPage = Children[1];
                }
                else if (index == 1)
                {
                    CurrentPage = Children[2];
                }
                else if (index == 2)
                {
                    CurrentPage = Children[3];
                }
                else if (index == 3)
                {
                    CurrentPage = Children[0];
                }
                return true;
            }));
        }
    

    However, this is just a workaround , it does not meet

    If I manually swipe the page I need to wait on the page for 3 seconds

    Maybe you have to use custom renderer, stop and reset timer after end dragging the page ,that's another story..

Sign In or Register to comment.