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







}
}

 

 

Github : https://github.com/nady2999/Xamarin-Forms-Carousel-View


Pin It on Pinterest

Share This