{"id":355,"date":"2022-11-30T15:35:25","date_gmt":"2022-11-30T15:35:25","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=355"},"modified":"2023-01-18T16:57:03","modified_gmt":"2023-01-18T16:57:03","slug":"carouselview-with-indicatorview-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/11\/30\/carouselview-with-indicatorview-maui\/","title":{"rendered":".Net MAUI &#8211; The Latest CarouselView\u00a0with\u00a0IndicatorView"},"content":{"rendered":"\n<p><strong>CarouselView<\/strong>&nbsp;is a view for presenting data in scrollable forms where users can swipe to move through a collection of items. By default,&nbsp;<strong>CarouselView<\/strong>&nbsp;displays its item&nbsp;<strong>horizontally<\/strong>. Basically, We are using&nbsp;<strong>CarouselView<\/strong>&nbsp;for showing the banners in mobile applications.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>What is IndicatorView?<\/strong><\/p>\n\n\n\n<p><strong>IndicatorView&nbsp;in<\/strong> <strong>MAUI<\/strong> is a view which displays indicators that represent the numbers of items and current position of&nbsp;a <strong>CarouselView<\/strong>.<\/p>\n\n\n\n<p>In this article, I\u2019m going to show you how to use&nbsp;<strong>CarouselView<\/strong>&nbsp;with&nbsp;<strong>IndicatorView<\/strong> in <strong>.Net MAUI<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>&nbsp;<em><strong>CarouselView<\/strong> with <strong>IndicatorView<\/strong> article also available in <strong>Xamarin Forms<\/strong> click <a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/11\/24\/carouselview-with-indicatorview\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a> to see.<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p style=\"font-size:25px\"><strong>Let\u2019s Start <\/strong><\/p>\n\n\n\n<p>In this article you will see :<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<ul class=\"wp-block-list\">\n<li>Normal <strong>CarouselView<\/strong> with <strong>IndicatorView<\/strong><\/li>\n\n\n\n<li>CarouselView with <strong>PeekAreaInsets<\/strong><\/li>\n\n\n\n<li>Add <strong>animation<\/strong> to CarouselView<\/li>\n\n\n\n<li>CarouselView with <strong>vertical<\/strong> orientation<\/li>\n\n\n\n<li>CarouselView with <strong>DataTemplateSelector<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1 &#8211; Setting up the UI<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.1 &#8211; Normal CarouselView with IndicatorView<\/strong><\/p>\n\n\n\n<p><\/p>\n<\/div><\/div>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--  Carousel 1st  -->\n&lt;Frame\n    Padding=\"15\"\n    HeightRequest=\"260\"\n    IsClippedToBounds=\"True\">\n          &lt;StackLayout Spacing=\"0\">\n                &lt;Label Text=\"Normal Carousel\" \/>\n                &lt;CarouselView\n                       x:Name=\"carouselView1\"\n                       HeightRequest=\"200\"\n                       IndicatorView=\"IV1\"\n                       ItemsSource=\"{Binding ImageList1}\"\n                       PeekAreaInsets=\"0\">\n                       &lt;CarouselView.ItemsLayout>\n                             &lt;LinearItemsLayout\n                                    Orientation=\"Horizontal\"\n                                    SnapPointsAlignment=\"Center\"\n                                    SnapPointsType=\"MandatorySingle\" \/>\n                       &lt;\/CarouselView.ItemsLayout>\n                       &lt;CarouselView.ItemTemplate>\n                             &lt;DataTemplate>\n                                   &lt;StackLayout>\n                                        &lt;Frame\n                                            Margin=\"5\"\n                                            Padding=\"0\"\n                                            CornerRadius=\"0\"\n                                            HasShadow=\"True\"\n                                            IsClippedToBounds=\"True\">\n\n                                            &lt;Grid HorizontalOptions=\"FillAndExpand\" VerticalOptions=\"FillAndExpand\">\n\n                                                &lt;Image\n                                                    x:Name=\"BannerImage\"\n                                                    Aspect=\"AspectFill\"\n                                                    HeightRequest=\"170\"\n                                                    HorizontalOptions=\"FillAndExpand\"\n                                                    IsVisible=\"{Binding IsLoading}\"\n                                                    Source=\"{Binding ImageUrl}\"\n                                                    VerticalOptions=\"FillAndExpand\" \/>\n\n                                                &lt;StackLayout\n                                                    BackgroundColor=\"#55000000\"\n                                                    HeightRequest=\"40\"\n                                                    VerticalOptions=\"EndAndExpand\">\n\n                                                    &lt;Label\n                                                        FontAttributes=\"Bold\"\n                                                        FontSize=\"14\"\n                                                        HorizontalOptions=\"CenterAndExpand\"\n                                                        LineBreakMode=\"TailTruncation\"\n                                                        Text=\"{Binding ImageName}\"\n                                                        TextColor=\"White\"\n                                                        VerticalOptions=\"CenterAndExpand\" \/>\n\n                                                &lt;\/StackLayout>\n                                            &lt;\/Grid>\n                                       &lt;\/Frame>\n                                 &lt;\/StackLayout>\n                           &lt;\/DataTemplate>\n                    &lt;\/CarouselView.ItemTemplate>\n             &lt;\/CarouselView>\n\n             &lt;IndicatorView\n                   x:Name=\"IV1\"\n                   HorizontalOptions=\"Center\"\n                   IndicatorColor=\"LightGray\"\n                   IndicatorSize=\"10\"\n                   SelectedIndicatorColor=\"DarkGray\" \/>\n      &lt;\/StackLayout>\n&lt;\/Frame><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.2 &#8211; CarouselView with PeekAreaInsets<\/strong> <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--  Carousel 2nd  -->\n&lt;Frame\n     Padding=\"15\"\n     HeightRequest=\"260\"\n     IsClippedToBounds=\"True\">\n           &lt;StackLayout>\n                  &lt;Label Text=\"Carousel Animation with PeekAreaInsets\" \/>\n                  &lt;CarouselView\n                         x:Name=\"carouselView2\"\n                         HeightRequest=\"200\"\n                         HorizontalOptions=\"FillAndExpand\"\n                         IndicatorView=\"IV2\"\n                         ItemsSource=\"{Binding ImageList2}\"\n                         PeekAreaInsets=\"30\">\n\n                        &lt;CarouselView.ItemTemplate>\n                             &lt;DataTemplate>\n                                 &lt;carouselItem:CarouselItemView HorizontalOptions=\"FillAndExpand\" VerticalOptions=\"FillAndExpand\" \/>\n                             &lt;\/DataTemplate>\n                        &lt;\/CarouselView.ItemTemplate>\n\n                   &lt;\/CarouselView>\n                   &lt;IndicatorView\n                         x:Name=\"IV2\"\n                         HorizontalOptions=\"Center\"\n                         IndicatorColor=\"LightGray\"\n                         IndicatorsShape=\"Square\"\n                         SelectedIndicatorColor=\"{StaticResource ColorPrimary}\" \/>\n           &lt;\/StackLayout>\n&lt;\/Frame><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <strong>xmlns<\/strong> for accessing <strong>CarouselItemView<\/strong>.<strong>xaml<\/strong> , <strong>CarouselItemView2.xaml<\/strong>, <strong>CarouselItemView3.xaml<\/strong> and <strong>CarouselViewTemplateSelector.cs <\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">xmlns:carouselItem=\"clr-namespace:MAUICarouselViewSample\"\nxmlns:template=\"clr-namespace:MAUICarouselViewSample\"<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.2.1 &#8211; CarouselItemView.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"utf-8\" ?>\n&lt;StackLayout\n    x:Class=\"MAUICarouselViewSample.CarouselItemView\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\">\n    &lt;Frame\n        x:Name=\"FrameContainer\"\n        Margin=\"15\"\n        Padding=\"0\"\n        CornerRadius=\"20\"\n        HasShadow=\"True\"\n        IsClippedToBounds=\"True\">\n\n        &lt;Grid>\n\n            &lt;Image\n                x:Name=\"BannerImage\"\n                Aspect=\"AspectFill\"\n                HeightRequest=\"170\"\n                IsVisible=\"{Binding IsLoading}\"\n                Source=\"{Binding ImageUrl}\" \/>\n\n            &lt;StackLayout\n                BackgroundColor=\"#55000000\"\n                HeightRequest=\"40\"\n                VerticalOptions=\"EndAndExpand\">\n\n                &lt;Label\n                    FontAttributes=\"Bold\"\n                    FontSize=\"14\"\n                    HorizontalOptions=\"CenterAndExpand\"\n                    LineBreakMode=\"TailTruncation\"\n                    Text=\"{Binding ImageName}\"\n                    TextColor=\"White\"\n                    VerticalOptions=\"CenterAndExpand\" \/>\n\n            &lt;\/StackLayout>\n\n        &lt;\/Grid>\n\n    &lt;\/Frame>\n&lt;\/StackLayout><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.2.2 &#8211; Adding animation to CarouselItemView.xaml.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using Microsoft.Maui.Graphics;\n\nnamespace MAUICarouselViewSample;\n\npublic partial class CarouselItemView : StackLayout\n{\n    private double _scale = 0;\n\n    public CarouselItemView()\n    {\n        InitializeComponent();\n\n        _scale = FrameContainer.Scale;\n    }\n\n    protected override void OnParentSet()\n    {\n        base.OnParentSet();\n\n        if (Parent is CarouselView carouselView)\n        {\n            carouselView.CurrentItemChanged += CarouselView_CurrentItemChanged;\n            carouselView.Scrolled += CarouselView_Scrolled;\n        }\n    }\n\n    private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e)\n    {\n        if (e.HorizontalDelta &lt; 0)\n        {\n            await FrameContainer.RotateTo(15);\n            await FrameContainer.RotateTo(0);\n        }\n        else\n        {\n            await FrameContainer.RotateTo(-15);\n            await FrameContainer.RotateTo(0);\n        }\n    }\n\n    private async void CarouselView_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)\n    {\n        await FrameContainer.ScaleTo(_scale * .5, 500);\n        await FrameContainer.ScaleTo(_scale, 500);\n    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.3 &#8211; Add animation to CarouselView <\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--  Carousel 3rd  -->\n&lt;Frame\n      Padding=\"15\"\n      HeightRequest=\"260\"\n      IsClippedToBounds=\"True\">\n            &lt;StackLayout>\n                  &lt;Label Text=\"Carousel with Animation\" \/>\n                  &lt;CarouselView\n                         HeightRequest=\"200\"\n                         x:Name=\"carouselView3\"\n                         HorizontalOptions=\"FillAndExpand\"\n                         IndicatorView=\"IV3\"\n                         ItemsSource=\"{Binding ImageList3}\">\n\n                         &lt;CarouselView.ItemTemplate>\n                              &lt;DataTemplate>\n                                  &lt;carouselItem:CarouselItemView2 \/>\n                              &lt;\/DataTemplate>\n                         &lt;\/CarouselView.ItemTemplate>\n\n                   &lt;\/CarouselView>\n                   &lt;IndicatorView\n                          x:Name=\"IV3\"\n                          HorizontalOptions=\"Center\"\n                          IndicatorColor=\"LightGray\"\n                          MaximumVisible=\"5\"\n                          SelectedIndicatorColor=\"{StaticResource ColorBlack}\" \/>\n         &lt;\/StackLayout>\n&lt;\/Frame>\n\n&lt;!--  Carousel 4th  -->\n&lt;Frame\n      Padding=\"15\"\n      HeightRequest=\"260\"\n      IsClippedToBounds=\"True\">\n          &lt;StackLayout>\n                 &lt;Label Text=\"Carousel with Animation\" \/>\n                 &lt;CarouselView\n                        x:Name=\"carouselView6\"\n                        HeightRequest=\"200\"\n                        HorizontalOptions=\"FillAndExpand\"\n                        IndicatorView=\"IV4\"\n                        ItemsSource=\"{Binding ImageList6}\">\n\n                         &lt;CarouselView.ItemTemplate>\n                              &lt;DataTemplate>\n                                  &lt;carouselItem:CarouselItemView3 \/>\n                              &lt;\/DataTemplate>\n                         &lt;\/CarouselView.ItemTemplate>\n\n                 &lt;\/CarouselView>\n                 &lt;IndicatorView\n                        x:Name=\"IV4\"\n                        HorizontalOptions=\"Center\"\n                        IndicatorColor=\"LightGray\"\n                        MaximumVisible=\"5\"\n                        SelectedIndicatorColor=\"{StaticResource ColorPrimary}\" \/>\n         &lt;\/StackLayout>\n&lt;\/Frame><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.3.1 &#8211; CarouselItemView2.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"utf-8\" ?>\n&lt;StackLayout\n    x:Class=\"MAUICarouselViewSample.CarouselItemView2\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\">\n\n    &lt;Frame\n        x:Name=\"FrameContainer\"\n        Margin=\"15\"\n        Padding=\"0\"\n        CornerRadius=\"20\"\n        HasShadow=\"True\"\n        HorizontalOptions=\"Fill\"\n        IsClippedToBounds=\"True\"\n        VerticalOptions=\"Fill\">\n\n        &lt;Grid>\n            &lt;Image\n                x:Name=\"BannerImage\"\n                Aspect=\"AspectFill\"\n                HeightRequest=\"170\"\n                HorizontalOptions=\"Fill\"\n                IsVisible=\"{Binding IsLoading}\"\n                Source=\"{Binding ImageUrl}\"\n                VerticalOptions=\"Fill\" \/>\n\n            &lt;StackLayout\n                BackgroundColor=\"#55000000\"\n                HeightRequest=\"40\"\n                VerticalOptions=\"EndAndExpand\">\n\n                &lt;Label\n                    FontAttributes=\"Bold\"\n                    FontSize=\"14\"\n                    HorizontalOptions=\"CenterAndExpand\"\n                    LineBreakMode=\"TailTruncation\"\n                    Text=\"{Binding ImageName}\"\n                    TextColor=\"White\"\n                    VerticalOptions=\"CenterAndExpand\" \/>\n\n            &lt;\/StackLayout>\n\n        &lt;\/Grid>\n\n    &lt;\/Frame>\n\n&lt;\/StackLayout><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.3.2 &#8211; Adding animation to CarouselItemView2.xaml.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">namespace MAUICarouselViewSample;\n\npublic partial class CarouselItemView2 : StackLayout\n{\n    private double _scale = 0;\n\n    public CarouselItemView2()\n    {\n        InitializeComponent();\n\n        _scale = FrameContainer.Scale;\n    }\n\n    protected override void OnParentSet()\n    {\n        base.OnParentSet();\n\n        if (Parent is CarouselView carouselView)\n        {\n            carouselView.Scrolled += CarouselView_Scrolled;\n        }\n    }\n\n    private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e)\n    {\n        await FrameContainer.ScaleTo(0.7, 100);\n        await FrameContainer.ScaleTo(_scale * .7, 100);\n        await FrameContainer.ScaleTo(_scale, 100);\n    }\n\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.3.3 &#8211; CarouselItemView3.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"utf-8\" ?>\n&lt;StackLayout\n    x:Class=\"MAUICarouselViewSample.CarouselItemView3\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\">\n    &lt;Frame\n        x:Name=\"FrameContainer\"\n        Margin=\"15\"\n        Padding=\"0\"\n        CornerRadius=\"20\"\n        HasShadow=\"True\"\n        IsClippedToBounds=\"True\">\n\n        &lt;Grid>\n\n            &lt;Image\n                x:Name=\"BannerImage\"\n                Aspect=\"AspectFill\"\n                HeightRequest=\"170\"\n                IsVisible=\"{Binding IsLoading}\"\n                Source=\"{Binding ImageUrl}\" \/>\n\n            &lt;StackLayout\n                BackgroundColor=\"#55000000\"\n                HeightRequest=\"40\"\n                VerticalOptions=\"EndAndExpand\">\n\n                &lt;Label\n                    FontAttributes=\"Bold\"\n                    FontSize=\"14\"\n                    HorizontalOptions=\"CenterAndExpand\"\n                    LineBreakMode=\"TailTruncation\"\n                    Text=\"{Binding ImageName}\"\n                    TextColor=\"White\"\n                    VerticalOptions=\"CenterAndExpand\" \/>\n\n            &lt;\/StackLayout>\n\n        &lt;\/Grid>\n\n    &lt;\/Frame>\n\n&lt;\/StackLayout><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.3.4 &#8211; Adding animation to CarouselItemView3.xaml.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">namespace MAUICarouselViewSample;\n\npublic partial class CarouselItemView3 : StackLayout\n{\n    private double _scale = 0;\n\n    public CarouselItemView3()\n    {\n        InitializeComponent();\n\n        _scale = FrameContainer.Scale;\n    }\n\n    protected override void OnParentSet()\n    {\n        base.OnParentSet();\n\n        if (Parent is CarouselView carouselView)\n        {\n            carouselView.Scrolled += CarouselView_Scrolled;\n        }\n    }\n\n    private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e)\n    {\n        await FrameContainer.ScaleTo(_scale * 1.1, 400);\n        await FrameContainer.ScaleTo(_scale, 400);\n    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.4 &#8211; CarouselView with vertical orientation<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--  Carousel 5th  -->\n&lt;Frame\n      Padding=\"15\"\n      HeightRequest=\"260\"\n      IsClippedToBounds=\"True\">\n              &lt;StackLayout>\n                     &lt;Label Text=\"Carousel with Vertical Orientation\" \/>\n                     &lt;CarouselView\n                            x:Name=\"carouselView4\"\n                            HorizontalOptions=\"FillAndExpand\"\n                            IndicatorView=\"IV5\"\n                            HeightRequest=\"200\"\n                            ItemsSource=\"{Binding ImageList4}\"\n                            PeekAreaInsets=\"0\">\n\n                            &lt;CarouselView.ItemsLayout>\n                                &lt;LinearItemsLayout\n                                    Orientation=\"Vertical\"\n                                    SnapPointsAlignment=\"Center\"\n                                    SnapPointsType=\"MandatorySingle\" \/>\n                            &lt;\/CarouselView.ItemsLayout>\n\n                            &lt;CarouselView.ItemTemplate>\n                                &lt;DataTemplate>\n                                    &lt;carouselItem:CarouselItemView2 \/>\n                                &lt;\/DataTemplate>\n                            &lt;\/CarouselView.ItemTemplate>\n\n                     &lt;\/CarouselView>\n                     &lt;IndicatorView\n                            x:Name=\"IV5\"\n                            HorizontalOptions=\"Center\"\n                            IndicatorColor=\"LightGray\"\n                            IndicatorsShape=\"Square\"\n                            SelectedIndicatorColor=\"Red\" \/>\n           &lt;\/StackLayout>\n&lt;\/Frame><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.5 &#8211; CarouselView with&nbsp;DataTemplateSelector<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--  Carousel 6th  -->\n&lt;Frame\n      Padding=\"15\"\n      HeightRequest=\"260\"\n      IsClippedToBounds=\"True\">\n                    &lt;StackLayout>\n                        &lt;Label Text=\"Carousel with TemplateSelector\" \/>\n                        &lt;CarouselView\n                            x:Name=\"carouselView5\"\n                            HorizontalOptions=\"FillAndExpand\"\n                            IndicatorView=\"IV6\"\n                            HeightRequest=\"200\"\n                            ItemTemplate=\"{StaticResource TemplateSelector}\"\n                            ItemsSource=\"{Binding ImageList5}\"\n                            PeekAreaInsets=\"10\">\n\n                            &lt;CarouselView.ItemsLayout>\n                                &lt;LinearItemsLayout\n                                    Orientation=\"Horizontal\"\n                                    SnapPointsAlignment=\"Center\"\n                                    SnapPointsType=\"MandatorySingle\" \/>\n                            &lt;\/CarouselView.ItemsLayout>\n\n                            &lt;!--  CarouselView EmptyView  -->\n                            &lt;CarouselView.EmptyView>\n                                &lt;StackLayout\n                                    HorizontalOptions=\"CenterAndExpand\"\n                                    Orientation=\"Vertical\"\n                                    Spacing=\"10\"\n                                    VerticalOptions=\"CenterAndExpand\">\n\n                                    &lt;ActivityIndicator\n                                        HeightRequest=\"30\"\n                                        HorizontalOptions=\"CenterAndExpand\"\n                                        IsRunning=\"True\"\n                                        VerticalOptions=\"CenterAndExpand\"\n                                        WidthRequest=\"30\"\n                                        Color=\"Gray\" \/>\n\n                                    &lt;Label\n                                        FontSize=\"16\"\n                                        HorizontalOptions=\"CenterAndExpand\"\n                                        Text=\"Loading Banner List...\"\n                                        TextColor=\"Gray\"\n                                        VerticalOptions=\"StartAndExpand\" \/>\n\n                                &lt;\/StackLayout>\n                            &lt;\/CarouselView.EmptyView>\n\n                        &lt;\/CarouselView>\n                        &lt;IndicatorView\n                            x:Name=\"IV6\"\n                            HorizontalOptions=\"Center\"\n                            IndicatorColor=\"LightGray\"\n                            IndicatorsShape=\"Square\"\n                            SelectedIndicatorColor=\"Red\" \/>\n           &lt;\/StackLayout>\n&lt;\/Frame><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.6 &#8211; ContentPage<\/strong> <strong>ResourceDictionary<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"> &lt;ContentPage.Resources>\n        &lt;ResourceDictionary>\n            &lt;Style TargetType=\"Label\">\n                &lt;Setter Property=\"TextColor\" Value=\"{StaticResource Primary}\" \/>\n                &lt;Setter Property=\"FontSize\" Value=\"14\" \/>\n                &lt;Setter Property=\"Margin\" Value=\"10,0,10,0\" \/>\n                &lt;Setter Property=\"FontAttributes\" Value=\"Bold\" \/>\n            &lt;\/Style>\n\n            &lt;Style TargetType=\"Frame\">\n                &lt;Setter Property=\"HasShadow\" Value=\"False\" \/>\n                &lt;Setter Property=\"Padding\" Value=\"15\" \/>\n                &lt;Setter Property=\"BorderColor\" Value=\"{StaticResource Primary}\" \/>\n            &lt;\/Style>\n\n        &lt;\/ResourceDictionary>\n\n        &lt;!--  CarouselView Data Template Selector  -->\n        &lt;DataTemplate x:Key=\"CurveTemplate\">\n            &lt;StackLayout>\n                &lt;Frame\n                    Margin=\"5\"\n                    Padding=\"1\"\n                    BorderColor=\"{StaticResource ColorBlack}\"\n                    CornerRadius=\"30\"\n                    HasShadow=\"True\"\n                    IsClippedToBounds=\"True\">\n\n                    &lt;Grid>\n\n                        &lt;Image\n                            x:Name=\"BannerImage\"\n                            Aspect=\"AspectFill\"\n                            HeightRequest=\"170\"\n                            IsVisible=\"{Binding IsLoading}\"\n                            Source=\"{Binding ImageUrl}\" \/>\n\n                        &lt;StackLayout\n                            BackgroundColor=\"#55000000\"\n                            HeightRequest=\"40\"\n                            VerticalOptions=\"EndAndExpand\">\n\n                            &lt;Label\n                                FontAttributes=\"Bold\"\n                                FontSize=\"14\"\n                                HorizontalOptions=\"CenterAndExpand\"\n                                LineBreakMode=\"TailTruncation\"\n                                Text=\"{Binding ImageName}\"\n                                TextColor=\"White\"\n                                VerticalOptions=\"CenterAndExpand\" \/>\n\n                        &lt;\/StackLayout>\n\n                    &lt;\/Grid>\n\n                &lt;\/Frame>\n            &lt;\/StackLayout>\n        &lt;\/DataTemplate>\n\n        &lt;DataTemplate x:Key=\"SquareTemplate\">\n            &lt;StackLayout>\n                &lt;Frame\n                    Margin=\"5\"\n                    Padding=\"1\"\n                    BorderColor=\"{StaticResource ColorBlack}\"\n                    CornerRadius=\"0\"\n                    HasShadow=\"True\"\n                    IsClippedToBounds=\"True\">\n\n                    &lt;Grid>\n\n                        &lt;Image\n                            x:Name=\"BannerImage\"\n                            Aspect=\"AspectFill\"\n                            HeightRequest=\"170\"\n                            IsVisible=\"{Binding IsLoading}\"\n                            Source=\"{Binding ImageUrl}\" \/>\n\n                        &lt;StackLayout\n                            BackgroundColor=\"#55000000\"\n                            HeightRequest=\"40\"\n                            VerticalOptions=\"EndAndExpand\">\n\n                            &lt;Label\n                                FontAttributes=\"Bold\"\n                                FontSize=\"14\"\n                                HorizontalOptions=\"CenterAndExpand\"\n                                LineBreakMode=\"TailTruncation\"\n                                Text=\"{Binding ImageName}\"\n                                TextColor=\"White\"\n                                VerticalOptions=\"CenterAndExpand\" \/>\n\n                        &lt;\/StackLayout>\n\n                    &lt;\/Grid>\n\n                &lt;\/Frame>\n            &lt;\/StackLayout>\n        &lt;\/DataTemplate>\n\n        &lt;template:CarouselViewTemplateSelector\n            x:Key=\"TemplateSelector\"\n            CurveTemplate=\"{StaticResource CurveTemplate}\"\n            SquareTemplate=\"{StaticResource SquareTemplate}\" \/>\n&lt;\/ContentPage.Resources><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211; Creating a CarouselViewTemplateSelector.cs class<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Text;\nusing System.Threading.Tasks;\n\nnamespace MAUICarouselViewSample\n{\n    public class CarouselViewTemplateSelector : DataTemplateSelector\n    {\n        public DataTemplate CurveTemplate { get; set; }\n        public DataTemplate SquareTemplate { get; set; }\n\n        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)\n        {\n            BannerImage banner = (BannerImage)item;\n            return banner.IsSquareView ? SquareTemplate : CurveTemplate;\n        }\n    }\n}<\/pre>\n\n\n\n<p>Now, we have completed the UI part.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3 &#8211; Setting up the ViewModel <\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3.1 &#8211; Create a MainPageViewModel.cs class<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Linq;\nusing System.Text;\nusing System.Threading.Tasks;\n\nnamespace MAUICarouselViewSample\n{\n    public class MainPageViewModel : BaseViewModel\n    {\n        private ObservableCollection&lt;BannerImage> _imageList1;\n        private ObservableCollection&lt;BannerImage> _imageList2;\n        private ObservableCollection&lt;BannerImage> _imageList3;\n        private ObservableCollection&lt;BannerImage> _imageList4;\n        private ObservableCollection&lt;BannerImage> _imageList5;\n        private ObservableCollection&lt;BannerImage> _imageList6;\n\n        public MainPageViewModel()\n        {\n            Application.Current.Dispatcher.Dispatch(() =>\n            {\n                ImageList1 = GetImageList1();\n                ImageList2 = GetImageList2();\n                ImageList3 = GetImageList3();\n                ImageList4 = GetImageList4();\n                ImageList6 = GetImageList6();\n\n                \/\/ Load 5th Banner list after 10 Second\n                Task.Delay(10000).ContinueWith(t => Get5thBannerList());\n            });\n        }\n\n        private void Get5thBannerList()\n        {\n            ImageList5 = GetImageList5();\n        }\n\n        public ObservableCollection&lt;BannerImage> ImageList1\n        {\n            get => _imageList1;\n\n            set\n            {\n                _imageList1 = value;\n\n                OnPropertyChanged();\n            }\n        }\n\n        public ObservableCollection&lt;BannerImage> ImageList2\n        {\n            get => _imageList2;\n\n            set\n            {\n                _imageList2 = value;\n\n                OnPropertyChanged();\n            }\n        }\n\n        public ObservableCollection&lt;BannerImage> ImageList3\n        {\n            get => _imageList3;\n\n            set\n            {\n                _imageList3 = value;\n\n                OnPropertyChanged();\n            }\n        }\n\n        public ObservableCollection&lt;BannerImage> ImageList4\n        {\n            get => _imageList4;\n\n            set\n            {\n                _imageList4 = value;\n\n                OnPropertyChanged();\n            }\n        }\n\n        public ObservableCollection&lt;BannerImage> ImageList5\n        {\n            get => _imageList5;\n\n            set\n            {\n                _imageList5 = value;\n\n                OnPropertyChanged();\n            }\n        }\n\n        public ObservableCollection&lt;BannerImage> ImageList6\n        {\n            get => _imageList6;\n\n            set\n            {\n                _imageList6 = value;\n\n                OnPropertyChanged();\n            }\n        }\n\n    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3.2 &#8211; Creating a BaseViewModel.cs<\/strong> <strong>class<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.ComponentModel;\nusing System.Linq;\nusing System.Runtime.CompilerServices;\nusing System.Text;\nusing System.Threading.Tasks;\n\nnamespace MAUICarouselViewSample\n{\n    public class BaseViewModel : INotifyPropertyChanged\n    {\n        public event PropertyChangedEventHandler PropertyChanged;\n\n        public void OnPropertyChanged([CallerMemberName] string propertyName = null)\n        {\n            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n        }\n\n        public ObservableCollection&lt;BannerImage> GetImageList1()\n        {\n            ObservableCollection&lt;BannerImage> ImageList = new ObservableCollection&lt;BannerImage>();\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"one.jpg\",\n                ImageUrl = ImageSource.FromFile(\"one.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"two.jpg\",\n                ImageUrl = ImageSource.FromFile(\"two.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"three.jpg\",\n                ImageUrl = ImageSource.FromFile(\"three.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"four.jpg\",\n                ImageUrl = ImageSource.FromFile(\"four.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"five.jpg\",\n                ImageUrl = ImageSource.FromFile(\"five.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"six.jpg\",\n                ImageUrl = ImageSource.FromFile(\"six.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"Image pexels-photo-257840\",\n                ImageUrl = ImageSource.FromFile(\"gif4.gif\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#F0048A\"),\n                ImageName = \"Image pexels-photo-257840\",\n                ImageUrl = ImageSource.FromFile(\"gif5.gif\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#D7DBDD\"),\n                ImageName = \"Image img5\",\n                ImageUrl = ImageSource.FromFile(\"img5.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#F7DC6F\"),\n                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#7DCEA0\"),\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#7FB3D5\"),\n                ImageName = \"Image img8\",\n                ImageUrl = ImageSource.FromFile(\"img8.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#C39BD3\"),\n                ImageName = \"Image img9\",\n                ImageUrl = ImageSource.FromFile(\"img9.jpeg\")\n            });\n\n            return ImageList;\n        }\n\n        public ObservableCollection&lt;BannerImage> GetImageList2()\n        {\n            ObservableCollection&lt;BannerImage> ImageList = new ObservableCollection&lt;BannerImage>();\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"five.jpg\",\n                ImageUrl = ImageSource.FromFile(\"five.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"six.jpg\",\n                ImageUrl = ImageSource.FromFile(\"six.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img9\",\n                ImageUrl = ImageSource.FromFile(\"img9.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"one.jpg\",\n                ImageUrl = ImageSource.FromFile(\"one.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"two.jpg\",\n                ImageUrl = ImageSource.FromFile(\"two.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"three.jpg\",\n                ImageUrl = ImageSource.FromFile(\"three.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"four.jpg\",\n                ImageUrl = ImageSource.FromFile(\"four.jpg\")\n            });\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img8\",\n                ImageUrl = ImageSource.FromFile(\"img8.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img5\",\n                ImageUrl = ImageSource.FromFile(\"img5.jpeg\")\n            });\n\n            return ImageList;\n        }\n\n        public ObservableCollection&lt;BannerImage> GetImageList3()\n        {\n            ObservableCollection&lt;BannerImage> ImageList = new ObservableCollection&lt;BannerImage>();\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"seven.jpg\",\n                ImageUrl = ImageSource.FromFile(\"seven.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"three.jpg\",\n                ImageUrl = ImageSource.FromFile(\"three.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"four.jpg\",\n                ImageUrl = ImageSource.FromFile(\"four.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img8\",\n                ImageUrl = ImageSource.FromFile(\"img8.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img9\",\n                ImageUrl = ImageSource.FromFile(\"img9.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"one.jpg\",\n                ImageUrl = ImageSource.FromFile(\"one.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img5\",\n                ImageUrl = ImageSource.FromFile(\"img5.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"six.jpg\",\n                ImageUrl = ImageSource.FromFile(\"six.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"five.jpg\",\n                ImageUrl = ImageSource.FromFile(\"five.jpg\")\n            });\n\n            return ImageList;\n        }\n\n        public ObservableCollection&lt;BannerImage> GetImageList4()\n        {\n            ObservableCollection&lt;BannerImage> ImageList = new ObservableCollection&lt;BannerImage>();\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"three.jpg\",\n                ImageUrl = ImageSource.FromFile(\"three.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img5\",\n                ImageUrl = ImageSource.FromFile(\"img5.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"two.jpg\",\n                ImageUrl = ImageSource.FromFile(\"two.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img8\",\n                ImageUrl = ImageSource.FromFile(\"img8.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img9\",\n                ImageUrl = ImageSource.FromFile(\"img9.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"four.jpg\",\n                ImageUrl = ImageSource.FromFile(\"four.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"five.jpg\",\n                ImageUrl = ImageSource.FromFile(\"five.jpg\")\n            });\n\n            return ImageList;\n        }\n\n        public ObservableCollection&lt;BannerImage> GetImageList5()\n        {\n            ObservableCollection&lt;BannerImage> ImageList = new ObservableCollection&lt;BannerImage>();\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"one.jpg\",\n                ImageUrl = ImageSource.FromFile(\"one.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"two.jpg\",\n                ImageUrl = ImageSource.FromFile(\"two.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"three.jpg\",\n                ImageUrl = ImageSource.FromFile(\"three.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"four.jpg\",\n                ImageUrl = ImageSource.FromFile(\"four.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"five.jpg\",\n                ImageUrl = ImageSource.FromFile(\"five.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"six.jpg\",\n                ImageUrl = ImageSource.FromFile(\"six.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"seven.jpg\",\n                ImageUrl = ImageSource.FromFile(\"seven.jpg\")\n            });\n\n            return ImageList;\n        }\n\n        public ObservableCollection&lt;BannerImage> GetImageList6()\n        {\n            ObservableCollection&lt;BannerImage> ImageList = new ObservableCollection&lt;BannerImage>();\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image img9\",\n                ImageUrl = ImageSource.FromFile(\"img9.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image img5\",\n                ImageUrl = ImageSource.FromFile(\"img5.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image img8\",\n                ImageUrl = ImageSource.FromFile(\"img8.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.jpg\")\n            });\n\n            return ImageList;\n        }\n    }\n}<\/pre>\n\n\n\n<p>Now, We have completed the coding, Let&#8217;s try to run the application.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>4 &#8211; Result <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1576\" style=\"aspect-ratio: 724 \/ 1576;\" width=\"724\" controls muted src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUICarouselViewWithIndicatorView.mp4\"><\/video><\/figure>\n\n\n\n<p>That\u2019s all for now!<\/p>\n\n\n\n<p>You can check the full source code <strong><a href=\"https:\/\/github.com\/Alam-Ashraf\/MAUICarouselViewSample\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a>.<\/strong><\/p>\n\n\n\n<p>Happy Coding!<strong> \ud83d\ude00<\/strong><\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>You may also like<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-0dfbf163 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/11\/24\/carouselview-with-indicatorview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CarouselViewWithIndicatorView-1024x1003.png\" alt=\"CarouselView With IndicatorView\" class=\"wp-image-281\" width=\"512\" height=\"502\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CarouselViewWithIndicatorView-1024x1003.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CarouselViewWithIndicatorView-300x294.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CarouselViewWithIndicatorView-768x752.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CarouselViewWithIndicatorView-850x832.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CarouselViewWithIndicatorView.png 1244w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Xamarin Forms \u2013 The Latest CarouselView with IndicatorView<\/p>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/14\/drag-and-drop-gesture-to-collectionview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-1024x723.png\" alt=\"Item Reordering in MAUI\" class=\"wp-image-708\" width=\"512\" height=\"362\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-1024x723.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-300x212.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-768x542.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-850x600.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering.png 1382w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use drag and drop gesture to CollectionView in MAUI<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CarouselView&nbsp;is a view for presenting data in scrollable forms where users can swipe to move through a collection of items. By default,&nbsp;CarouselView&nbsp;displays its item&nbsp;horizontally. Basically, We are using&nbsp;CarouselView&nbsp;for showing the banners in mobile applications. What is IndicatorView? IndicatorView&nbsp;in MAUI is a view which displays indicators that represent the numbers of items and current position of&nbsp;a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[21,22,23],"class_list":["post-355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnetmaui","tag-net-maui-carouselview-with-indicatorview","tag-carouselview-with-indicatorview","tag-carouselview-with-indicatorview-in-net-maui"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/comments?post=355"}],"version-history":[{"count":32,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/355\/revisions"}],"predecessor-version":[{"id":758,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/355\/revisions\/758"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/374"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}