Learn how to create Carousel View in Xamarin Forms
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Carousel_View.MainPage"> <StackLayout> <!--carousel view will display text only--> <StackLayout BackgroundColor="LightBlue"> <CarouselView BackgroundColor="Green" Margin="10" HeightRequest="200" ItemsSource="{Binding Fruits}" > <CarouselView.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Name}" TextColor="White" FontSize="50" TextTransform="Uppercase" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" /> </StackLayout> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> </StackLayout> <!--carousel view will display text and photo--> <StackLayout BackgroundColor="Yellow"> <CarouselView BackgroundColor="LightGreen" Margin="5" HeightRequest="220" ItemsSource="{Binding Fruits}"> <CarouselView.ItemTemplate> <DataTemplate> <StackLayout BackgroundColor="Gray" Orientation="Horizontal" > <Image Source="{Binding Image}" HeightRequest="200" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" /> <Label Text="{Binding Name}" TextColor="Black" FontSize="30" TextTransform="Uppercase" VerticalOptions="Center" HorizontalOptions="Center" /> </StackLayout> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> </StackLayout> <!--carousel view will display text , photo and a Button --> <StackLayout BackgroundColor="LightGreen"> <CarouselView ItemsSource="{Binding Vegetables}" BackgroundColor="Transparent" PeekAreaInsets="40"> <CarouselView.ItemsLayout> <LinearItemsLayout ItemSpacing="10" Orientation="Horizontal" SnapPointsAlignment="Start" SnapPointsType="Mandatory"> </LinearItemsLayout> </CarouselView.ItemsLayout> <CarouselView.ItemTemplate> <DataTemplate> <StackLayout> <Frame CornerRadius="45" BackgroundColor="White" VerticalOptions="CenterAndExpand"> <StackLayout> <Image Source="{Binding Image}"/> <Label Text="{Binding Name}" FontSize="Large" TextTransform="Uppercase" HorizontalOptions="Center" /> <Button Text="Order NOW"/> </StackLayout> </Frame> </StackLayout> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> </StackLayout> </StackLayout> </ContentPage>
using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace App3 { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); BindingContext = this; Vegetables = new ObservableCollection<Vegetable> { new Vegetable{Image = "corn.jpg",Name="Corn"}, new Vegetable{Image = "carrot.jpg",Name="Carrot"}, new Vegetable{Image = "pepper.jpg",Name="Pepper"}, new Vegetable{Image = "tomato.jpg",Name="Tomato"}, new Vegetable{Image = "lemon.jpg",Name="Lemon"} }; Fruits = new ObservableCollection<Fruit> { new Fruit{Image = "apple.jpg",Name="Apple"}, new Fruit{Image = "banana.jpg",Name="Banana"}, new Fruit{Image = "mango.jpg",Name="Mango"}, new Fruit{Image = "orange.jpg",Name="Orange"}, new Fruit{Image = "strawberry.jpg",Name="Strawberry"} }; } public class Vegetable { public ImageSource Image { get; set; } public String Name { get; set; } } private ObservableCollection<Vegetable> vegetables; public ObservableCollection<Vegetable> Vegetables { get { return vegetables; } set { vegetables = value; OnPropertyChanged(); } } public class Fruit { public ImageSource Image { get; set; } public String Name { get; set; } } private ObservableCollection<Fruit> fruits; public ObservableCollection<Fruit> Fruits { get { return fruits; } set { fruits = value; OnPropertyChanged(); } } } }