如何在Xamarin Forms的CarouselView中检测手动滑动后的滚动动画完成状态？

我懂你想要的效果——手动滑动CarouselView切换Item后，等滚动动画完全结束再执行自定义动画，官方文档里确实没直接提供这个事件，不过咱们可以用两种方法实现，看你的需求选就行：

方法1：利用Scrolled事件+计时器（简单易上手） #

Scrolled事件会在滚动过程中多次触发，咱们可以通过判断“一段时间内没有再滚动”来间接确定动画已经结束。思路就是每次触发滚动时重置计时器，等计时器超时（说明滚动停了），就执行动画逻辑。

先看代码实现：

private Timer _scrollEndTimer;
// 这个延迟时间可以根据你的CarouselView滚动速度调整，默认200ms足够覆盖大多场景
private const int ScrollDelayMs = 200;

protected override void OnAppearing()
{
    base.OnAppearing();
    _scrollEndTimer = new Timer(ScrollDelayMs);
    _scrollEndTimer.Elapsed += OnScrollEndTimerElapsed;
    _scrollEndTimer.AutoReset = false; // 只触发一次，避免重复执行
}

protected override void OnDisappearing()
{
    _scrollEndTimer?.Dispose(); // 记得清理计时器，避免内存泄漏
    base.OnDisappearing();
}

private void CarouselViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    // 每次滚动就重置计时器
    _scrollEndTimer.Stop();
    _scrollEndTimer.Start();
}

private void OnScrollEndTimerElapsed(object sender, ElapsedEventArgs e)
{
    // 必须切回UI线程操作控件
    Device.BeginInvokeOnMainThread(() =>
    {
        // 这里写你的动画逻辑，比如获取当前Item的View做动画
        var currentView = carouselView.CurrentItem as ContentView;
        if (currentView != null)
        {
            // 示例：给当前View加个淡入动画
            currentView.FadeTo(1, 300);
        }
    });
}

方法2：自定义渲染器（精准控制） #

如果对动画触发时机要求特别严格，不想靠计时器“猜”，那就针对不同平台做自定义渲染器，监听原生控件的滚动结束事件。

第一步：共享项目创建自定义CarouselView #

先封装一个带自定义事件的CarouselView：

public class CustomCarouselView : CarouselView
{
    // 定义滚动动画完成的事件
    public event EventHandler ScrollAnimationCompleted;

    internal void OnScrollAnimationCompleted()
    {
        ScrollAnimationCompleted?.Invoke(this, EventArgs.Empty);
    }
}

然后把XAML里的CarouselView替换成自定义的：

<local:CustomCarouselView x:Name="carouselView" 
                          ScrollAnimationCompleted="CarouselView_ScrollAnimationCompleted"
                          Loop="False" 
                          HorizontalOptions="FillAndExpand" >
    <CustomCarouselView.ItemsSource>
        <x:Array Type="{x:Type ContentView}">
            <ContentView>
                <!-- Defining View 1 -->
            </ContentView>
            <ContentView>
                <!-- Defining View 2 -->
            </ContentView>
            <ContentView>
                <!-- Defining View 3 -->
            </ContentView>
        </x:Array>
    </CustomCarouselView.ItemsSource>
</local:CustomCarouselView>

后台代码里处理这个事件：

private void CarouselView_ScrollAnimationCompleted(object sender, EventArgs e)
{
    // 这里执行你的动画逻辑
}

第二步：Android端自定义渲染器 #

[assembly: ExportRenderer(typeof(CustomCarouselView), typeof(CustomCarouselRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class CustomCarouselRenderer : CarouselViewRenderer
    {
        public CustomCarouselRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<CarouselView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 找到原生RecyclerView控件
                var recyclerView = Control.FindViewById<RecyclerView>(Resource.Id.carouselViewRecyclerView);
                // 添加滚动监听
                recyclerView.AddOnScrollListener(new ScrollEndListener(Element as CustomCarouselView));
            }
        }

        private class ScrollEndListener : RecyclerView.OnScrollListener
        {
            private readonly CustomCarouselView _customCarousel;

            public ScrollEndListener(CustomCarouselView carousel)
            {
                _customCarousel = carousel;
            }

            public override void OnScrollStateChanged(RecyclerView recyclerView, int newState)
            {
                base.OnScrollStateChanged(recyclerView, newState);
                // SCROLL_STATE_IDLE表示滚动完全停止（动画结束）
                if (newState == RecyclerView.ScrollStateIdle)
                {
                    Device.BeginInvokeOnMainThread(() =>
                    {
                        _customCarousel.OnScrollAnimationCompleted();
                    });
                }
            }
        }
    }
}

第三步：iOS端自定义渲染器 #

[assembly: ExportRenderer(typeof(CustomCarouselView), typeof(CustomCarouselRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class CustomCarouselRenderer : CarouselViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<CarouselView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                var collectionView = Control as UICollectionView;
                // 监听原生滚动动画结束事件
                collectionView.DidEndScrollingAnimation += OnScrollAnimationEnded;
            }
        }

        private void OnScrollAnimationEnded(object sender, EventArgs e)
        {
            var customCarousel = Element as CustomCarouselView;
            Device.BeginInvokeOnMainThread(() =>
            {
                customCarousel?.OnScrollAnimationCompleted();
            });
        }
    }
}

选哪个？ #

• 如果只是简单需求，方法1足够用，不用写平台相关代码，省事儿。
• 如果对触发时机要求极高（比如动画必须精准和滚动结束同步），就选方法2，虽然需要多写点代码，但效果更可靠。

内容的提问来源于stack exchange，提问作者Junaid Pathan