Carousal view autoslide after content load - Xamarin.forms - xamarin

Question

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;
}));
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
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 ?
How to connect the carousalview to the progressbar progress preoperty? so
that both the progressbar will load into full and the carousal gets slide?