How can I create a Xamarin.Forms cards carousel?

Question

How can I get this carousel of cards in Xamarin Forms?
I did it in ASP.Net-MVC C# and I'm using a JS plugin and HTML and CSS.
Now I need to do it using Xamarin Forms C# and XAML?

These are my namespaces:

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"

Answer 1

Install CarouselView.FormsPlugin into your NuGEt solution.

Add CarouselViewRenderer.Init(); in your MainActivity.s and AppDelegate.cs before LoadApplication(new App());

In your xaml where you want to use carousalview,

            <controls:CarouselViewControl   IndicatorsTintColor="LightBlue"  x:Name="TilesSlider" IsVisible="False"  ArrowsTintColor="White"   CurrentPageIndicatorTintColor="White"  ItemsSource="{Binding }" ShowIndicators="True" AnimateTransition="True" ShowArrows="True"  Orientation="Horizontal"  InterPageSpacing="10"   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
                <controls:CarouselViewControl.ItemTemplate>
                    <DataTemplate>

                        <Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="White" BorderColor="Snow" Margin="10,2,10,7">

                         <-----You can add your control her---->

                        </Frame>
                    </DataTemplate>
                </controls:CarouselViewControl.ItemTemplate>
            </controls:CarouselViewControl>

Inside the frame add your controls accordingly.

Answer 2

You can also use CardsView by nuget installing.

<ContentPage
x:Class="demo2.collection.Page14"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
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"
BackgroundColor="Black">
<ContentPage.Content>
    <StackLayout>
        <cards:CarouselView ItemsSource="{Binding Items}" SlideShowDuration="3500">
            <x:Arguments>

                <!--<proc:BaseCarouselFrontViewProcessor
                    OpacityFactor="0"
                    RotationFactor="0.1"
                    ScaleFactor="0.5" />

                <proc:BaseCarouselBackViewProcessor
                    OpacityFactor="0"
                    RotationFactor="0.1"
                    ScaleFactor="0.5" />-->

            </x:Arguments>
            <cards:CarouselView.ItemTemplate>
                <DataTemplate>
                    <ContentView>

                        <Frame
                            Padding="0"
                            CornerRadius="10"
                            HasShadow="false"
                            HeightRequest="300"
                            HorizontalOptions="Center"
                            IsClippedToBounds="true"
                            VerticalOptions="Center"
                            WidthRequest="300">

                            <ffimage:CachedImage Source="{Binding imagesource}" />

                        </Frame>
                    </ContentView>
                </DataTemplate>
            </cards:CarouselView.ItemTemplate>

            <controls:IndicatorsControl ToFadeDuration="1500" />

            <!--<controls:LeftArrowControl ToFadeDuration="2500" />

            <controls:RightArrowControl ToFadeDuration="2500" />-->
        </cards:CarouselView>
    </StackLayout>
</ContentPage.Content>

public partial class Page14 : ContentPage
{
    public ObservableCollection<model> Items { get; set; }
    public Page14 ()
    {
        InitializeComponent ();
        Items = new ObservableCollection<model>()
        {
            new model(){imagesource="a11.jpg"},
            new model(){imagesource="a12.jpg"},
            new model(){imagesource="a13.jpg"},
            new model(){imagesource="a14.jpg"},
            new model(){imagesource="a15.jpg"},
            new model(){imagesource="a9.jpg"}
        };
        this.BindingContext = this;
    }
}

public class model
{
    public string imagesource { get; set; }
   
}

Add the following code in Android Mainactivity and IOS AppDelegate, after Forms.Init()

CardsViewRenderer.Preserve() for iOS AppDelegate in FinishedLaunching

CardsViewRenderer.Preserve() for Android MainActivity in OnCreate

More ways about using CardsView, you can take a look:

https://github.com/AndreiMisiukevich/CardView