MAUI中如何实现原Xamarin.Forms的CarouselPage轮播功能？

1. CarouselView 是否支持添加子页面？ #

CarouselView是视图控件而非页面容器，不能像CarouselPage那样直接添加独立子页面。你需要在单个ContentPage中使用CarouselView实现引导页，通过绑定数据源或定义ItemTemplate来创建每个引导项。

2. 实现自动轮播引导页示例 #

XAML布局代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Views.OnboardingPage">
    <CarouselView x:Name="OnboardingCarousel"
                  IndicatorView="OnboardingIndicator"
                  Loop="True">
        <!-- 直接定义4个引导页的图片源 -->
        <CarouselView.ItemsSource>
            <x:Array Type="{x:Type ImageSource}">
                <FileImageSource>Feature1.png</FileImageSource>
                <FileImageSource>Feature2.png</FileImageSource>
                <FileImageSource>Feature3.png</FileImageSource>
                <FileImageSource>Feature4.png</FileImageSource>
            </x:Array>
        </CarouselView.ItemsSource>
        <!-- 定义每个引导项的模板 -->
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}"
                       Aspect="AspectFill" />
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

    <!-- 轮播指示器 -->
    <IndicatorView x:Name="OnboardingIndicator"
                   HorizontalOptions="Center"
                   VerticalOptions="End"
                   Margin="0,0,0,30" />
</ContentPage>

后台代码实现自动切换 #

using System.Timers;

namespace YourApp.Views;

public partial class OnboardingPage : ContentPage
{
    private Timer _autoScrollTimer;

    public OnboardingPage()
    {
        InitializeComponent();
        SetupAutoScroll();
    }

    private void SetupAutoScroll()
    {
        _autoScrollTimer = new Timer(5000); // 设置5秒切换间隔
        _autoScrollTimer.Elapsed += (s, e) =>
        {
            // 切换到主线程更新UI
            MainThread.BeginInvokeOnMainThread(() =>
            {
                var items = OnboardingCarousel.ItemsSource.Cast<object>().ToList();
                if (OnboardingCarousel.CurrentItem == items.Last())
                {
                    OnboardingCarousel.ScrollTo(items.First(), ScrollToPosition.Start);
                }
                else
                {
                    OnboardingCarousel.ScrollToNext();
                }
            });
        };
        _autoScrollTimer.Start();
    }

    // 页面消失时停止定时器，避免内存泄漏
    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        _autoScrollTimer?.Stop();
        _autoScrollTimer?.Dispose();
    }
}

如果需要更复杂的引导项布局（比如图片+文字），可修改ItemTemplate：

<DataTemplate>
    <StackLayout>
        <Image Source="{Binding ImagePath}" Aspect="AspectFill" />
        <Label Text="{Binding Title}" FontSize="Large" Margin="10" />
        <Label Text="{Binding Description}" FontSize="Medium" Margin="10" />
    </StackLayout>
</DataTemplate>

之后创建对应的模型类，将数据源替换为模型实例集合即可。

3. MAUI 弃用 CarouselPage 的原因 #

• 职责更清晰：MAUI强调视图与页面分离，CarouselView是可嵌入任意页面的控件，能把轮播区域放在页面任意位置，而非强制整个页面为轮播容器。
• 性能更优：CarouselView采用视图复用机制，相比CarouselPage加载多个完整页面的方式，内存占用和渲染效率更低，尤其适合引导页这类简单场景。
• 功能更灵活：CarouselView支持横向/纵向滚动、自定义指示器、循环滚动等更多自定义场景，功能覆盖并超过CarouselPage，符合MAUI统一控件生态的设计思路。

内容的提问来源于stack exchange，提问作者Matthew Pans