{"id":282,"date":"2022-11-24T16:07:08","date_gmt":"2022-11-24T16:07:08","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=282"},"modified":"2023-01-18T17:09:13","modified_gmt":"2023-01-18T17:09:13","slug":"carouselview-with-indicatorview","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/11\/24\/carouselview-with-indicatorview\/","title":{"rendered":"Xamarin Forms &#8211; The Latest CarouselView with IndicatorView"},"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, <strong>CarouselView<\/strong> displays its item&nbsp;<strong>horizontally<\/strong>. Basically, We are using <strong>CarouselView<\/strong> 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><strong>IndicatorView<\/strong> <\/strong>in Xamarin forms is a view which displays indicators that represent the numbers of items and current position of a <strong>CarouselView<\/strong>. You can learn more about <strong><strong>IndicatorView<\/strong><\/strong> <a href=\"https:\/\/learn.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/indicatorview\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a>.<\/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 Xamarin Forms.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>&nbsp;&nbsp;<em><strong>CarouselView<\/strong> with <strong>IndicatorView<\/strong> article also available in <strong>.Net MAUI<\/strong> click <strong><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/11\/30\/carouselview-with-indicatorview-maui\/\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a> <\/strong>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<ul class=\"wp-block-list\">\n<li>Normal&nbsp;<strong>CarouselView<\/strong>&nbsp;with&nbsp;<strong>IndicatorView<\/strong><\/li>\n\n\n\n<li>CarouselView with&nbsp;<strong>PeekAreaInsets<\/strong><\/li>\n\n\n\n<li>Add&nbsp;<strong>animation<\/strong>&nbsp;to CarouselView<\/li>\n\n\n\n<li>CarouselView with&nbsp;<strong>vertical<\/strong>&nbsp;orientation<\/li>\n\n\n\n<li>CarouselView with&nbsp;<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; MainPage.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;ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n             xmlns:carouselItem=\"clr-namespace:XFCarouselViewSample\"\n             xmlns:template=\"clr-namespace:XFCarouselViewSample\"\n             x:Class=\"XFCarouselViewSample.MainPage\"\n             xmlns:ffimageloading=\"clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms\"\n             xmlns:viewModels=\"clr-namespace:XFCarouselViewSample\">\n\n     &lt;ContentPage.BindingContext>\n        &lt;viewModels:MainPageViewModel \/>\n    &lt;\/ContentPage.BindingContext>\n\n   &lt;ContentPage.Resources>\n        &lt;ResourceDictionary>\n            &lt;Style TargetType=\"Label\">\n                &lt;Setter Property=\"TextColor\" Value=\"{StaticResource ColorPrimary}\" \/>\n                &lt;Setter Property=\"FontSize\" Value=\"18\" \/>\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=\"5\"\/>\n                &lt;Setter Property=\"BorderColor\" Value=\"{StaticResource ColorPrimary}\"\/>\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=\"10\"\n                    Padding=\"1\"\n                    BorderColor=\"{StaticResource ColorBlack}\"\n                    CornerRadius=\"30\"\n                    HasShadow=\"True\"\n                    HeightRequest=\"220\"\n                    IsClippedToBounds=\"True\">\n\n                    &lt;Grid>\n\n                        &lt;ffimageloading:CachedImage\n                            x:Name=\"BannerImage\"\n                            Aspect=\"AspectFill\"\n                            CacheType=\"Disk\"\n                            IsVisible=\"{Binding IsLoading}\"\n                            Source=\"{Binding ImageUrl}\" \/>\n\n                        &lt;ActivityIndicator\n                            Margin=\"0,-20,0,0\"\n                            BindingContext=\"{x:Reference Name=BannerImage}\"\n                            HeightRequest=\"40\"\n                            HorizontalOptions=\"CenterAndExpand\"\n                            IsRunning=\"True\"\n                            IsVisible=\"{Binding IsLoading}\"\n                            VerticalOptions=\"CenterAndExpand\"\n                            WidthRequest=\"40\"\n                            Color=\"Gray\" \/>\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=\"10\"\n                    Padding=\"1\"\n                    BorderColor=\"{StaticResource ColorBlack}\"\n                    CornerRadius=\"0\"\n                    HasShadow=\"True\"\n                    HeightRequest=\"220\"\n                    IsClippedToBounds=\"True\">\n\n                    &lt;Grid>\n\n                        &lt;ffimageloading:CachedImage\n                            x:Name=\"BannerImage\"\n                            Aspect=\"AspectFill\"\n                            CacheType=\"All\"\n                            IsVisible=\"{Binding IsLoading}\"\n                            Source=\"{Binding ImageUrl}\" \/>\n\n                        &lt;ActivityIndicator\n                            Margin=\"0,-20,0,0\"\n                            BindingContext=\"{x:Reference Name=BannerImage}\"\n                            HeightRequest=\"40\"\n                            HorizontalOptions=\"CenterAndExpand\"\n                            IsRunning=\"True\"\n                            IsVisible=\"{Binding IsLoading}\"\n                            VerticalOptions=\"CenterAndExpand\"\n                            WidthRequest=\"40\"\n                            Color=\"Gray\" \/>\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\n    &lt;\/ContentPage.Resources>\n\n    &lt;ContentPage.Content>\n\n        &lt;ScrollView BackgroundColor=\"{StaticResource ColorPrimary}\">\n\n            &lt;StackLayout Padding=\"10\" Spacing=\"25\" BackgroundColor=\"White\">\n\n                &lt;!--  Carousel 1st  -->\n                &lt;Frame>\n                    &lt;StackLayout>\n                        &lt;Label Text=\"Normal Carousel\" \/>\n                        &lt;CarouselView\n                            x:Name=\"carouselView1\"\n                            HeightRequest=\"220\"\n                            HorizontalOptions=\"FillAndExpand\"\n                            IndicatorView=\"IV1\"\n                            ItemsSource=\"{Binding ImageList1}\"\n                            PeekAreaInsets=\"0\">\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.ItemTemplate>\n                                &lt;DataTemplate>\n                                    &lt;StackLayout>\n                                        &lt;Frame\n                                            Margin=\"10\"\n                                            Padding=\"0\"\n                                            CornerRadius=\"0\"\n                                            HasShadow=\"True\"\n                                            HeightRequest=\"220\"\n                                            IsClippedToBounds=\"True\">\n\n                                            &lt;Grid HorizontalOptions=\"FillAndExpand\"\n                                                   HeightRequest=\"220\"\n                                                    VerticalOptions=\"FillAndExpand\">\n\n                                                &lt;ffimageloading:CachedImage\n                                                    x:Name=\"BannerImage\"\n                                                    Aspect=\"AspectFill\"\n                                                    CacheType=\"All\"\n                                                     HeightRequest=\"220\"\n                                                     IsVisible=\"{Binding IsLoading}\"\n                                                    HorizontalOptions=\"FillAndExpand\"\n                                                    VerticalOptions=\"FillAndExpand\"\n                                                    Source=\"{Binding ImageUrl}\" \/>\n\n                                                &lt;ActivityIndicator\n                                                    Margin=\"0,-20,0,0\"\n                                                    BindingContext=\"{x:Reference Name=BannerImage}\"\n                                                    HeightRequest=\"40\"\n                                                    HorizontalOptions=\"CenterAndExpand\"\n                                                    IsRunning=\"True\"\n                                                    IsVisible=\"{Binding IsLoading}\"\n                                                    VerticalOptions=\"CenterAndExpand\"\n                                                    WidthRequest=\"40\"\n                                                    Color=\"Gray\" \/>\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                            &lt;\/CarouselView.ItemTemplate>\n                        &lt;\/CarouselView>\n                        &lt;IndicatorView\n                            x:Name=\"IV1\"\n                            HorizontalOptions=\"Center\"\n                            IndicatorColor=\"LightGray\"\n                            SelectedIndicatorColor=\"DarkGray\" \/>\n                    &lt;\/StackLayout>\n                &lt;\/Frame>\n\n                &lt;!--  Carousel 2nd  -->\n                &lt;Frame>\n                    &lt;StackLayout>\n                        &lt;Label Text=\"Carousel Animation with PeekAreaInsets\" \/>\n                        &lt;CarouselView\n                            x:Name=\"carouselView2\"\n                            HeightRequest=\"220\"\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 \/>\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>\n\n                &lt;!--  Carousel 3rd  -->\n                &lt;Frame>\n                    &lt;StackLayout>\n                        &lt;Label Text=\"Carousel with Animation\" \/>\n                        &lt;CarouselView\n                            x:Name=\"carouselView3\"\n                            HeightRequest=\"220\"\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                    &lt;StackLayout>\n                        &lt;Label Text=\"Carousel with Animation\" \/>\n                        &lt;CarouselView\n                            x:Name=\"carouselView6\"\n                            HeightRequest=\"220\"\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>\n\n                &lt;!--  Carousel 5th  -->\n                &lt;Frame>\n                    &lt;StackLayout>\n                        &lt;Label Text=\"Carousel with Vertical Orientation\" \/>\n                        &lt;CarouselView\n                            x:Name=\"carouselView4\"\n                            HeightRequest=\"280\"\n                            HorizontalOptions=\"FillAndExpand\"\n                            IndicatorView=\"IV5\"\n                            ItemsSource=\"{Binding ImageList4}\"\n                            PeekAreaInsets=\"30\">\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>\n\n                 &lt;!--  Carousel 6th  -->\n                &lt;Frame>\n                    &lt;StackLayout>\n                        &lt;Label Text=\"Carousel with TemplateSelector\" \/>\n                        &lt;CarouselView\n                            x:Name=\"carouselView5\"\n                            HeightRequest=\"220\"\n                            HorizontalOptions=\"FillAndExpand\"\n                            IndicatorView=\"IV6\"\n                            ItemTemplate=\"{StaticResource TemplateSelector}\"\n                            ItemsSource=\"{Binding ImageList5}\"\n                            PeekAreaInsets=\"30\">\n\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                                    HeightRequest=\"220\"\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\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\n                &lt;\/Frame>\n\n            &lt;\/StackLayout>\n\n        &lt;\/ScrollView>\n    &lt;\/ContentPage.Content>\n&lt;\/ContentPage><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.2 &#8211; Create a separate carousel item views for adding animations<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.2.1 &#8211; Creating a 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    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:ffimageloading=\"clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms\"\n    x:Class=\"XFCarouselViewSample.CarouselItemView\">\n     &lt;Frame\n        x:Name=\"FrameContainer\"\n        Margin=\"10\"\n        Padding=\"0\"\n        CornerRadius=\"20\"\n        HasShadow=\"True\"\n        HeightRequest=\"220\"\n        IsClippedToBounds=\"True\">\n\n        &lt;Grid>\n\n            &lt;ffimageloading:CachedImage\n                x:Name=\"BannerImage\"\n                Aspect=\"AspectFill\"\n                CacheType=\"All\"\n                IsVisible=\"{Binding IsLoading}\"\n                Source=\"{Binding ImageUrl}\" \/>\n\n            &lt;ActivityIndicator\n                Margin=\"0,-20,0,0\"\n                BindingContext=\"{x:Reference Name=BannerImage}\"\n                HeightRequest=\"40\"\n                HorizontalOptions=\"CenterAndExpand\"\n                IsRunning=\"True\"\n                IsVisible=\"{Binding IsLoading}\"\n                VerticalOptions=\"CenterAndExpand\"\n                WidthRequest=\"40\"\n                Color=\"{StaticResource ColorPrimary}\" \/>\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 System;\nusing System.Collections.Generic;\nusing Xamarin.Forms;\nusing Xamarin.Forms.Xaml;\n\nnamespace XFCarouselViewSample\n{\n    [XamlCompilation(XamlCompilationOptions.Compile)]\n    public 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\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    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.2.3 &#8211; Create another 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    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:ffimageloading=\"clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms\"\n    x:Class=\"XFCarouselViewSample.CarouselItemView2\">\n\n    &lt;Frame\n        x:Name=\"FrameContainer\"\n        Margin=\"10\"\n        Padding=\"0\"\n        CornerRadius=\"20\"\n        HasShadow=\"True\"\n        HeightRequest=\"220\"\n        IsClippedToBounds=\"True\">\n\n        &lt;Grid>\n\n            &lt;ffimageloading:CachedImage\n                x:Name=\"BannerImage\"\n                Aspect=\"AspectFill\"\n                CacheType=\"All\"\n                IsVisible=\"{Binding IsLoading}\"\n                Source=\"{Binding ImageUrl}\" \/>\n\n            &lt;ActivityIndicator\n                Margin=\"0,-20,0,0\"\n                BindingContext=\"{x:Reference Name=BannerImage}\"\n                HeightRequest=\"40\"\n                HorizontalOptions=\"CenterAndExpand\"\n                IsRunning=\"True\"\n                IsVisible=\"{Binding IsLoading}\"\n                VerticalOptions=\"CenterAndExpand\"\n                WidthRequest=\"40\"\n                Color=\"{StaticResource ColorPrimary}\" \/>\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.2.4 &#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=\"\">using System;\nusing System.Collections.Generic;\nusing Xamarin.Forms;\nusing Xamarin.Forms.Xaml;\n\nnamespace XFCarouselViewSample\n{\n    [XamlCompilation(XamlCompilationOptions.Compile)]\n    public 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\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.5, 200);\n            await FrameContainer.ScaleTo(_scale * .5, 200);\n            await FrameContainer.ScaleTo(_scale, 200);\n        }\n\n    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.2.5 &#8211; Creating another 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    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:ffimageloading=\"clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms\"\n    x:Class=\"XFCarouselViewSample.CarouselItemView3\">\n\n     &lt;Frame\n        x:Name=\"FrameContainer\"\n        Margin=\"20\"\n        Padding=\"0\"\n        CornerRadius=\"20\"\n        HasShadow=\"True\"\n        HeightRequest=\"220\"\n        IsClippedToBounds=\"True\">\n\n        &lt;Grid>\n\n            &lt;ffimageloading:CachedImage\n                x:Name=\"BannerImage\"\n                Aspect=\"AspectFill\"\n                CacheType=\"All\"\n                IsVisible=\"{Binding IsLoading}\"\n                Source=\"{Binding ImageUrl}\" \/>\n\n            &lt;ActivityIndicator\n                Margin=\"0,-20,0,0\"\n                BindingContext=\"{x:Reference Name=BannerImage}\"\n                HeightRequest=\"40\"\n                HorizontalOptions=\"CenterAndExpand\"\n                IsRunning=\"True\"\n                IsVisible=\"{Binding IsLoading}\"\n                VerticalOptions=\"CenterAndExpand\"\n                WidthRequest=\"40\"\n                Color=\"{StaticResource ColorPrimary}\" \/>\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.2.6 &#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=\"\">using System;\nusing System.Collections.Generic;\nusing Xamarin.Forms;\nusing Xamarin.Forms.Xaml;\n\nnamespace XFCarouselViewSample\n{\n    [XamlCompilation(XamlCompilationOptions.Compile)]\n    public 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    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211; Now, Create a CarouselViewTemplateSelector.cs class for selecting the template at runtime<\/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 Xamarin.Forms;\n\nnamespace XFCarouselViewSample\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 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<\/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.ObjectModel;\nusing System.Threading.Tasks;\nusing Xamarin.Forms;\n\nnamespace XFCarouselViewSample\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            Device.BeginInvokeOnMainThread(() =>\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>4 &#8211; Create a Model<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>4.1 &#8211; Create a BannerImage.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 Xamarin.Forms;\n\nnamespace XFCarouselViewSample\n{\n    public class BannerImage\n    {\n        public ImageSource ImageUrl { get; set; }\n        public string ImageName { get; set; }\n        public string ImageDesc { get; set; } = \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\";\n        public bool IsSquareView { get; set; }\n        public Color HeaderColor { get; set; }\n        public bool IsLoading = true;\n    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>5 &#8211; Create a BaseViewModel.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.ObjectModel;\nusing System.ComponentModel;\nusing System.Runtime.CompilerServices;\nusing Xamarin.Forms;\n\nnamespace XFCarouselViewSample\n{\n    public class BaseViewModel : INotifyPropertyChanged\n    {\n        public event PropertyChangedEventHandler PropertyChanged;\n\n        public BaseViewModel()\n        {\n\n        }\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.FromHex(\"#F1948A\"),\n                ImageName = \"Image pexels-photo-257840\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/257840\/pexels-photo-257840.jpeg?cs=srgb&amp;dl=agriculture-apple-blur-257840.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#00FF00\"),\n                ImageName = \"Image pexels-photo-257840\",\n                ImageUrl = ImageSource.FromFile(\"gif4.gif\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#1ABC9C\"),\n                ImageName = \"Image pexels-photo-853199\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/853199\/pexels-photo-853199.jpeg?cs=srgb&amp;dl=4k-wallpaper-background-beautiful-853199.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#1B4F72\"),\n                ImageName = \"Image pexels-photo-462118\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/462118\/pexels-photo-462118.jpeg?cs=srgb&amp;dl=bloom-blooming-blossom-462118.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#F0048A\"),\n                ImageName = \"Image pexels-photo-257840\",\n                ImageUrl = ImageSource.FromFile(\"gif5.gif\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#6E2C00\"),\n                ImageName = \"Image waterfall-thac-dray-nur\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/68147\/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?cs=srgb&amp;dl=hd-wallpaper-landscape-long-exposure-68147.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#F4D03F\"),\n                ImageName = \"Image pexels-photo-753626\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/753626\/pexels-photo-753626.jpeg?cs=srgb&amp;dl=beach-bora-bora-clouds-753626.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#9B59B6\"),\n                ImageName = \"Image fall-autumn-red-season\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/33109\/fall-autumn-red-season.jpg?cs=srgb&amp;dl=autumn-colorful-colourful-33109.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#641E16\"),\n                ImageName = \"Image pexels-photo-556416\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/556416\/pexels-photo-556416.jpeg?cs=srgb&amp;dl=bridge-clouds-cloudy-556416.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#5B2C6F\"),\n                ImageName = \"Image pexels-photo-1402787\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/1402787\/pexels-photo-1402787.jpeg?cs=srgb&amp;dl=4k-wallpaper-audi-audi-r8-1402787.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#0E6655\"),\n                ImageName = \"Image rose-blue-flower-rose-blooms\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/67636\/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&amp;dl=beauty-bloom-blue-67636.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#B7950B\"),\n                ImageName = \"Image pexels-photo-443446\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/443446\/pexels-photo-443446.jpeg?cs=srgb&amp;dl=daylight-forest-glossy-443446.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#D7DBDD\"),\n                ImageName = \"Image img5\",\n                ImageUrl = ImageSource.FromFile(\"img5.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#F7DC6F\"),\n                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#7DCEA0\"),\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#7FB3D5\"),\n                ImageName = \"Image img8\",\n                ImageUrl = ImageSource.FromFile(\"img8.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromHex(\"#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                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-753626\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/753626\/pexels-photo-753626.jpeg?cs=srgb&amp;dl=beach-bora-bora-clouds-753626.jpg&amp;fm=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 pexels-photo-257840\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/257840\/pexels-photo-257840.jpeg?cs=srgb&amp;dl=agriculture-apple-blur-257840.jpg&amp;fm=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 pexels-photo-853199\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/853199\/pexels-photo-853199.jpeg?cs=srgb&amp;dl=4k-wallpaper-background-beautiful-853199.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-462118\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/462118\/pexels-photo-462118.jpeg?cs=srgb&amp;dl=bloom-blooming-blossom-462118.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image waterfall-thac-dray-nur\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/68147\/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?cs=srgb&amp;dl=hd-wallpaper-landscape-long-exposure-68147.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-556416\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/556416\/pexels-photo-556416.jpeg?cs=srgb&amp;dl=bridge-clouds-cloudy-556416.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image fall-autumn-red-season\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/33109\/fall-autumn-red-season.jpg?cs=srgb&amp;dl=autumn-colorful-colourful-33109.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-1402787\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/1402787\/pexels-photo-1402787.jpeg?cs=srgb&amp;dl=4k-wallpaper-audi-audi-r8-1402787.jpg&amp;fm=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                ImageName = \"Image rose-blue-flower-rose-blooms\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/67636\/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&amp;dl=beauty-bloom-blue-67636.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-443446\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/443446\/pexels-photo-443446.jpeg?cs=srgb&amp;dl=daylight-forest-glossy-443446.jpg&amp;fm=jpg\"))\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 = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-753626\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/753626\/pexels-photo-753626.jpeg?cs=srgb&amp;dl=beach-bora-bora-clouds-753626.jpg&amp;fm=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 = \"Image pexels-photo-462118\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/462118\/pexels-photo-462118.jpeg?cs=srgb&amp;dl=bloom-blooming-blossom-462118.jpg&amp;fm=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 pexels-photo-257840\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/257840\/pexels-photo-257840.jpeg?cs=srgb&amp;dl=agriculture-apple-blur-257840.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image waterfall-thac-dray-nur\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/68147\/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?cs=srgb&amp;dl=hd-wallpaper-landscape-long-exposure-68147.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image fall-autumn-red-season\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/33109\/fall-autumn-red-season.jpg?cs=srgb&amp;dl=autumn-colorful-colourful-33109.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-1402787\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/1402787\/pexels-photo-1402787.jpeg?cs=srgb&amp;dl=4k-wallpaper-audi-audi-r8-1402787.jpg&amp;fm=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                ImageName = \"Image pexels-photo-853199\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/853199\/pexels-photo-853199.jpeg?cs=srgb&amp;dl=4k-wallpaper-background-beautiful-853199.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-443446\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/443446\/pexels-photo-443446.jpeg?cs=srgb&amp;dl=daylight-forest-glossy-443446.jpg&amp;fm=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 = \"Image pexels-photo-556416\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/556416\/pexels-photo-556416.jpeg?cs=srgb&amp;dl=bridge-clouds-cloudy-556416.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image rose-blue-flower-rose-blooms\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/67636\/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&amp;dl=beauty-bloom-blue-67636.jpg&amp;fm=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 = \"Image rose-blue-flower-rose-blooms\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/67636\/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&amp;dl=beauty-bloom-blue-67636.jpg&amp;fm=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 = \"Image pexels-photo-462118\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/462118\/pexels-photo-462118.jpeg?cs=srgb&amp;dl=bloom-blooming-blossom-462118.jpg&amp;fm=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 pexels-photo-1402787\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/1402787\/pexels-photo-1402787.jpeg?cs=srgb&amp;dl=4k-wallpaper-audi-audi-r8-1402787.jpg&amp;fm=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                ImageName = \"Image pexels-photo-556416\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/556416\/pexels-photo-556416.jpeg?cs=srgb&amp;dl=bridge-clouds-cloudy-556416.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image fall-autumn-red-season\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/33109\/fall-autumn-red-season.jpg?cs=srgb&amp;dl=autumn-colorful-colourful-33109.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-443446\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/443446\/pexels-photo-443446.jpeg?cs=srgb&amp;dl=daylight-forest-glossy-443446.jpg&amp;fm=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 pexels-photo-257840\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/257840\/pexels-photo-257840.jpeg?cs=srgb&amp;dl=agriculture-apple-blur-257840.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-753626\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/753626\/pexels-photo-753626.jpeg?cs=srgb&amp;dl=beach-bora-bora-clouds-753626.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image waterfall-thac-dray-nur\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/68147\/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?cs=srgb&amp;dl=hd-wallpaper-landscape-long-exposure-68147.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image pexels-photo-853199\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/853199\/pexels-photo-853199.jpeg?cs=srgb&amp;dl=4k-wallpaper-background-beautiful-853199.jpg&amp;fm=jpg\"))\n            });\n\n\n            ImageList.Add(new BannerImage()\n            {\n                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.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 = true,\n                ImageName = \"Image pexels-photo-753626\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/753626\/pexels-photo-753626.jpeg?cs=srgb&amp;dl=beach-bora-bora-clouds-753626.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image waterfall-thac-dray-nur\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/68147\/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?cs=srgb&amp;dl=hd-wallpaper-landscape-long-exposure-68147.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image pexels-photo-462118\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/462118\/pexels-photo-462118.jpeg?cs=srgb&amp;dl=bloom-blooming-blossom-462118.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image pexels-photo-853199\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/853199\/pexels-photo-853199.jpeg?cs=srgb&amp;dl=4k-wallpaper-background-beautiful-853199.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image rose-blue-flower-rose-blooms\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/67636\/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&amp;dl=beauty-bloom-blue-67636.jpg&amp;fm=jpg\"))\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 pexels-photo-556416\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/556416\/pexels-photo-556416.jpeg?cs=srgb&amp;dl=bridge-clouds-cloudy-556416.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image fall-autumn-red-season\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/33109\/fall-autumn-red-season.jpg?cs=srgb&amp;dl=autumn-colorful-colourful-33109.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image pexels-photo-1402787\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/1402787\/pexels-photo-1402787.jpeg?cs=srgb&amp;dl=4k-wallpaper-audi-audi-r8-1402787.jpg&amp;fm=jpg\"))\n            });\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 pexels-photo-443446\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/443446\/pexels-photo-443446.jpeg?cs=srgb&amp;dl=daylight-forest-glossy-443446.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image pexels-photo-257840\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/257840\/pexels-photo-257840.jpeg?cs=srgb&amp;dl=agriculture-apple-blur-257840.jpg&amp;fm=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        public ObservableCollection&lt;BannerImage> GetImageList6()\n        {\n            ObservableCollection&lt;BannerImage> ImageList = new ObservableCollection&lt;BannerImage>();\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image pexels-photo-1402787\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/1402787\/pexels-photo-1402787.jpeg?cs=srgb&amp;dl=4k-wallpaper-audi-audi-r8-1402787.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image pexels-photo-753626\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/753626\/pexels-photo-753626.jpeg?cs=srgb&amp;dl=beach-bora-bora-clouds-753626.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image waterfall-thac-dray-nur\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/68147\/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?cs=srgb&amp;dl=hd-wallpaper-landscape-long-exposure-68147.jpg&amp;fm=jpg\"))\n            });\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 pexels-photo-443446\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/443446\/pexels-photo-443446.jpeg?cs=srgb&amp;dl=daylight-forest-glossy-443446.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image pexels-photo-462118\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/462118\/pexels-photo-462118.jpeg?cs=srgb&amp;dl=bloom-blooming-blossom-462118.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image pexels-photo-853199\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/853199\/pexels-photo-853199.jpeg?cs=srgb&amp;dl=4k-wallpaper-background-beautiful-853199.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image rose-blue-flower-rose-blooms\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/67636\/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&amp;dl=beauty-bloom-blue-67636.jpg&amp;fm=jpg\"))\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 pexels-photo-556416\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/556416\/pexels-photo-556416.jpeg?cs=srgb&amp;dl=bridge-clouds-cloudy-556416.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image fall-autumn-red-season\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/33109\/fall-autumn-red-season.jpg?cs=srgb&amp;dl=autumn-colorful-colourful-33109.jpg&amp;fm=jpg\"))\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = true,\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                IsSquareView = false,\n                ImageName = \"Image pexels-photo-257840\",\n                ImageUrl = ImageSource.FromUri(new Uri(\"https:\/\/images.pexels.com\/photos\/257840\/pexels-photo-257840.jpeg?cs=srgb&amp;dl=agriculture-apple-blur-257840.jpg&amp;fm=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 class=\"has-medium-font-size\"><strong>6 &#8211; Result<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2796\" style=\"aspect-ratio: 1290 \/ 2796;\" width=\"1290\" controls muted src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/CarouselViewWithIndicatorView.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&nbsp;<a href=\"https:\/\/github.com\/Alam-Ashraf\/XFCarouselViewSample\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a><strong>.<\/strong><\/p>\n\n\n\n<p>Happy Coding!<strong> \ud83d\ude00\u00a0<\/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\/30\/carouselview-with-indicatorview-maui\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-1024x996.png\" alt=\"CarouselView with IndicatorView\" class=\"wp-image-374\" width=\"512\" height=\"498\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-1024x996.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-300x292.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-768x747.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-850x827.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView.png 1234w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">.Net MAUI \u2013 The Latest CarouselView\u00a0with\u00a0IndicatorView<\/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, CarouselView displays its item&nbsp;horizontally. Basically, We are using CarouselView for showing the banners in mobile applications. What is IndicatorView? IndicatorView in Xamarin forms is a view which displays indicators that represent the numbers&#8230;<\/p>\n","protected":false},"author":1,"featured_media":281,"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":[1],"tags":[15,16,14],"class_list":["post-282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-xamarin","tag-carouselview-in-xamarin-forms","tag-carouselview-with-indicatorview-in-xamarin-forms","tag-xamarin-forms-carouselview"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/282","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=282"}],"version-history":[{"count":23,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/282\/revisions"}],"predecessor-version":[{"id":763,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/282\/revisions\/763"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/281"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}