How to implement CarouselPage in MAUI

Question

I have implemented mock up pages in my xamarin forms application using CarouselPage like below. I have 4 child pages and on each page I will show my app's core feature using an image and it will auto swipe to next page after 5 seconds.

MockUpHomePage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    ios:Page.UseSafeArea="true"
    BackgroundColor="#e6e6e6"
    x:Class="MyProjectName.Views.MockUp.MockUpHomePage">
    
</CarouselPage>

MockUpHomePage.xaml.cs

public partial class MockUpHomePage : CarouselPage
{
    bool isStart = true;
    public MockUpHomePage()
    {
        InitializeComponent();
        this.Children.Add(new MockUp1());
        this.Children.Add(new MockUp2());
        this.Children.Add(new MockUp3());
        this.Children.Add(new MockUp4());

        Device.StartTimer(new TimeSpan(0, 0, 5), () =>
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                int index = Children.IndexOf(CurrentPage);
                if (index == 0)
                {
                    CurrentPage = Children[1];
                }
                else if (index == 1)
                {
                    CurrentPage = Children[2];
                }
                else if (index == 2)
                {
                    CurrentPage = Children[3];
                }
                else if (index == 3)
                {
                    CurrentPage = Children[0];
                }
            });
            return isStart; // runs again, or false to stop
        });
    }

    protected override void OnDisappearing()
    {
        try
        {
            isStart = false;
            base.OnDisappearing();
        }
        catch (Exception ex)
        {
            Debug.WriteLine("Exception:>>" + ex);
        }
    }
}

MockUp1.xaml

<?xml version="1.0" encoding="utf-8" ?>
<renderer:CustomPage  
    xmlns:renderer="clr-namespace:CallerBee.Renderer"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    BackgroundColor="#e6e6e6"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    ios:Page.UseSafeArea="true"
    x:Class="MyProject.Views.MockUp.MockUp1">

    <ContentPage.Content>
        <Grid BackgroundColor="#e6e6e6">
            <Grid.RowDefinitions>
                <RowDefinition Height="8*"/>
                <RowDefinition Height="92*"/>
            </Grid.RowDefinitions>

            <StackLayout
                Grid.Row="0"
                BackgroundColor="White"
                Orientation="Horizontal">

                <Image 
                    Margin="20,5,5,5"
                    HorizontalOptions="Start"
                    VerticalOptions="CenterAndExpand"
                    Source="ic_light_logo_xx.png">
                    <Image.HeightRequest>
                        <OnIdiom x:TypeArguments="x:Double">
                            <OnIdiom.Phone>30</OnIdiom.Phone>
                            <OnIdiom.Tablet>45</OnIdiom.Tablet>
                            <OnIdiom.Desktop>30</OnIdiom.Desktop>
                        </OnIdiom>
                    </Image.HeightRequest>
                </Image>

                <StackLayout 
                    Margin="5,5,25,5"
                    Padding="5"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="EndAndExpand">

                    <Label 
                        Text="Login"
                        TextColor="Black"
                        FontAttributes="Bold" >
                        <Label.FontSize>
                            <OnIdiom x:TypeArguments="x:Double">
                                <OnIdiom.Phone>18</OnIdiom.Phone>
                                <OnIdiom.Tablet>27</OnIdiom.Tablet>
                                <OnIdiom.Desktop>18</OnIdiom.Desktop>
                            </OnIdiom>
                        </Label.FontSize>
                    </Label>

                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer 
                            Tapped="ShowLoginPage"
                            NumberOfTapsRequired="1">
                        </TapGestureRecognizer>
                    </StackLayout.GestureRecognizers>
                </StackLayout>
            </StackLayout>

            <Image
                x:Name="mockup1_image"
                Grid.Row="1"
                Margin="0,0,0,10"
                HorizontalOptions="FillAndExpand"/>
        </Grid>
    </ContentPage.Content>
</renderer:CustomPage>

MockUp1.xaml.cs

public partial class MockUp1 : CustomPage
{
    public MockUp1()
    {
        InitializeComponent();
        if (Device.Idiom == TargetIdiom.Phone)
        {
            mockup1_image.Source = "ic_mockup1_xx.jpg";
        }
        else if (Device.Idiom == TargetIdiom.Tablet)
        {
            mockup1_image.Source = "ic_mockup1_tablet_xx.jpg";
        }
    }

    private async void ShowLoginPage(object sender, EventArgs e)
    {
        try
        {
            await Navigation.PushModalAsync(new LoginPage());
        }
        catch (Exception ex)
        {
            Debug.WriteLine("Exception:>>" + ex);
        }
    }
}

When I migrated this xamarin forms app to MAUI, I found CarouselView supersedes the CarouselPage. I tried using CarouselView to implement the same feature, but I didn't get a clear idea about the implementation. Is CarouselView takes children like CarouselPage? Do I need to implement it on a single page?

Why MAUI deprecated the CarouselPage, it is a very useful feature.

Answer 1

Hello,

If you migrate from Carousel Page to CarouselView and implement the same feature. Here are two key points need to be noted.

1. How to display different templates for different items?

You can choose item appearance at runtime with DataTemplateSelector. For more details, you can check this document about Choose item appearance at runtime.

1. How to automate switching between pages?

You can do this by carouselView.ScrollTo(index); , I add currentpageIndex, carouselview's page will be changed by the value of currentPageIndex

int currentPageIndex=0
MainThread.BeginInvokeOnMainThread(() =>
		{			
			if (currentMockUp.Index < 3)
			{
				carouselView.ScrollTo(currentPageIndex++);
			}
			else if (currentMockUp.Index == 3)
			{
                currentPageIndex=0
				carouselView.ScrollTo(currentPageIndex);
			}
		});

Here is a document about Scrolling an item at an index into view

As note: please move layout from Mockup to the ContentView.

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.