How-to-Customize-SfCarousel-Appearance-in-.NET-MAUI

This section explains how to customize the appearance of the .NET MAUI Carousel View using the SfCarousel control. By customizing the item template, borders, shadows, spacing, colors, and layout, you can create a rich and visually appealing carousel experience.

XAML

Define the SfCarousel control and customize its appearance using a styled container, rounded card layouts, shadow effects, and customized item templates.

        <Border Grid.Row="1"
                StrokeShape="RoundRectangle 24">
            <carousel:SfCarousel x:Name="carousel"
                                 ItemsSource="{Binding ImageCollection}"
                                 ItemHeight="260"
                                 ItemWidth="300"
                                 ItemSpacing="16"
                                 ViewMode="Default"
                                 SelectedIndex="0">
                <carousel:SfCarousel.ItemTemplate>
                    <DataTemplate>
                        <Border BackgroundColor="White"
                                Stroke="#E5E7EB"
                                StrokeThickness="1"
                                Padding="12"
                                StrokeShape="RoundRectangle 24">
                            <Border.Shadow>
                                <Shadow Brush="#000000"
                                        Offset="6,6"
                                        Radius="12"
                                        Opacity="0.15" />
                            </Border.Shadow>

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <Image Source="{Binding Image}"
                                       Aspect="AspectFit"
                                       VerticalOptions="Center"
                                       HorizontalOptions="Center" />

                                <Label Grid.Row="1"
                                       Text="{Binding Title}"
                                       FontSize="18"
                                       FontAttributes="Bold"
                                       HorizontalOptions="Center"
                                       Margin="0,10,0,0"
                                       TextColor="#3B3F5C" />
                            </Grid>
                        </Border>
                    </DataTemplate>
                </carousel:SfCarousel.ItemTemplate>
            </carousel:SfCarousel>
        </Border>

C#

Create a view model that contains the image collection and title information. Bind the collection to the carousel to display customized carousel cards with images, rounded corners, shadows, and captions.

    public class CarouselModel
    {
        public CarouselModel(string imageString, string title)
        {
            Image = imageString;
            Title = title;
        }

        public string Image { get; set; }

        public string Title { get; set; }
    }

    public class CarouselViewModel : INotifyPropertyChanged
    {
        public CarouselViewModel()
        {
            ImageCollection = new ObservableCollection<CarouselModel>
            {
                new("person1.jpg", "Road Runner"),
                new("person2.jpg", "Snowy Trail"),
                new("person3.jpg", "Hilltop Explorer"),
                new("person4.jpg", "Alpine Ski"),
                new("person5.jpg", "Backpack Trek"),
                new("image1.png", "Cliff View")
            };
        }

        private ObservableCollection<CarouselModel> imageCollection = new();

        public ObservableCollection<CarouselModel> ImageCollection
        {
            get => imageCollection;
            set
            {
                imageCollection = value;
                OnPropertyChanged(nameof(ImageCollection));
            }
        }

        public event PropertyChangedEventHandler? PropertyChanged;

        public void OnPropertyChanged(string property)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
        }
    }