CarouselView with IndicatorView

.Net MAUI – The Latest CarouselView with IndicatorView

Posted on by Learn Mobile Development

CarouselView is a view for presenting data in scrollable forms where users can swipe to move through a collection of items. By default, CarouselView displays its item horizontally. Basically, We are using CarouselView for showing the banners in mobile applications.

What is IndicatorView?

IndicatorView in MAUI is a view which displays indicators that represent the numbers of items and current position of a CarouselView.

In this article, I’m going to show you how to use CarouselView with IndicatorView in .Net MAUI.

 CarouselView with IndicatorView article also available in Xamarin Forms click here to see.

Let’s Start

In this article you will see :

  • Normal CarouselView with IndicatorView
  • CarouselView with PeekAreaInsets
  • Add animation to CarouselView
  • CarouselView with vertical orientation
  • CarouselView with DataTemplateSelector

1 – Setting up the UI

1.1 – Normal CarouselView with IndicatorView

<!--  Carousel 1st  -->
<Frame
    Padding="15"
    HeightRequest="260"
    IsClippedToBounds="True">
          <StackLayout Spacing="0">
                <Label Text="Normal Carousel" />
                <CarouselView
                       x:Name="carouselView1"
                       HeightRequest="200"
                       IndicatorView="IV1"
                       ItemsSource="{Binding ImageList1}"
                       PeekAreaInsets="0">
                       <CarouselView.ItemsLayout>
                             <LinearItemsLayout
                                    Orientation="Horizontal"
                                    SnapPointsAlignment="Center"
                                    SnapPointsType="MandatorySingle" />
                       </CarouselView.ItemsLayout>
                       <CarouselView.ItemTemplate>
                             <DataTemplate>
                                   <StackLayout>
                                        <Frame
                                            Margin="5"
                                            Padding="0"
                                            CornerRadius="0"
                                            HasShadow="True"
                                            IsClippedToBounds="True">

                                            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                                                <Image
                                                    x:Name="BannerImage"
                                                    Aspect="AspectFill"
                                                    HeightRequest="170"
                                                    HorizontalOptions="FillAndExpand"
                                                    IsVisible="{Binding IsLoading}"
                                                    Source="{Binding ImageUrl}"
                                                    VerticalOptions="FillAndExpand" />

                                                <StackLayout
                                                    BackgroundColor="#55000000"
                                                    HeightRequest="40"
                                                    VerticalOptions="EndAndExpand">

                                                    <Label
                                                        FontAttributes="Bold"
                                                        FontSize="14"
                                                        HorizontalOptions="CenterAndExpand"
                                                        LineBreakMode="TailTruncation"
                                                        Text="{Binding ImageName}"
                                                        TextColor="White"
                                                        VerticalOptions="CenterAndExpand" />

                                                </StackLayout>
                                            </Grid>
                                       </Frame>
                                 </StackLayout>
                           </DataTemplate>
                    </CarouselView.ItemTemplate>
             </CarouselView>

             <IndicatorView
                   x:Name="IV1"
                   HorizontalOptions="Center"
                   IndicatorColor="LightGray"
                   IndicatorSize="10"
                   SelectedIndicatorColor="DarkGray" />
      </StackLayout>
</Frame>

1.2 – CarouselView with PeekAreaInsets 

<!--  Carousel 2nd  -->
<Frame
     Padding="15"
     HeightRequest="260"
     IsClippedToBounds="True">
           <StackLayout>
                  <Label Text="Carousel Animation with PeekAreaInsets" />
                  <CarouselView
                         x:Name="carouselView2"
                         HeightRequest="200"
                         HorizontalOptions="FillAndExpand"
                         IndicatorView="IV2"
                         ItemsSource="{Binding ImageList2}"
                         PeekAreaInsets="30">

                        <CarouselView.ItemTemplate>
                             <DataTemplate>
                                 <carouselItem:CarouselItemView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
                             </DataTemplate>
                        </CarouselView.ItemTemplate>

                   </CarouselView>
                   <IndicatorView
                         x:Name="IV2"
                         HorizontalOptions="Center"
                         IndicatorColor="LightGray"
                         IndicatorsShape="Square"
                         SelectedIndicatorColor="{StaticResource ColorPrimary}" />
           </StackLayout>
</Frame>
  • Use xmlns for accessing CarouselItemView.xaml , CarouselItemView2.xaml, CarouselItemView3.xaml and CarouselViewTemplateSelector.cs 
xmlns:carouselItem="clr-namespace:MAUICarouselViewSample"
xmlns:template="clr-namespace:MAUICarouselViewSample"

1.2.1 – CarouselItemView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<StackLayout
    x:Class="MAUICarouselViewSample.CarouselItemView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Frame
        x:Name="FrameContainer"
        Margin="15"
        Padding="0"
        CornerRadius="20"
        HasShadow="True"
        IsClippedToBounds="True">

        <Grid>

            <Image
                x:Name="BannerImage"
                Aspect="AspectFill"
                HeightRequest="170"
                IsVisible="{Binding IsLoading}"
                Source="{Binding ImageUrl}" />

            <StackLayout
                BackgroundColor="#55000000"
                HeightRequest="40"
                VerticalOptions="EndAndExpand">

                <Label
                    FontAttributes="Bold"
                    FontSize="14"
                    HorizontalOptions="CenterAndExpand"
                    LineBreakMode="TailTruncation"
                    Text="{Binding ImageName}"
                    TextColor="White"
                    VerticalOptions="CenterAndExpand" />

            </StackLayout>

        </Grid>

    </Frame>
</StackLayout>

1.2.2 – Adding animation to CarouselItemView.xaml.cs

using Microsoft.Maui.Graphics;

namespace MAUICarouselViewSample;

public partial class CarouselItemView : StackLayout
{
    private double _scale = 0;

    public CarouselItemView()
    {
        InitializeComponent();

        _scale = FrameContainer.Scale;
    }

    protected override void OnParentSet()
    {
        base.OnParentSet();

        if (Parent is CarouselView carouselView)
        {
            carouselView.CurrentItemChanged += CarouselView_CurrentItemChanged;
            carouselView.Scrolled += CarouselView_Scrolled;
        }
    }

    private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
    {
        if (e.HorizontalDelta < 0)
        {
            await FrameContainer.RotateTo(15);
            await FrameContainer.RotateTo(0);
        }
        else
        {
            await FrameContainer.RotateTo(-15);
            await FrameContainer.RotateTo(0);
        }
    }

    private async void CarouselView_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
    {
        await FrameContainer.ScaleTo(_scale * .5, 500);
        await FrameContainer.ScaleTo(_scale, 500);
    }
}

1.3 – Add animation to CarouselView 

<!--  Carousel 3rd  -->
<Frame
      Padding="15"
      HeightRequest="260"
      IsClippedToBounds="True">
            <StackLayout>
                  <Label Text="Carousel with Animation" />
                  <CarouselView
                         HeightRequest="200"
                         x:Name="carouselView3"
                         HorizontalOptions="FillAndExpand"
                         IndicatorView="IV3"
                         ItemsSource="{Binding ImageList3}">

                         <CarouselView.ItemTemplate>
                              <DataTemplate>
                                  <carouselItem:CarouselItemView2 />
                              </DataTemplate>
                         </CarouselView.ItemTemplate>

                   </CarouselView>
                   <IndicatorView
                          x:Name="IV3"
                          HorizontalOptions="Center"
                          IndicatorColor="LightGray"
                          MaximumVisible="5"
                          SelectedIndicatorColor="{StaticResource ColorBlack}" />
         </StackLayout>
</Frame>

<!--  Carousel 4th  -->
<Frame
      Padding="15"
      HeightRequest="260"
      IsClippedToBounds="True">
          <StackLayout>
                 <Label Text="Carousel with Animation" />
                 <CarouselView
                        x:Name="carouselView6"
                        HeightRequest="200"
                        HorizontalOptions="FillAndExpand"
                        IndicatorView="IV4"
                        ItemsSource="{Binding ImageList6}">

                         <CarouselView.ItemTemplate>
                              <DataTemplate>
                                  <carouselItem:CarouselItemView3 />
                              </DataTemplate>
                         </CarouselView.ItemTemplate>

                 </CarouselView>
                 <IndicatorView
                        x:Name="IV4"
                        HorizontalOptions="Center"
                        IndicatorColor="LightGray"
                        MaximumVisible="5"
                        SelectedIndicatorColor="{StaticResource ColorPrimary}" />
         </StackLayout>
</Frame>

1.3.1 – CarouselItemView2.xaml

<?xml version="1.0" encoding="utf-8" ?>
<StackLayout
    x:Class="MAUICarouselViewSample.CarouselItemView2"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Frame
        x:Name="FrameContainer"
        Margin="15"
        Padding="0"
        CornerRadius="20"
        HasShadow="True"
        HorizontalOptions="Fill"
        IsClippedToBounds="True"
        VerticalOptions="Fill">

        <Grid>
            <Image
                x:Name="BannerImage"
                Aspect="AspectFill"
                HeightRequest="170"
                HorizontalOptions="Fill"
                IsVisible="{Binding IsLoading}"
                Source="{Binding ImageUrl}"
                VerticalOptions="Fill" />

            <StackLayout
                BackgroundColor="#55000000"
                HeightRequest="40"
                VerticalOptions="EndAndExpand">

                <Label
                    FontAttributes="Bold"
                    FontSize="14"
                    HorizontalOptions="CenterAndExpand"
                    LineBreakMode="TailTruncation"
                    Text="{Binding ImageName}"
                    TextColor="White"
                    VerticalOptions="CenterAndExpand" />

            </StackLayout>

        </Grid>

    </Frame>

</StackLayout>

1.3.2 – Adding animation to CarouselItemView2.xaml.cs

namespace MAUICarouselViewSample;

public partial class CarouselItemView2 : StackLayout
{
    private double _scale = 0;

    public CarouselItemView2()
    {
        InitializeComponent();

        _scale = FrameContainer.Scale;
    }

    protected override void OnParentSet()
    {
        base.OnParentSet();

        if (Parent is CarouselView carouselView)
        {
            carouselView.Scrolled += CarouselView_Scrolled;
        }
    }

    private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
    {
        await FrameContainer.ScaleTo(0.7, 100);
        await FrameContainer.ScaleTo(_scale * .7, 100);
        await FrameContainer.ScaleTo(_scale, 100);
    }

}

1.3.3 – CarouselItemView3.xaml

<?xml version="1.0" encoding="utf-8" ?>
<StackLayout
    x:Class="MAUICarouselViewSample.CarouselItemView3"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Frame
        x:Name="FrameContainer"
        Margin="15"
        Padding="0"
        CornerRadius="20"
        HasShadow="True"
        IsClippedToBounds="True">

        <Grid>

            <Image
                x:Name="BannerImage"
                Aspect="AspectFill"
                HeightRequest="170"
                IsVisible="{Binding IsLoading}"
                Source="{Binding ImageUrl}" />

            <StackLayout
                BackgroundColor="#55000000"
                HeightRequest="40"
                VerticalOptions="EndAndExpand">

                <Label
                    FontAttributes="Bold"
                    FontSize="14"
                    HorizontalOptions="CenterAndExpand"
                    LineBreakMode="TailTruncation"
                    Text="{Binding ImageName}"
                    TextColor="White"
                    VerticalOptions="CenterAndExpand" />

            </StackLayout>

        </Grid>

    </Frame>

</StackLayout>

1.3.4 – Adding animation to CarouselItemView3.xaml.cs

namespace MAUICarouselViewSample;

public partial class CarouselItemView3 : StackLayout
{
    private double _scale = 0;

    public CarouselItemView3()
    {
        InitializeComponent();

        _scale = FrameContainer.Scale;
    }

    protected override void OnParentSet()
    {
        base.OnParentSet();

        if (Parent is CarouselView carouselView)
        {
            carouselView.Scrolled += CarouselView_Scrolled;
        }
    }

    private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
    {
        await FrameContainer.ScaleTo(_scale * 1.1, 400);
        await FrameContainer.ScaleTo(_scale, 400);
    }
}

1.4 – CarouselView with vertical orientation

<!--  Carousel 5th  -->
<Frame
      Padding="15"
      HeightRequest="260"
      IsClippedToBounds="True">
              <StackLayout>
                     <Label Text="Carousel with Vertical Orientation" />
                     <CarouselView
                            x:Name="carouselView4"
                            HorizontalOptions="FillAndExpand"
                            IndicatorView="IV5"
                            HeightRequest="200"
                            ItemsSource="{Binding ImageList4}"
                            PeekAreaInsets="0">

                            <CarouselView.ItemsLayout>
                                <LinearItemsLayout
                                    Orientation="Vertical"
                                    SnapPointsAlignment="Center"
                                    SnapPointsType="MandatorySingle" />
                            </CarouselView.ItemsLayout>

                            <CarouselView.ItemTemplate>
                                <DataTemplate>
                                    <carouselItem:CarouselItemView2 />
                                </DataTemplate>
                            </CarouselView.ItemTemplate>

                     </CarouselView>
                     <IndicatorView
                            x:Name="IV5"
                            HorizontalOptions="Center"
                            IndicatorColor="LightGray"
                            IndicatorsShape="Square"
                            SelectedIndicatorColor="Red" />
           </StackLayout>
</Frame>

1.5 – CarouselView with DataTemplateSelector

<!--  Carousel 6th  -->
<Frame
      Padding="15"
      HeightRequest="260"
      IsClippedToBounds="True">
                    <StackLayout>
                        <Label Text="Carousel with TemplateSelector" />
                        <CarouselView
                            x:Name="carouselView5"
                            HorizontalOptions="FillAndExpand"
                            IndicatorView="IV6"
                            HeightRequest="200"
                            ItemTemplate="{StaticResource TemplateSelector}"
                            ItemsSource="{Binding ImageList5}"
                            PeekAreaInsets="10">

                            <CarouselView.ItemsLayout>
                                <LinearItemsLayout
                                    Orientation="Horizontal"
                                    SnapPointsAlignment="Center"
                                    SnapPointsType="MandatorySingle" />
                            </CarouselView.ItemsLayout>

                            <!--  CarouselView EmptyView  -->
                            <CarouselView.EmptyView>
                                <StackLayout
                                    HorizontalOptions="CenterAndExpand"
                                    Orientation="Vertical"
                                    Spacing="10"
                                    VerticalOptions="CenterAndExpand">

                                    <ActivityIndicator
                                        HeightRequest="30"
                                        HorizontalOptions="CenterAndExpand"
                                        IsRunning="True"
                                        VerticalOptions="CenterAndExpand"
                                        WidthRequest="30"
                                        Color="Gray" />

                                    <Label
                                        FontSize="16"
                                        HorizontalOptions="CenterAndExpand"
                                        Text="Loading Banner List..."
                                        TextColor="Gray"
                                        VerticalOptions="StartAndExpand" />

                                </StackLayout>
                            </CarouselView.EmptyView>

                        </CarouselView>
                        <IndicatorView
                            x:Name="IV6"
                            HorizontalOptions="Center"
                            IndicatorColor="LightGray"
                            IndicatorsShape="Square"
                            SelectedIndicatorColor="Red" />
           </StackLayout>
</Frame>

1.6 – ContentPage ResourceDictionary

 <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource Primary}" />
                <Setter Property="FontSize" Value="14" />
                <Setter Property="Margin" Value="10,0,10,0" />
                <Setter Property="FontAttributes" Value="Bold" />
            </Style>

            <Style TargetType="Frame">
                <Setter Property="HasShadow" Value="False" />
                <Setter Property="Padding" Value="15" />
                <Setter Property="BorderColor" Value="{StaticResource Primary}" />
            </Style>

        </ResourceDictionary>

        <!--  CarouselView Data Template Selector  -->
        <DataTemplate x:Key="CurveTemplate">
            <StackLayout>
                <Frame
                    Margin="5"
                    Padding="1"
                    BorderColor="{StaticResource ColorBlack}"
                    CornerRadius="30"
                    HasShadow="True"
                    IsClippedToBounds="True">

                    <Grid>

                        <Image
                            x:Name="BannerImage"
                            Aspect="AspectFill"
                            HeightRequest="170"
                            IsVisible="{Binding IsLoading}"
                            Source="{Binding ImageUrl}" />

                        <StackLayout
                            BackgroundColor="#55000000"
                            HeightRequest="40"
                            VerticalOptions="EndAndExpand">

                            <Label
                                FontAttributes="Bold"
                                FontSize="14"
                                HorizontalOptions="CenterAndExpand"
                                LineBreakMode="TailTruncation"
                                Text="{Binding ImageName}"
                                TextColor="White"
                                VerticalOptions="CenterAndExpand" />

                        </StackLayout>

                    </Grid>

                </Frame>
            </StackLayout>
        </DataTemplate>

        <DataTemplate x:Key="SquareTemplate">
            <StackLayout>
                <Frame
                    Margin="5"
                    Padding="1"
                    BorderColor="{StaticResource ColorBlack}"
                    CornerRadius="0"
                    HasShadow="True"
                    IsClippedToBounds="True">

                    <Grid>

                        <Image
                            x:Name="BannerImage"
                            Aspect="AspectFill"
                            HeightRequest="170"
                            IsVisible="{Binding IsLoading}"
                            Source="{Binding ImageUrl}" />

                        <StackLayout
                            BackgroundColor="#55000000"
                            HeightRequest="40"
                            VerticalOptions="EndAndExpand">

                            <Label
                                FontAttributes="Bold"
                                FontSize="14"
                                HorizontalOptions="CenterAndExpand"
                                LineBreakMode="TailTruncation"
                                Text="{Binding ImageName}"
                                TextColor="White"
                                VerticalOptions="CenterAndExpand" />

                        </StackLayout>

                    </Grid>

                </Frame>
            </StackLayout>
        </DataTemplate>

        <template:CarouselViewTemplateSelector
            x:Key="TemplateSelector"
            CurveTemplate="{StaticResource CurveTemplate}"
            SquareTemplate="{StaticResource SquareTemplate}" />
</ContentPage.Resources>

2 – Creating a CarouselViewTemplateSelector.cs class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MAUICarouselViewSample
{
    public class CarouselViewTemplateSelector : DataTemplateSelector
    {
        public DataTemplate CurveTemplate { get; set; }
        public DataTemplate SquareTemplate { get; set; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            BannerImage banner = (BannerImage)item;
            return banner.IsSquareView ? SquareTemplate : CurveTemplate;
        }
    }
}

Now, we have completed the UI part.

3 – Setting up the ViewModel

3.1 – Create a MainPageViewModel.cs class

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MAUICarouselViewSample
{
    public class MainPageViewModel : BaseViewModel
    {
        private ObservableCollection<BannerImage> _imageList1;
        private ObservableCollection<BannerImage> _imageList2;
        private ObservableCollection<BannerImage> _imageList3;
        private ObservableCollection<BannerImage> _imageList4;
        private ObservableCollection<BannerImage> _imageList5;
        private ObservableCollection<BannerImage> _imageList6;

        public MainPageViewModel()
        {
            Application.Current.Dispatcher.Dispatch(() =>
            {
                ImageList1 = GetImageList1();
                ImageList2 = GetImageList2();
                ImageList3 = GetImageList3();
                ImageList4 = GetImageList4();
                ImageList6 = GetImageList6();

                // Load 5th Banner list after 10 Second
                Task.Delay(10000).ContinueWith(t => Get5thBannerList());
            });
        }

        private void Get5thBannerList()
        {
            ImageList5 = GetImageList5();
        }

        public ObservableCollection<BannerImage> ImageList1
        {
            get => _imageList1;

            set
            {
                _imageList1 = value;

                OnPropertyChanged();
            }
        }

        public ObservableCollection<BannerImage> ImageList2
        {
            get => _imageList2;

            set
            {
                _imageList2 = value;

                OnPropertyChanged();
            }
        }

        public ObservableCollection<BannerImage> ImageList3
        {
            get => _imageList3;

            set
            {
                _imageList3 = value;

                OnPropertyChanged();
            }
        }

        public ObservableCollection<BannerImage> ImageList4
        {
            get => _imageList4;

            set
            {
                _imageList4 = value;

                OnPropertyChanged();
            }
        }

        public ObservableCollection<BannerImage> ImageList5
        {
            get => _imageList5;

            set
            {
                _imageList5 = value;

                OnPropertyChanged();
            }
        }

        public ObservableCollection<BannerImage> ImageList6
        {
            get => _imageList6;

            set
            {
                _imageList6 = value;

                OnPropertyChanged();
            }
        }

    }
}

3.2 – Creating a BaseViewModel.cs class

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace MAUICarouselViewSample
{
    public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public ObservableCollection<BannerImage> GetImageList1()
        {
            ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>();

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "one.jpg",
                ImageUrl = ImageSource.FromFile("one.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "two.jpg",
                ImageUrl = ImageSource.FromFile("two.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "three.jpg",
                ImageUrl = ImageSource.FromFile("three.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "four.jpg",
                ImageUrl = ImageSource.FromFile("four.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "five.jpg",
                ImageUrl = ImageSource.FromFile("five.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "six.jpg",
                ImageUrl = ImageSource.FromFile("six.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "Image pexels-photo-257840",
                ImageUrl = ImageSource.FromFile("gif4.gif")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#F0048A"),
                ImageName = "Image pexels-photo-257840",
                ImageUrl = ImageSource.FromFile("gif5.gif")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#D7DBDD"),
                ImageName = "Image img5",
                ImageUrl = ImageSource.FromFile("img5.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#F7DC6F"),
                ImageName = "Image img6",
                ImageUrl = ImageSource.FromFile("img6.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#7DCEA0"),
                ImageName = "Image img7",
                ImageUrl = ImageSource.FromFile("img7.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#7FB3D5"),
                ImageName = "Image img8",
                ImageUrl = ImageSource.FromFile("img8.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#C39BD3"),
                ImageName = "Image img9",
                ImageUrl = ImageSource.FromFile("img9.jpeg")
            });

            return ImageList;
        }

        public ObservableCollection<BannerImage> GetImageList2()
        {
            ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>();

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "five.jpg",
                ImageUrl = ImageSource.FromFile("five.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "six.jpg",
                ImageUrl = ImageSource.FromFile("six.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img9",
                ImageUrl = ImageSource.FromFile("img9.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "one.jpg",
                ImageUrl = ImageSource.FromFile("one.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "two.jpg",
                ImageUrl = ImageSource.FromFile("two.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "three.jpg",
                ImageUrl = ImageSource.FromFile("three.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                HeaderColor = Color.FromArgb("#00FF00"),
                ImageName = "four.jpg",
                ImageUrl = ImageSource.FromFile("four.jpg")
            });
            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img6",
                ImageUrl = ImageSource.FromFile("img6.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img7",
                ImageUrl = ImageSource.FromFile("img7.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img8",
                ImageUrl = ImageSource.FromFile("img8.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img5",
                ImageUrl = ImageSource.FromFile("img5.jpeg")
            });

            return ImageList;
        }

        public ObservableCollection<BannerImage> GetImageList3()
        {
            ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>();

            ImageList.Add(new BannerImage()
            {
                ImageName = "seven.jpg",
                ImageUrl = ImageSource.FromFile("seven.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "three.jpg",
                ImageUrl = ImageSource.FromFile("three.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img7",
                ImageUrl = ImageSource.FromFile("img7.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img6",
                ImageUrl = ImageSource.FromFile("img6.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "four.jpg",
                ImageUrl = ImageSource.FromFile("four.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img8",
                ImageUrl = ImageSource.FromFile("img8.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img9",
                ImageUrl = ImageSource.FromFile("img9.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "one.jpg",
                ImageUrl = ImageSource.FromFile("one.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img5",
                ImageUrl = ImageSource.FromFile("img5.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "six.jpg",
                ImageUrl = ImageSource.FromFile("six.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "five.jpg",
                ImageUrl = ImageSource.FromFile("five.jpg")
            });

            return ImageList;
        }

        public ObservableCollection<BannerImage> GetImageList4()
        {
            ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>();

            ImageList.Add(new BannerImage()
            {
                ImageName = "three.jpg",
                ImageUrl = ImageSource.FromFile("three.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img5",
                ImageUrl = ImageSource.FromFile("img5.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "two.jpg",
                ImageUrl = ImageSource.FromFile("two.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img8",
                ImageUrl = ImageSource.FromFile("img8.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img9",
                ImageUrl = ImageSource.FromFile("img9.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "four.jpg",
                ImageUrl = ImageSource.FromFile("four.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img7",
                ImageUrl = ImageSource.FromFile("img7.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "Image img6",
                ImageUrl = ImageSource.FromFile("img6.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                ImageName = "five.jpg",
                ImageUrl = ImageSource.FromFile("five.jpg")
            });

            return ImageList;
        }

        public ObservableCollection<BannerImage> GetImageList5()
        {
            ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>();

            ImageList.Add(new BannerImage()
            {
                IsSquareView = false,
                ImageName = "one.jpg",
                ImageUrl = ImageSource.FromFile("one.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = true,
                ImageName = "two.jpg",
                ImageUrl = ImageSource.FromFile("two.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = false,
                ImageName = "three.jpg",
                ImageUrl = ImageSource.FromFile("three.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = true,
                ImageName = "four.jpg",
                ImageUrl = ImageSource.FromFile("four.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = false,
                ImageName = "five.jpg",
                ImageUrl = ImageSource.FromFile("five.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = true,
                ImageName = "six.jpg",
                ImageUrl = ImageSource.FromFile("six.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = false,
                ImageName = "seven.jpg",
                ImageUrl = ImageSource.FromFile("seven.jpg")
            });

            return ImageList;
        }

        public ObservableCollection<BannerImage> GetImageList6()
        {
            ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>();

            ImageList.Add(new BannerImage()
            {
                IsSquareView = true,
                ImageName = "Image img9",
                ImageUrl = ImageSource.FromFile("img9.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = false,
                ImageName = "Image img5",
                ImageUrl = ImageSource.FromFile("img5.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = true,
                ImageName = "Image img8",
                ImageUrl = ImageSource.FromFile("img8.jpeg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = false,
                ImageName = "Image img7",
                ImageUrl = ImageSource.FromFile("img7.jpg")
            });

            ImageList.Add(new BannerImage()
            {
                IsSquareView = true,
                ImageName = "Image img6",
                ImageUrl = ImageSource.FromFile("img6.jpg")
            });

            return ImageList;
        }
    }
}

Now, We have completed the coding, Let’s try to run the application.

4 – Result

That’s all for now!

You can check the full source code here.

Happy Coding! 😀

You may also like

CarouselView With IndicatorView

Xamarin Forms – The Latest CarouselView with IndicatorView

Item Reordering in MAUI

How to use drag and drop gesture to CollectionView in MAUI

Post Views: 327
Share article with

Leave a Reply

Your email address will not be published. Required fields are marked *