Revision history [back]

Here are the steps to incorporate a CarouselView in .NET MAUI C#:

Step 1: Create a new .NET MAUI project in Visual Studio or Rider.

Step 2: Add the Microsoft.Maui.Controls package to the project.

Step 3: In the MainPage.xaml file, add the following XAML code to define the CarouselView control:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Microsoft.Maui.Controls;assembly=Microsoft.Maui.Controls.CarouselView"
             x:Class="MyApp.MainPage">
    <controls:CarouselView x:Name="carousel">
    </controls:CarouselView>
</ContentPage>

Step 4: Add the images or other content that you want to display in the CarouselView. You can do this using a DataTemplate, as shown below:

<controls:CarouselView x:Name="carousel">
    <controls:CarouselView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding ImageUrl}" />
        </DataTemplate>
    </controls:CarouselView.ItemTemplate>
</controls:CarouselView>

Step 5: In the MainPage.xaml.cs file, add code to populate the CarouselView with data. For example:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var data = new[] {
            new { ImageUrl = "https://via.placeholder.com/640x360.png?text=Image1" },
            new { ImageUrl = "https://via.placeholder.com/640x360.png?text=Image2" },
            new { ImageUrl = "https://via.placeholder.com/640x360.png?text=Image3" },
        };

        carousel.ItemsSource = data;
    }
}

This code creates an array of anonymous objects, each with an ImageUrl property that points to an image file. The code then sets this array as the ItemsSource property of the CarouselView.

Step 6: Build and run the project to see the CarouselView in action.