CarouselView is a view for presenting data in scrollable forms where users can swipe to move through a collection of items. By default, CarouselView displays its item horizontally. Basically, We are using CarouselView for showing the banners in mobile applications.
What is IndicatorView?
IndicatorView in MAUI is a view which displays indicators that represent the numbers of items and current position of a CarouselView.
In this article, I’m going to show you how to use CarouselView with IndicatorView in .Net MAUI.
CarouselView with IndicatorView article also available in Xamarin Forms click here to see. |
Let’s Start
In this article you will see :
- Normal CarouselView with IndicatorView
- CarouselView with PeekAreaInsets
- Add animation to CarouselView
- CarouselView with vertical orientation
- CarouselView with DataTemplateSelector
1 – Setting up the UI
1.1 – Normal CarouselView with IndicatorView
<!-- Carousel 1st --> <Frame Padding="15" HeightRequest="260" IsClippedToBounds="True"> <StackLayout Spacing="0"> <Label Text="Normal Carousel" /> <CarouselView x:Name="carouselView1" HeightRequest="200" IndicatorView="IV1" ItemsSource="{Binding ImageList1}" PeekAreaInsets="0"> <CarouselView.ItemsLayout> <LinearItemsLayout Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle" /> </CarouselView.ItemsLayout> <CarouselView.ItemTemplate> <DataTemplate> <StackLayout> <Frame Margin="5" Padding="0" CornerRadius="0" HasShadow="True" IsClippedToBounds="True"> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Image x:Name="BannerImage" Aspect="AspectFill" HeightRequest="170" HorizontalOptions="FillAndExpand" IsVisible="{Binding IsLoading}" Source="{Binding ImageUrl}" VerticalOptions="FillAndExpand" /> <StackLayout BackgroundColor="#55000000" HeightRequest="40" VerticalOptions="EndAndExpand"> <Label FontAttributes="Bold" FontSize="14" HorizontalOptions="CenterAndExpand" LineBreakMode="TailTruncation" Text="{Binding ImageName}" TextColor="White" VerticalOptions="CenterAndExpand" /> </StackLayout> </Grid> </Frame> </StackLayout> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> <IndicatorView x:Name="IV1" HorizontalOptions="Center" IndicatorColor="LightGray" IndicatorSize="10" SelectedIndicatorColor="DarkGray" /> </StackLayout> </Frame>
1.2 – CarouselView with PeekAreaInsets
<!-- Carousel 2nd --> <Frame Padding="15" HeightRequest="260" IsClippedToBounds="True"> <StackLayout> <Label Text="Carousel Animation with PeekAreaInsets" /> <CarouselView x:Name="carouselView2" HeightRequest="200" HorizontalOptions="FillAndExpand" IndicatorView="IV2" ItemsSource="{Binding ImageList2}" PeekAreaInsets="30"> <CarouselView.ItemTemplate> <DataTemplate> <carouselItem:CarouselItemView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" /> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> <IndicatorView x:Name="IV2" HorizontalOptions="Center" IndicatorColor="LightGray" IndicatorsShape="Square" SelectedIndicatorColor="{StaticResource ColorPrimary}" /> </StackLayout> </Frame>
- Use xmlns for accessing CarouselItemView.xaml , CarouselItemView2.xaml, CarouselItemView3.xaml and CarouselViewTemplateSelector.cs
xmlns:carouselItem="clr-namespace:MAUICarouselViewSample" xmlns:template="clr-namespace:MAUICarouselViewSample"
1.2.1 – CarouselItemView.xaml
<?xml version="1.0" encoding="utf-8" ?> <StackLayout x:Class="MAUICarouselViewSample.CarouselItemView" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> <Frame x:Name="FrameContainer" Margin="15" Padding="0" CornerRadius="20" HasShadow="True" IsClippedToBounds="True"> <Grid> <Image x:Name="BannerImage" Aspect="AspectFill" HeightRequest="170" IsVisible="{Binding IsLoading}" Source="{Binding ImageUrl}" /> <StackLayout BackgroundColor="#55000000" HeightRequest="40" VerticalOptions="EndAndExpand"> <Label FontAttributes="Bold" FontSize="14" HorizontalOptions="CenterAndExpand" LineBreakMode="TailTruncation" Text="{Binding ImageName}" TextColor="White" VerticalOptions="CenterAndExpand" /> </StackLayout> </Grid> </Frame> </StackLayout>
1.2.2 – Adding animation to CarouselItemView.xaml.cs
using Microsoft.Maui.Graphics; namespace MAUICarouselViewSample; public partial class CarouselItemView : StackLayout { private double _scale = 0; public CarouselItemView() { InitializeComponent(); _scale = FrameContainer.Scale; } protected override void OnParentSet() { base.OnParentSet(); if (Parent is CarouselView carouselView) { carouselView.CurrentItemChanged += CarouselView_CurrentItemChanged; carouselView.Scrolled += CarouselView_Scrolled; } } private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e) { if (e.HorizontalDelta < 0) { await FrameContainer.RotateTo(15); await FrameContainer.RotateTo(0); } else { await FrameContainer.RotateTo(-15); await FrameContainer.RotateTo(0); } } private async void CarouselView_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e) { await FrameContainer.ScaleTo(_scale * .5, 500); await FrameContainer.ScaleTo(_scale, 500); } }
1.3 – Add animation to CarouselView
<!-- Carousel 3rd --> <Frame Padding="15" HeightRequest="260" IsClippedToBounds="True"> <StackLayout> <Label Text="Carousel with Animation" /> <CarouselView HeightRequest="200" x:Name="carouselView3" HorizontalOptions="FillAndExpand" IndicatorView="IV3" ItemsSource="{Binding ImageList3}"> <CarouselView.ItemTemplate> <DataTemplate> <carouselItem:CarouselItemView2 /> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> <IndicatorView x:Name="IV3" HorizontalOptions="Center" IndicatorColor="LightGray" MaximumVisible="5" SelectedIndicatorColor="{StaticResource ColorBlack}" /> </StackLayout> </Frame> <!-- Carousel 4th --> <Frame Padding="15" HeightRequest="260" IsClippedToBounds="True"> <StackLayout> <Label Text="Carousel with Animation" /> <CarouselView x:Name="carouselView6" HeightRequest="200" HorizontalOptions="FillAndExpand" IndicatorView="IV4" ItemsSource="{Binding ImageList6}"> <CarouselView.ItemTemplate> <DataTemplate> <carouselItem:CarouselItemView3 /> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> <IndicatorView x:Name="IV4" HorizontalOptions="Center" IndicatorColor="LightGray" MaximumVisible="5" SelectedIndicatorColor="{StaticResource ColorPrimary}" /> </StackLayout> </Frame>
1.3.1 – CarouselItemView2.xaml
<?xml version="1.0" encoding="utf-8" ?> <StackLayout x:Class="MAUICarouselViewSample.CarouselItemView2" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> <Frame x:Name="FrameContainer" Margin="15" Padding="0" CornerRadius="20" HasShadow="True" HorizontalOptions="Fill" IsClippedToBounds="True" VerticalOptions="Fill"> <Grid> <Image x:Name="BannerImage" Aspect="AspectFill" HeightRequest="170" HorizontalOptions="Fill" IsVisible="{Binding IsLoading}" Source="{Binding ImageUrl}" VerticalOptions="Fill" /> <StackLayout BackgroundColor="#55000000" HeightRequest="40" VerticalOptions="EndAndExpand"> <Label FontAttributes="Bold" FontSize="14" HorizontalOptions="CenterAndExpand" LineBreakMode="TailTruncation" Text="{Binding ImageName}" TextColor="White" VerticalOptions="CenterAndExpand" /> </StackLayout> </Grid> </Frame> </StackLayout>
1.3.2 – Adding animation to CarouselItemView2.xaml.cs
namespace MAUICarouselViewSample; public partial class CarouselItemView2 : StackLayout { private double _scale = 0; public CarouselItemView2() { InitializeComponent(); _scale = FrameContainer.Scale; } protected override void OnParentSet() { base.OnParentSet(); if (Parent is CarouselView carouselView) { carouselView.Scrolled += CarouselView_Scrolled; } } private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e) { await FrameContainer.ScaleTo(0.7, 100); await FrameContainer.ScaleTo(_scale * .7, 100); await FrameContainer.ScaleTo(_scale, 100); } }
1.3.3 – CarouselItemView3.xaml
<?xml version="1.0" encoding="utf-8" ?> <StackLayout x:Class="MAUICarouselViewSample.CarouselItemView3" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> <Frame x:Name="FrameContainer" Margin="15" Padding="0" CornerRadius="20" HasShadow="True" IsClippedToBounds="True"> <Grid> <Image x:Name="BannerImage" Aspect="AspectFill" HeightRequest="170" IsVisible="{Binding IsLoading}" Source="{Binding ImageUrl}" /> <StackLayout BackgroundColor="#55000000" HeightRequest="40" VerticalOptions="EndAndExpand"> <Label FontAttributes="Bold" FontSize="14" HorizontalOptions="CenterAndExpand" LineBreakMode="TailTruncation" Text="{Binding ImageName}" TextColor="White" VerticalOptions="CenterAndExpand" /> </StackLayout> </Grid> </Frame> </StackLayout>
1.3.4 – Adding animation to CarouselItemView3.xaml.cs
namespace MAUICarouselViewSample; public partial class CarouselItemView3 : StackLayout { private double _scale = 0; public CarouselItemView3() { InitializeComponent(); _scale = FrameContainer.Scale; } protected override void OnParentSet() { base.OnParentSet(); if (Parent is CarouselView carouselView) { carouselView.Scrolled += CarouselView_Scrolled; } } private async void CarouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e) { await FrameContainer.ScaleTo(_scale * 1.1, 400); await FrameContainer.ScaleTo(_scale, 400); } }
1.4 – CarouselView with vertical orientation
<!-- Carousel 5th --> <Frame Padding="15" HeightRequest="260" IsClippedToBounds="True"> <StackLayout> <Label Text="Carousel with Vertical Orientation" /> <CarouselView x:Name="carouselView4" HorizontalOptions="FillAndExpand" IndicatorView="IV5" HeightRequest="200" ItemsSource="{Binding ImageList4}" PeekAreaInsets="0"> <CarouselView.ItemsLayout> <LinearItemsLayout Orientation="Vertical" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle" /> </CarouselView.ItemsLayout> <CarouselView.ItemTemplate> <DataTemplate> <carouselItem:CarouselItemView2 /> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> <IndicatorView x:Name="IV5" HorizontalOptions="Center" IndicatorColor="LightGray" IndicatorsShape="Square" SelectedIndicatorColor="Red" /> </StackLayout> </Frame>
1.5 – CarouselView with DataTemplateSelector
<!-- Carousel 6th --> <Frame Padding="15" HeightRequest="260" IsClippedToBounds="True"> <StackLayout> <Label Text="Carousel with TemplateSelector" /> <CarouselView x:Name="carouselView5" HorizontalOptions="FillAndExpand" IndicatorView="IV6" HeightRequest="200" ItemTemplate="{StaticResource TemplateSelector}" ItemsSource="{Binding ImageList5}" PeekAreaInsets="10"> <CarouselView.ItemsLayout> <LinearItemsLayout Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle" /> </CarouselView.ItemsLayout> <!-- CarouselView EmptyView --> <CarouselView.EmptyView> <StackLayout HorizontalOptions="CenterAndExpand" Orientation="Vertical" Spacing="10" VerticalOptions="CenterAndExpand"> <ActivityIndicator HeightRequest="30" HorizontalOptions="CenterAndExpand" IsRunning="True" VerticalOptions="CenterAndExpand" WidthRequest="30" Color="Gray" /> <Label FontSize="16" HorizontalOptions="CenterAndExpand" Text="Loading Banner List..." TextColor="Gray" VerticalOptions="StartAndExpand" /> </StackLayout> </CarouselView.EmptyView> </CarouselView> <IndicatorView x:Name="IV6" HorizontalOptions="Center" IndicatorColor="LightGray" IndicatorsShape="Square" SelectedIndicatorColor="Red" /> </StackLayout> </Frame>
1.6 – ContentPage ResourceDictionary
<ContentPage.Resources> <ResourceDictionary> <Style TargetType="Label"> <Setter Property="TextColor" Value="{StaticResource Primary}" /> <Setter Property="FontSize" Value="14" /> <Setter Property="Margin" Value="10,0,10,0" /> <Setter Property="FontAttributes" Value="Bold" /> </Style> <Style TargetType="Frame"> <Setter Property="HasShadow" Value="False" /> <Setter Property="Padding" Value="15" /> <Setter Property="BorderColor" Value="{StaticResource Primary}" /> </Style> </ResourceDictionary> <!-- CarouselView Data Template Selector --> <DataTemplate x:Key="CurveTemplate"> <StackLayout> <Frame Margin="5" Padding="1" BorderColor="{StaticResource ColorBlack}" CornerRadius="30" HasShadow="True" IsClippedToBounds="True"> <Grid> <Image x:Name="BannerImage" Aspect="AspectFill" HeightRequest="170" IsVisible="{Binding IsLoading}" Source="{Binding ImageUrl}" /> <StackLayout BackgroundColor="#55000000" HeightRequest="40" VerticalOptions="EndAndExpand"> <Label FontAttributes="Bold" FontSize="14" HorizontalOptions="CenterAndExpand" LineBreakMode="TailTruncation" Text="{Binding ImageName}" TextColor="White" VerticalOptions="CenterAndExpand" /> </StackLayout> </Grid> </Frame> </StackLayout> </DataTemplate> <DataTemplate x:Key="SquareTemplate"> <StackLayout> <Frame Margin="5" Padding="1" BorderColor="{StaticResource ColorBlack}" CornerRadius="0" HasShadow="True" IsClippedToBounds="True"> <Grid> <Image x:Name="BannerImage" Aspect="AspectFill" HeightRequest="170" IsVisible="{Binding IsLoading}" Source="{Binding ImageUrl}" /> <StackLayout BackgroundColor="#55000000" HeightRequest="40" VerticalOptions="EndAndExpand"> <Label FontAttributes="Bold" FontSize="14" HorizontalOptions="CenterAndExpand" LineBreakMode="TailTruncation" Text="{Binding ImageName}" TextColor="White" VerticalOptions="CenterAndExpand" /> </StackLayout> </Grid> </Frame> </StackLayout> </DataTemplate> <template:CarouselViewTemplateSelector x:Key="TemplateSelector" CurveTemplate="{StaticResource CurveTemplate}" SquareTemplate="{StaticResource SquareTemplate}" /> </ContentPage.Resources>
2 – Creating a CarouselViewTemplateSelector.cs class
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace MAUICarouselViewSample { public class CarouselViewTemplateSelector : DataTemplateSelector { public DataTemplate CurveTemplate { get; set; } public DataTemplate SquareTemplate { get; set; } protected override DataTemplate OnSelectTemplate(object item, BindableObject container) { BannerImage banner = (BannerImage)item; return banner.IsSquareView ? SquareTemplate : CurveTemplate; } } }
Now, we have completed the UI part.
3 – Setting up the ViewModel
3.1 – Create a MainPageViewModel.cs class
using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Linq; using System.Text; using System.Threading.Tasks; namespace MAUICarouselViewSample { public class MainPageViewModel : BaseViewModel { private ObservableCollection<BannerImage> _imageList1; private ObservableCollection<BannerImage> _imageList2; private ObservableCollection<BannerImage> _imageList3; private ObservableCollection<BannerImage> _imageList4; private ObservableCollection<BannerImage> _imageList5; private ObservableCollection<BannerImage> _imageList6; public MainPageViewModel() { Application.Current.Dispatcher.Dispatch(() => { ImageList1 = GetImageList1(); ImageList2 = GetImageList2(); ImageList3 = GetImageList3(); ImageList4 = GetImageList4(); ImageList6 = GetImageList6(); // Load 5th Banner list after 10 Second Task.Delay(10000).ContinueWith(t => Get5thBannerList()); }); } private void Get5thBannerList() { ImageList5 = GetImageList5(); } public ObservableCollection<BannerImage> ImageList1 { get => _imageList1; set { _imageList1 = value; OnPropertyChanged(); } } public ObservableCollection<BannerImage> ImageList2 { get => _imageList2; set { _imageList2 = value; OnPropertyChanged(); } } public ObservableCollection<BannerImage> ImageList3 { get => _imageList3; set { _imageList3 = value; OnPropertyChanged(); } } public ObservableCollection<BannerImage> ImageList4 { get => _imageList4; set { _imageList4 = value; OnPropertyChanged(); } } public ObservableCollection<BannerImage> ImageList5 { get => _imageList5; set { _imageList5 = value; OnPropertyChanged(); } } public ObservableCollection<BannerImage> ImageList6 { get => _imageList6; set { _imageList6 = value; OnPropertyChanged(); } } } }
3.2 – Creating a BaseViewModel.cs class
using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.ComponentModel; using System.Linq; using System.Runtime.CompilerServices; using System.Text; using System.Threading.Tasks; namespace MAUICarouselViewSample { public class BaseViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } public ObservableCollection<BannerImage> GetImageList1() { ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>(); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "one.jpg", ImageUrl = ImageSource.FromFile("one.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "two.jpg", ImageUrl = ImageSource.FromFile("two.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "three.jpg", ImageUrl = ImageSource.FromFile("three.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "four.jpg", ImageUrl = ImageSource.FromFile("four.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "five.jpg", ImageUrl = ImageSource.FromFile("five.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "six.jpg", ImageUrl = ImageSource.FromFile("six.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "Image pexels-photo-257840", ImageUrl = ImageSource.FromFile("gif4.gif") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#F0048A"), ImageName = "Image pexels-photo-257840", ImageUrl = ImageSource.FromFile("gif5.gif") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#D7DBDD"), ImageName = "Image img5", ImageUrl = ImageSource.FromFile("img5.jpeg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#F7DC6F"), ImageName = "Image img6", ImageUrl = ImageSource.FromFile("img6.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#7DCEA0"), ImageName = "Image img7", ImageUrl = ImageSource.FromFile("img7.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#7FB3D5"), ImageName = "Image img8", ImageUrl = ImageSource.FromFile("img8.jpeg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#C39BD3"), ImageName = "Image img9", ImageUrl = ImageSource.FromFile("img9.jpeg") }); return ImageList; } public ObservableCollection<BannerImage> GetImageList2() { ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>(); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "five.jpg", ImageUrl = ImageSource.FromFile("five.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "six.jpg", ImageUrl = ImageSource.FromFile("six.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img9", ImageUrl = ImageSource.FromFile("img9.jpeg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "one.jpg", ImageUrl = ImageSource.FromFile("one.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "two.jpg", ImageUrl = ImageSource.FromFile("two.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "three.jpg", ImageUrl = ImageSource.FromFile("three.jpg") }); ImageList.Add(new BannerImage() { HeaderColor = Color.FromArgb("#00FF00"), ImageName = "four.jpg", ImageUrl = ImageSource.FromFile("four.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img6", ImageUrl = ImageSource.FromFile("img6.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img7", ImageUrl = ImageSource.FromFile("img7.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img8", ImageUrl = ImageSource.FromFile("img8.jpeg") }); ImageList.Add(new BannerImage() { ImageName = "Image img5", ImageUrl = ImageSource.FromFile("img5.jpeg") }); return ImageList; } public ObservableCollection<BannerImage> GetImageList3() { ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>(); ImageList.Add(new BannerImage() { ImageName = "seven.jpg", ImageUrl = ImageSource.FromFile("seven.jpg") }); ImageList.Add(new BannerImage() { ImageName = "three.jpg", ImageUrl = ImageSource.FromFile("three.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img7", ImageUrl = ImageSource.FromFile("img7.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img6", ImageUrl = ImageSource.FromFile("img6.jpg") }); ImageList.Add(new BannerImage() { ImageName = "four.jpg", ImageUrl = ImageSource.FromFile("four.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img8", ImageUrl = ImageSource.FromFile("img8.jpeg") }); ImageList.Add(new BannerImage() { ImageName = "Image img9", ImageUrl = ImageSource.FromFile("img9.jpeg") }); ImageList.Add(new BannerImage() { ImageName = "one.jpg", ImageUrl = ImageSource.FromFile("one.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img5", ImageUrl = ImageSource.FromFile("img5.jpeg") }); ImageList.Add(new BannerImage() { ImageName = "six.jpg", ImageUrl = ImageSource.FromFile("six.jpg") }); ImageList.Add(new BannerImage() { ImageName = "five.jpg", ImageUrl = ImageSource.FromFile("five.jpg") }); return ImageList; } public ObservableCollection<BannerImage> GetImageList4() { ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>(); ImageList.Add(new BannerImage() { ImageName = "three.jpg", ImageUrl = ImageSource.FromFile("three.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img5", ImageUrl = ImageSource.FromFile("img5.jpeg") }); ImageList.Add(new BannerImage() { ImageName = "two.jpg", ImageUrl = ImageSource.FromFile("two.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img8", ImageUrl = ImageSource.FromFile("img8.jpeg") }); ImageList.Add(new BannerImage() { ImageName = "Image img9", ImageUrl = ImageSource.FromFile("img9.jpeg") }); ImageList.Add(new BannerImage() { ImageName = "four.jpg", ImageUrl = ImageSource.FromFile("four.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img7", ImageUrl = ImageSource.FromFile("img7.jpg") }); ImageList.Add(new BannerImage() { ImageName = "Image img6", ImageUrl = ImageSource.FromFile("img6.jpg") }); ImageList.Add(new BannerImage() { ImageName = "five.jpg", ImageUrl = ImageSource.FromFile("five.jpg") }); return ImageList; } public ObservableCollection<BannerImage> GetImageList5() { ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>(); ImageList.Add(new BannerImage() { IsSquareView = false, ImageName = "one.jpg", ImageUrl = ImageSource.FromFile("one.jpg") }); ImageList.Add(new BannerImage() { IsSquareView = true, ImageName = "two.jpg", ImageUrl = ImageSource.FromFile("two.jpg") }); ImageList.Add(new BannerImage() { IsSquareView = false, ImageName = "three.jpg", ImageUrl = ImageSource.FromFile("three.jpg") }); ImageList.Add(new BannerImage() { IsSquareView = true, ImageName = "four.jpg", ImageUrl = ImageSource.FromFile("four.jpg") }); ImageList.Add(new BannerImage() { IsSquareView = false, ImageName = "five.jpg", ImageUrl = ImageSource.FromFile("five.jpg") }); ImageList.Add(new BannerImage() { IsSquareView = true, ImageName = "six.jpg", ImageUrl = ImageSource.FromFile("six.jpg") }); ImageList.Add(new BannerImage() { IsSquareView = false, ImageName = "seven.jpg", ImageUrl = ImageSource.FromFile("seven.jpg") }); return ImageList; } public ObservableCollection<BannerImage> GetImageList6() { ObservableCollection<BannerImage> ImageList = new ObservableCollection<BannerImage>(); ImageList.Add(new BannerImage() { IsSquareView = true, ImageName = "Image img9", ImageUrl = ImageSource.FromFile("img9.jpeg") }); ImageList.Add(new BannerImage() { IsSquareView = false, ImageName = "Image img5", ImageUrl = ImageSource.FromFile("img5.jpeg") }); ImageList.Add(new BannerImage() { IsSquareView = true, ImageName = "Image img8", ImageUrl = ImageSource.FromFile("img8.jpeg") }); ImageList.Add(new BannerImage() { IsSquareView = false, ImageName = "Image img7", ImageUrl = ImageSource.FromFile("img7.jpg") }); ImageList.Add(new BannerImage() { IsSquareView = true, ImageName = "Image img6", ImageUrl = ImageSource.FromFile("img6.jpg") }); return ImageList; } } }
Now, We have completed the coding, Let’s try to run the application.
4 – Result
That’s all for now!
You can check the full source code here.
Happy Coding! 😀
You may also like