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();
}
}
}
}