Introducing the New .NET MAUI Carousel Control
Tags: dotnetmaui, mobile, whatsnew, ui
Published: 2023-12-28 05:37:48

---
title: Introducing the New .NET MAUI Carousel Control
published: true
date: 2023-12-21 12:17:04 UTC
tags: dotnetmaui, mobile, whatsnew, ui
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-carousel-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn6jk0gvr47xrupycv3m.png
---
We are happy to introduce the new Syncfusion [.NET MAUI Carousel](https://www.syncfusion.com/maui-controls/maui-carousel ".NET MAUI Carousel") control in our latest release, Essential Studio [2023 Volume 4](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download "Essential Studio Volume 4 2023"). This control is an intuitive interface for navigating through a collection of views with and without scaling and rotation transformations.

In this blog, we’ll explore the key features of the .NET MAUI Carousel control and the steps to get started with it!

## Key features

The key features of the new .NET MAUI Carousel are:

- [Items arrangement](#Items)
- [On-demand loading](#On)
- [Customization](#Customization)

### <a name="Items">Items arrangement</a>

In .NET MAUI Carousel control, you can display items in 3D or linear arrangements with swipe gestures.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/NET-MAUI-Carousel-Control-with-Different-Visual-Modes.png" alt=".NET MAUI Carousel Control with Different Visual Modes" style="width:100%">

  <figcaption>.NET MAUI Carousel Control with Different Visual Modes</figcaption>

</figure>

### <a name="On">On-demand loading</a>

On-demand loading enables users to load a subset of data in the current viewport and load more items when needed. This helps users increase initial loading performance when populating large items.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/On-demand-Loading-in-.NET-MAUI-Carousel-Control.gif" alt="On-demand Loading in .NET MAUI Carousel Control" style="width:100%">

  <figcaption>On-demand Loading in .NET MAUI Carousel Control</figcaption>

</figure>

### <a name="Customization">Customization</a>

The Carousel control allows you to customize the offset, scaling, rotation angle, and duration. Let’s see them in brief.

#### Offset customization

By applying the desired offset value, you can customize the space between unselected items in the .NET MAUI Carousel control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-the-Offset-in-.NET-MAUI-Carousel-Control.png" alt="Customizing the Offset in .NET MAUI Carousel Control" style="width:100%">

  <figcaption>Customizing the Offset in .NET MAUI Carousel Control</figcaption>

</figure>

### Scaling customization

You can customize the scaling of unselected items in the .NET MAUI Carousel control by applying the desired scaling value.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Scaling-Customization-in-.NET-MAUI-Carousel-Control.png" alt="Scaling Customization in .NET MAUI Carousel Control" style="width:100%">

  <figcaption>Scaling Customization in .NET MAUI Carousel Control</figcaption>

</figure>

#### Rotation angle customization

By applying the desired angle value, you can customize the rotation angle of unselected items in the .NET MAUI Carousel control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-the-Angle-in-the-Rotation-View-of-.NET-MAUI-Carousel-Control.png" alt="Customizing the Rotation Angle in .NET MAUI Carousel Control" style="width:100%">

  <figcaption>Customizing the Rotation Angle in .NET MAUI Carousel Control</figcaption>

</figure>

#### Duration customization

You can customize the time for item transitions by applying the desired duration value
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-Duration-in-.NET-MAUI-Carousel-Control.gif" alt="Customizing Animation Duration in .NET MAUI Carousel Control" style="width:100%">

  <figcaption>Customizing Animation Duration in .NET MAUI Carousel Control</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI Carousel control documentation](https://help.syncfusion.com/maui/carousel-view/overview "Getting started with the .NET MAUI Carousel control").

## Getting started with the .NET MAUI Carousel control

We have seen the key features of the .NET MAUI Carousel control. Let’s learn how to integrate it into your .NET MAUI app and utilize its features by following these steps:

**Step 1:**  Create [a .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app").

**Step 2:**  The Syncfusion .NET MAUI controls are available on [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI Carousel control to your project, open the  **NuGet package manager**  in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"). Search for [Syncfusion.Maui.Carousel ](https://www.nuget.org/packages/Syncfusion.Maui.Carousel "Syncfusion.Maui.Carousel NuGet package")and install it.

**Step 3:**  Now, register the handler for the Syncfusion core in the  **MauiProgram.cs**  file.

```csharp
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;
namespace CarouselSample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp()
                .ConfigureSyncfusionCore()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });
            return builder.Build();
        }
    }
}
```

**Step 4:** Add the Syncfusion.Maui.Carousel namespace in your XAML page.

```xml
xmlns:buttons="clr-namespace:Syncfusion.Maui.Carousel;assembly=Syncfusion.Maui.Carousel"
```

**Step 5:** Create a model view to hold the image data. Refer to the following code example.

```csharp
public class CarouselModel
{
    public CarouselModel(string imageString)
    {
        Image = imageString;
    }
    private string _image;
    public string Image
    {
        get { return _image; }
        set { _image = value; }
    }
}
```

**Step 6:** Populate the carousel items collection in the View model with the image data.

```csharp
public class CarouselViewModel
{
    public CarouselViewModel()
    {
        ImageCollection.Add(new CarouselModel("carousel_touriestplace1.png"));
        ImageCollection.Add(new CarouselModel("carousel_touriestplace2.png"));
        ImageCollection.Add(new CarouselModel("carousel_touriestplace3.png"));
        ImageCollection.Add(new CarouselModel("carousel_touriestplace4.png"));
        ImageCollection.Add(new CarouselModel("carousel_touriestplace5.png"));
    }
    private List imageCollection = new List();
    public List ImageCollection
    {
        get { return imageCollection; }
        set { imageCollection = value; }
    }
}
```

**Step 7:** Finally, initialize the Syncfusion .NET MAUI Carousel control. Populate the items in the default view mode. Refer to the following code example.

```xml
<ContentPage.BindingContext>
 <local:CarouselViewModel/>
</ContentPage.BindingContext>

<ContentPage.Resources>
 <ResourceDictionary>
  <DataTemplate x:Key="itemTemplate">
   <Image Source="{Binding Image}" Aspect="AspectFit"/>
  </DataTemplate>
 </ResourceDictionary>
</ContentPage.Resources>

<ContentPage.Content>
 <carousel:SfCarousel x:Name="carousel"  
                      ItemTemplate="{StaticResource itemTemplate}"
                      ItemsSource="{Binding ImageCollection}" 
                      HeightRequest="400" 
                      WidthRequest="800"/>
</ContentPage.Content>
```

After executing the previous code example, you’ll see output like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Integrating-Carousel-Control-into-a-.NET-MAUI-App.png" alt="Integrating Carousel Control into a .NET MAUI App" style="width:100%">

  <figcaption>Integrating Carousel Control into a .NET MAUI App</figcaption>

</figure>

## GitHub reference

You’ll find the complete getting started example for [.NET MAUI Carousel control on GitHub](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-SfCarousel ".NET MAUI Carousel control GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen the features of the new [.NET MAUI Carousel control](https://www.syncfusion.com/maui-controls/maui-carousel ".NET MAUI Carousel") introduced in the [2023 Volume 4](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download "Essential Studio 2023 Volume 4") release. Check out our [Release Notes](https://www.syncfusion.com/products/release-history "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages to see the other updates in this release, and leave your feedback in the comments section.

For current Syncfusion customers, the newest version of Essential Studio is available from the [license and downloads page](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page"). If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to check out these new features.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-4.aspx "Blog: Syncfusion Essential Studio 2023 Volume 4 Is Here!")
- [Introducing the New .NET MAUI Sunburst Chart Control](https://www.syncfusion.com/blogs/post/dotnet-maui-sunburst-chart.aspx "Blog: Introducing the New .NET MAUI Sunburst Chart Control")
- [Introducing the New .NET MAUI Switch Control](https://www.syncfusion.com/blogs/post/dotnet-maui-switch-control.aspx "Blog: Introducing the New .NET MAUI Switch Control")
- [What’s New in 2023 Volume 4: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/dotnet-maui-charts-2023-volume-4.aspx "Blog: What’s New in 2023 Volume 4: .NET MAUI Charts")