2

我的 xamarin.forms 应用程序中有一个轮播视图。我正在尝试实现一个功能，就像 instagram 中的故事一样。那就是当我们点击任何故事时，它会显示在一个旋转的视图中，并在几秒钟后自动滑到下一个故事。

我可以使用计时器在几秒钟后自动滑动轮播视图。我面临的问题是，由于轮播项目的内容是从 URL 加载的（例如：图像），因此视图将在预定义的时间后自动滑动，而不会从 URL 加载内容。我该如何解决这个问题，即：carousal 应该只在内容加载后才滑动。非常感谢任何帮助。

当前的自动幻灯片实现

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

在此处输入图像描述

编辑

我目前的进度。

我使用这样的行为创建了一个自动滑动轮播视图。

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>

并且还为进度条添加了其他属性以进行进度。

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>

我仍然面临的两个问题是

  1. 如何根据从api加载的ffimage连接carousal视图自动滚动？IE; 只有在正确加载图像后才开始自动滚动？
  2. 如何将carousalview连接到progressbar进度preoperty？这样进度条都将加载满并且轮播会滑动？
4

0 回答 0