Carousal view autoslide after content load - Xamarin.forms

Viewed 92

I have a carousal view in my xamarin.forms app. I am trying to implement a feature just like stories in instagram. That is when we tap any of story, it will show inside a carousal sort of view and auto slide to next story after certain seconds.

I can auto slide the carousal view after certain seconds using timer. The problem I am facing is since the content of carousal items is loaded from URL (eg: image), the view will auto slide after the predefined time without the loading the content from URL. How can I tackle this problem, ie: the carousal should only slide after the content is loaded. Any help is really appreciated.

Current auto slide implementation

  Device.StartTimer(TimeSpan.FromSeconds(7), (Func<bool>)(() =>
                {
                    Device.BeginInvokeOnMainThread(() =>
                    {
                        StatusCarousal.Position = (StatusCarousal.Position + 1) % statusList.Count;
                    });             
                   
                    return false;
                }));

enter image description here

EDIT

My current progress.

I have created an auto sliding carousalview using Behaviors like this.

public class AutoscrollCarouselBehavior : Behavior<CarouselView.FormsPlugin.Abstractions.CarouselViewControl>
    {
       
        public int Delay { get; set; } = 7000;
        
        private bool runTimer;
        private CarouselViewControl attachedCarousel;

        protected override void OnAttachedTo(CarouselViewControl bindable)
        {
            base.OnAttachedTo(bindable);
            runTimer = true;
            attachedCarousel = bindable;

            Device.StartTimer(TimeSpan.FromMilliseconds(Delay), () =>
            {
                MoveCarousel();
                return runTimer;
            });

        }

        protected override void OnDetachingFrom(CarouselViewControl bindable)
        {
            runTimer = false;
            base.OnDetachingFrom(bindable);
        }

        void MoveCarousel()
        {
            if (attachedCarousel.ItemsSource != null)
            {
                if (attachedCarousel.Position < attachedCarousel.ItemsSource.GetCount() - 1)
                {
                    attachedCarousel.Position++;
                }
                else
                {
                    attachedCarousel.Position = 0;
                }
            }
        }
    }

Xaml

  <cv:CarouselViewControl x:Name="StatusCarousal" 
                ItemsSource="{Binding}"                                           
                ItemTemplate="{StaticResource personDataTemplateSelector}"          
                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  >
                        <cv:CarouselViewControl.Behaviors>
                            <local:AutoscrollCarouselBehavior  />
                        </cv:CarouselViewControl.Behaviors>
                    </cv:CarouselViewControl>

And also added additional properties for progressbar to progress.

public static class AttachedProperties
{
   public static BindableProperty AnimatedProgressProperty =
      BindableProperty.CreateAttached("AnimatedProgress",
                                      typeof(double),
                                      typeof(ProgressBar),
                                      0.0d,
                                      BindingMode.OneWay,
                                      propertyChanged: (b, o, n) => 
                                      ProgressBarProgressChanged((ProgressBar)b, (double)n));

   private static void ProgressBarProgressChanged(ProgressBar progressBar, double progress)
   {
      ViewExtensions.CancelAnimations(progressBar);
      progressBar.ProgressTo((double)progress, 800, Easing.SinOut);
   }
}

Xaml

<ProgressBar  HeightRequest="1.5"
                     x:Name="StatusProgressBar" 
                      local:AttachedProperties.AnimatedProgressAnimationTime=""                 
                      local:AttachedProperties.AnimatedProgress=""                 
                      HorizontalOptions="FillAndExpand" VerticalOptions="Start"
            ProgressColor="Snow" Margin="10,5,10,0"></ProgressBar>

The two problem still I am facing is

  1. How to connect the carousal view auto scroll according to the ffimage loading from api? ie; only start the auto scroll after loading the image properly ?
  2. How to connect the carousalview to the progressbar progress preoperty? so that both the progressbar will load into full and the carousal gets slide?
0 Answers
Related