Skip to content
CardsView & CarouselView for Xamarin.Forms
Branch: master
Clone or download
Latest commit b7ca322 Mar 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
PanCardView.Droid #175 Mar 24, 2019
PanCardView.iOS
PanCardView #175 Mar 24, 2019
PanCardViewSample Added GTK support Mar 15, 2019
docs fixed docs Mar 24, 2019
images
.gitignore Added AnimationChecker and Android Service Aug 24, 2018
LICENSE Initial commit Jan 9, 2018
PanCardView.nuspec bump 2.0.6 Mar 24, 2019
README.md Update README.md Mar 15, 2019

README.md

CardsView and CarouselView controls for Xamarin Forms (based on Xamarin Forms AbsoluteLayout)

CardsView

This plugin provides opportunity to create swipeable CardsView in Xamarin.Forms applications like Tinder app has.

CarouselView

You are able to setup CarouselView control, that is based on CardsView

CoverFlowView

Also you can setup CoverFlowView control, that is based on CarouselView

CoverFlowView sample: https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardViewSample/PanCardViewSample/Views/CoverFlowSampleXamlView.xaml

Setup

  • Available on NuGet: CardsView NuGet
  • Add nuget package to your Xamarin.Forms .NETSTANDARD/PCL project and to your platform-specific projects
  • Just in case add:
    • CardsViewRenderer.Preserve() for iOS AppDelegate in FinishedLaunching
    • CardsViewRenderer.Preserve() for Android MainActivity in OnCreate
Platform Version
Xamarin.iOS iOS 7+
Xamarin.Mac All
Xamarin.Android API 15+
Windows 10 UWP 10+
Tizen 4.0+
Gtk All
.NET Standard 2.0+

Custom Animations

You are able to create custom animations, just implement ICardProcessor or extend created processors (change animation speed or type) https://github.com/AndreiMisiukevich/CardView/tree/master/PanCardView/Processors

Samples

The sample you can find here https://github.com/AndreiMisiukevich/CardView/tree/master/PanCardViewSample

C#:

-> Create CardsView and setup it

var cardsView = new CardsView
{
    ItemTemplate = new DataTemplate(() => new ContentView()) //your template
};
cardsView.SetBinding(CardsView.ItemsSourceProperty, nameof(PanCardSampleViewModel.Items));
cardsView.SetBinding(CardsView.SelectedIndexProperty, nameof(PanCardSampleViewModel.CurrentIndex));

-> Optionaly you can create ViewModel... or not... as you wish

-> Indicators bar (For CarouselView, perhaps). It's easy to add indicators -> Just add IndicatorsControl into your carouselView as a child view.

carouselView.Children.Add(new IndicatorsControl());

XAML:

<cards:CarouselView 
    ItemsSource="{Binding Items}"
    SelectedIndex="{Binding CurrentIndex}">
    <cards:CarouselView.ItemTemplate>
        <DataTemplate>
            <ContentView>
                <Frame 
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                    HeightRequest="300"
                    WidthRequest="300"
                    Padding="0" 
                    HasShadow="false"
                    IsClippedToBounds="true"
                    CornerRadius="10"
                    BackgroundColor="{Binding Color}">
                    
                    <Image Source="{Binding Source}"/> 
                    
                </Frame>
            </ContentView>
        </DataTemplate>
    </cards:CarouselView.ItemTemplate>

    <controls:LeftArrowControl/>
    <controls:RightArrowControl/>
    <controls:IndicatorsControl/>
</cards:CarouselView>

Also you are able to manage IndicatorsControl appearing/disappearing. For example if user doesn't select new page during N miliseconds, the indicators will disappear. Just set ToFadeDuration = 2000 (2 seconds delay before disappearing) Yoy manage LeftArrowControl and RightArrowControl as well as IndicatorsControl (ToFadeDuration is presented too).

Indicators styling:

 <ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="ActiveIndicator" TargetType="Frame">
            <Setter Property="BackgroundColor" Value="Red" />
        </Style>
        <Style x:Key="InactiveIndicator" TargetType="Frame">
            <Setter Property="BackgroundColor" Value="Transparent" />
            <Setter Property="OutlineColor" Value="Red" />
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

... 

<controls:IndicatorsControl ToFadeDuration="1500"
          SelectedIndicatorStyle="{StaticResource ActiveIndicator}"
          UnselectedIndicatorStyle="{StaticResource InactiveIndicator}"/>

if you want to add items directly through xaml

...
    <cards:CarouselView.ItemsSource>
            <x:Array Type="{x:Type View}">
                <ContentView>
                    <Image Source="yourImage.png"/>
                </ContentView>
                <RelativeLayout>
                    <Button Text="Click" />
                </RelativeLayout>
                <StackLayout>
                    <Label Text="any text"/>
                </StackLayout>
            </x:Array>
    </cards:CarouselView.ItemsSource>
...

-> If you want to customize indicators, you need set SelectedIndicatorStyle and/or UnselectedIndicatorStyle, or you are able to extend this class and override several methods. Also you can customize position of indicators (You need to set Rotation / AbsoluteLayout Flags and Bounds etc.)

This class is describing default indicators styles (each default indicator item is Frame) https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/Styles/DefaultIndicatorItemStyles.cs

Workarounds

-> If you want to put your cardsView/carouselView INTO scroll view, you should to use ParentScrollView instead of Xamarin.Forms.ScrollView. Set VerticalSwipeThresholdDistance rahter big value on Android.. otherwise sometimes fast scroll gestures can be interpritated as swipe.

-> If you want to put cardsView/carouselView INTO ListView or INTO any another scrollable view you should follow these steps

  1. Create your own class and implement IOrdinateHandlerParentView interface (It's needed only for iOS, but do it into shared project)
  2. Create the renderer for this class (For Android)

Check these classes (I implemented it for ParentScrollView. You can use it as example, nothing difficult :)) https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/Controls/ParentScrollView.cs https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView.Droid/ParentScrollViewRenderer.cs

-> If you want to put your cardsView/carouselView INTO a TabbedPage on Android:

  1. Add an event handler for the UserInteraction event
  2. On UserInteractionStatus.Started: Disable TabbedPage Swipe Scrolling
  3. On UserInteractionStatus.Ending/Ended: Enabled TabbedPage Swipe Scrolling

Example:

  1. TabbedPage:
public partial class TabbedHomePage : Xamarin.Forms.TabbedPage
{
    public static TabbedHomePage Current { get; private set; }

    public TabbedHomePage()
    {
        Current = this;
    }

    public static void DisableSwipe()
    {
        Current.On<Android>().DisableSwipePaging();
    }
    
    public static void EnableSwipe()
    {
        Current.On<Android>().EnableSwipePaging();
    }
}
  1. Page with CardsView/CarouselView:
public PageWithCarouselView()
{
    InitializeComponent();

    carouselView.UserInteracted += CarouselView_UserInteracted;
}

private void CarouselView_UserInteracted(PanCardView.CardsView view, PanCardView.EventArgs.UserInteractedEventArgs args)
{
    if (args.Status == PanCardView.Enums.UserInteractionStatus.Started)
    {
        TabbedHomePage.DisableSwipe();
    }
    if (args.Status == PanCardView.Enums.UserInteractionStatus.Ended)
    {
        TabbedHomePage.EnableSwipe();
    }
}

-> If you don't want to handle vertical swipes or they interrupt your scrolling, you can set VerticalSwipeThresholdDistance = "2000" This property responds for vertical swipe detecting threshold

-> If all these tricks didn't help you, you may use IsPanInteractionEnabled = false This trick disables pan interaction, but preserve ability to swipe cards.

-> If you get crashes during ItemsSource update, try to add/set items in Main Thread (Device.BeginInvokeInMainThread)

-> GTK use click / double click for forward/back navigation.

Check source code for more info, or 🇧🇾 just ask me =) 🇧🇾

Full documentation

https://github.com/AndreiMisiukevich/CardView/tree/master/docs

License

The MIT License (MIT) see License file

Contribution

Feel free to create issues and PRs 😃

You can’t perform that action at this time.