Xamarin Forms : How to create Cover flow Animation in Xamarin forms

Introduction

This article demonstrates how to create a Cover flow Animation Application using C# and XAML in Xamarin.Forms. Let’s start.

Step 1

Open Visual Studio and go to New Project >> Multiplatform >>App >>Blank Forms App >> Next

Then give your project a name and location.

Step 2

Open Solution Explorer >> Project Name >> Mainpage.xaml. Double click to open the Design View of this page. This page is the Design page or Front-end.

Step 3

Add CardsViews and FFImageloadingForms library from Nuget package.

Step 4

Create view model class name CardsSampleViewModel. Code is here

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Input;
using Xamarin.Forms;
using System.Linq;
using FFImageLoading;
using PanCardView.Extensions;

namespace CoverFlowAnimation.ViewModels
{
public sealed class CardsSampleViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

    private int _currentIndex;
    private int _imageCount = 1078;

    public CardsSampleViewModel()
    {
        Items = new ObservableCollection<object>
        {
            new { Source = "https://image.freepik.com/free-photo/assorted-daisies-compositions_23-2147804462.jpg", Ind = _imageCount++, Color = Color.Red, Title = "First" },
            new { Source = "https://image.freepik.com/free-photo/peonies-succulents-composition_23-2147804407.jpg", Ind = _imageCount++, Color = Color.Green, Title = "Second" },
            new { Source = "https://image.freepik.com/free-photo/outdoors-profession-elements-scenery-colorful_1304-1043.jpg", Ind = _imageCount++, Color = Color.Gold, Title = "Long Title" },
            new { Source = "https://image.freepik.com/free-photo/spring-flower-design_114104-42.jpg", Ind = _imageCount++, Color = Color.Silver, Title = "4" },
            new { Source = "https://image.freepik.com/free-photo/pink-white-rose_1339-1135.jpg", Ind = _imageCount++, Color = Color.Blue, Title = "5th" }
        };

        PanPositionChangedCommand = new Command(v =>
        {
            if (IsAutoAnimationRunning || IsUserInteractionRunning)
            {
                return;
            }

            var index = CurrentIndex + (bool.Parse(v.ToString()) ? 1 : -1);
            if (index < 0 || index >= Items.Count)
            {
                return;
            }
            CurrentIndex = index;
        });

        RemoveCurrentItemCommand = new Command(() =>
        {
            if (!Items.Any())
            {
                return;
            }
            Items.RemoveAt(CurrentIndex.ToCyclicalIndex(Items.Count));
        });

        GoToLastCommand = new Command(() =>
        {
            CurrentIndex = Items.Count - 1;
        });
    }

    public ICommand PanPositionChangedCommand { get; }

    public ICommand RemoveCurrentItemCommand { get; }

    public ICommand GoToLastCommand { get; }

    public int CurrentIndex
    {
        get => _currentIndex;
        set
        {
            _currentIndex = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(CurrentIndex)));
        }
    }

    public bool IsAutoAnimationRunning { get; set; }

    public bool IsUserInteractionRunning { get; set; }

    public ObservableCollection<object> Items { get; }

    private string CreateSource()
    {
        var source = $"https://picsum.photos/500/500?image={_imageCount}";
        return source;
    }
}

}

Step 5

Main.xaml code is here:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView" xmlns:ffimage="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" xmlns:proc="clr-namespace:PanCardView.Processors;assembly=PanCardView" xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView" xmlns:viewModels="clr-namespace:CoverFlowAnimation.ViewModels" mc:Ignorable="d" x:Class="CoverFlowAnimation.MainPage">
    <ContentPage.BindingContext>
        <viewModels:CardsSampleViewModel/>
    </ContentPage.BindingContext>

    <StackLayout>
            <cards:CoverFlowView
                x:Name="covers"
                PositionShiftValue="145"
                IsCyclical="false"
                SelectedIndex="{Binding CurrentIndex}"
                ItemsSource="{Binding Items}">
                
                <x:Arguments>
                    <proc:CoverFlowProcessor ScaleFactor="0.75" OpacityFactor="0.25" />
                </x:Arguments>

            <cards:CoverFlowView.ItemTemplate >
                <DataTemplate>
                   <Frame 
                       Margin="80"
                       VerticalOptions="Center"
                       HorizontalOptions="Fill"
                       Padding="0" 
                       HasShadow="false"
                       IsClippedToBounds="true"
                       CornerRadius="10"

                       BackgroundColor="{Binding Color}">
                       
                            <ffimage:CachedImage Source="{Binding Source}" Aspect="AspectFill"/> 
                        </Frame>
                </DataTemplate>
            </cards:CoverFlowView.ItemTemplate>

            <controls:LeftArrowControl
                AbsoluteLayout.LayoutBounds="0, 1, -1, -1"
                />
            <controls:RightArrowControl
                AbsoluteLayout.LayoutBounds="1, 1, -1, -1"
                />

        </cards:CoverFlowView>
        
        <Button Text="TO LAST" Command="{Binding GoToLastCommand}" />
        
    </StackLayout>
    
</ContentPage>

Step 6

In Android project, Put this code after Forms.Init in MainActivity.cs. Code is here

CardsViewRenderer.Preserve();
FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer: true);

Step 7

In iOS project, Put this code after LoadApplication

CardsViewRenderer.Preserve();
FFImageLoading.Forms.Platform.CachedImageRenderer.Init();