{"id":16352577,"url":"https://github.com/andreimisiukevich/cardview","last_synced_at":"2025-05-15T01:09:33.815Z","repository":{"id":37587783,"uuid":"116882320","full_name":"AndreiMisiukevich/CardView","owner":"AndreiMisiukevich","description":"CardsView | CarouselView | CoverflowView | CubeView for Xamarin.Forms ","archived":false,"fork":false,"pushed_at":"2023-02-21T06:14:35.000Z","size":3497,"stargazers_count":704,"open_issues_count":0,"forks_count":113,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-15T01:09:27.938Z","etag":null,"topics":["cardsview","cardviews","carousel","carouselview","coverflow","coverflowview","cubeview","hacktoberfest","tinder-swiper","xamarin-forms"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndreiMisiukevich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-09T23:24:56.000Z","updated_at":"2025-05-14T08:34:44.000Z","dependencies_parsed_at":"2024-06-20T21:48:48.672Z","dependency_job_id":"722bbad6-cbbe-4307-9520-0c71dfb10e42","html_url":"https://github.com/AndreiMisiukevich/CardView","commit_stats":{"total_commits":776,"total_committers":23,"mean_commits":33.73913043478261,"dds":0.07860824742268047,"last_synced_commit":"a312f951f38b34b17a175500a1cae8c9cf3d7ef3"},"previous_names":[],"tags_count":100,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreiMisiukevich%2FCardView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreiMisiukevich%2FCardView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreiMisiukevich%2FCardView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreiMisiukevich%2FCardView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndreiMisiukevich","download_url":"https://codeload.github.com/AndreiMisiukevich/CardView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254043,"owners_count":22039792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cardsview","cardviews","carousel","carouselview","coverflow","coverflowview","cubeview","hacktoberfest","tinder-swiper","xamarin-forms"],"created_at":"2024-10-11T01:26:49.158Z","updated_at":"2025-05-15T01:09:28.800Z","avatar_url":"https://github.com/AndreiMisiukevich.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003chtml\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/AndreiMisiukevich/CardView/master/images/Cardsview-logotype-main.png\" width=\"400\"\u003e\n  \u003c/p\u003e\n\u003c/html\u003e\n\n## GIF\n\u003chtml\u003e\n  \u003ctable style=\"width:100%\"\u003e\n    \u003ctr\u003e\n      \u003cth\u003eCardsView\u003c/th\u003e\n      \u003cth\u003eCarouselView\u003c/th\u003e \n      \u003cth\u003eCoverFlowView\u003c/th\u003e\n      \u003cth\u003eCubeView\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003cimg src=\"https://media.giphy.com/media/3oFzlV5tQhF1udDxIY/giphy.gif\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://media.giphy.com/media/du0akXCuO8BTHzBuat/giphy.gif\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://media.giphy.com/media/1dH0dPqdPHwkDadmAx/giphy.gif\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://media.giphy.com/media/SXmXvjNJQMCcWMrvPj/giphy.gif\"\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/html\u003e\n\n\u003chtml\u003e\n  \u003ctable style=\"width:100%\"\u003e\n    \u003ctr\u003e\n      \u003cth\u003eScaleFactor \u0026 OpacityFactor\u003c/th\u003e\n      \u003cth\u003eScaleFactory \u0026 OpacityFactor [2]\u003c/th\u003e\n      \u003cth\u003eTabsControl\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003cimg src=\"https://media.giphy.com/media/S9EVF6Xzq6K488rr5B/giphy.gif\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg height=\"480\" src=\"https://github.com/AndreiMisiukevich/AvengersCards/blob/master/example.gif?raw=true\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://media.giphy.com/media/JNxG5fFS1pa886U9N0/giphy.gif\"\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/html\u003e\n\n* CoverFlowView sample: https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardViewSample/PanCardViewSample/Views/CoverFlowSampleXamlView.xaml\n* CarouselView sample:\nhttps://github.com/AndreiMisiukevich/CardView/blob/master/PanCardViewSample/PanCardViewSample/Views/CarouselSampleXamlView.xaml\n* CubeView sample:\nhttps://github.com/AndreiMisiukevich/CardView/blob/master/PanCardViewSample/PanCardViewSample/Views/CubeSampleXamlView.xaml\n* CardsView sample:\nhttps://github.com/AndreiMisiukevich/CardView/blob/master/PanCardViewSample/PanCardViewSample/Views/CardsSampleView.cs\n\n\n## Setup\n* Available on NuGet: [CardsView](http://www.nuget.org/packages/CardsView) [![NuGet](https://img.shields.io/nuget/v/CardsView.svg?label=NuGet)](https://www.nuget.org/packages/CardsView)\n* Add nuget package to your Xamarin.Forms .NETSTANDARD/PCL project and to your platform-specific projects\n* Add (**AFTER** ```Forms.Init(...)```):\n  - **CardsViewRenderer.Preserve()** AppDelegate in **FinishedLaunching** for **iOS** \n  - **CardsViewRenderer.Preserve()** MainActivity in **OnCreate** for **Android**\n\n|Platform|Version|\n| ------------------- | :-----------: |\n|Xamarin.iOS|iOS 7+|\n|Xamarin.Mac|All|\n|Xamarin.Android|API 15+|\n|Windows 10 UWP|10+|\n|Tizen|4.0+|\n|Gtk|All|\n|WPF|.NET 4.5|\n|.NET Standard|2.0+|\n\n**C#:**\n\n-\u003e Create CardsView and setup it\n```csharp\nvar cardsView = new CardsView\n{\n    ItemTemplate = new DataTemplate(() =\u003e new ContentView()) //your template\n};\ncardsView.SetBinding(CardsView.ItemsSourceProperty, nameof(PanCardSampleViewModel.Items));\ncardsView.SetBinding(CardsView.SelectedIndexProperty, nameof(PanCardSampleViewModel.CurrentIndex));\n```\n-\u003e Optionaly you can create ViewModel... or not... as you wish\n\n-\u003e Indicators bar (For CarouselView, perhaps). It's easy to add indicators\n-\u003e Just add IndicatorsControl into your carouselView as a child view.\n\n```csharp\ncarouselView.Children.Add(new IndicatorsControl());\n```\n\n**XAML:**\n```xml\n\u003ccards:CarouselView \n    ItemsSource=\"{Binding Items}\"\n    SelectedIndex=\"{Binding CurrentIndex}\"\u003e\n    \u003ccards:CarouselView.ItemTemplate\u003e\n        \u003cDataTemplate\u003e\n            \u003cContentView\u003e\n                \u003cFrame \n                    VerticalOptions=\"Center\"\n                    HorizontalOptions=\"Center\"\n                    HeightRequest=\"300\"\n                    WidthRequest=\"300\"\n                    Padding=\"0\" \n                    HasShadow=\"false\"\n                    IsClippedToBounds=\"true\"\n                    CornerRadius=\"10\"\n                    BackgroundColor=\"{Binding Color}\"\u003e\n                    \n                    \u003cImage Source=\"{Binding Source}\"/\u003e \n                    \n                \u003c/Frame\u003e\n            \u003c/ContentView\u003e\n        \u003c/DataTemplate\u003e\n    \u003c/cards:CarouselView.ItemTemplate\u003e\n\n    \u003ccontrols:LeftArrowControl/\u003e\n    \u003ccontrols:RightArrowControl/\u003e\n    \u003ccontrols:IndicatorsControl/\u003e\n\u003c/cards:CarouselView\u003e\n```\nAlso 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)\nYou manage **LeftArrowControl** and **RightArrowControl** as well as IndicatorsControl (ToFadeDuration is presented too).\n\nIndicators styling:\n``` xml\n \u003cContentPage.Resources\u003e\n    \u003cResourceDictionary\u003e\n        \u003cStyle x:Key=\"ActiveIndicator\" TargetType=\"Frame\"\u003e\n            \u003cSetter Property=\"BackgroundColor\" Value=\"Red\" /\u003e\n        \u003c/Style\u003e\n        \u003cStyle x:Key=\"InactiveIndicator\" TargetType=\"Frame\"\u003e\n            \u003cSetter Property=\"BackgroundColor\" Value=\"Transparent\" /\u003e\n            \u003cSetter Property=\"OutlineColor\" Value=\"Red\" /\u003e\n        \u003c/Style\u003e\n    \u003c/ResourceDictionary\u003e\n\u003c/ContentPage.Resources\u003e\n\n... \n\n\u003ccontrols:IndicatorsControl ToFadeDuration=\"1500\"\n          SelectedIndicatorStyle=\"{StaticResource ActiveIndicator}\"\n          UnselectedIndicatorStyle=\"{StaticResource InactiveIndicator}\"/\u003e\n```\n\n\n\nif you want to add items directly through xaml\n\n``` xml\n...\n    \u003ccards:CarouselView.ItemsSource\u003e\n            \u003cx:Array Type=\"{x:Type View}\"\u003e\n                \u003cContentView\u003e\n                    \u003cImage Source=\"yourImage.png\"/\u003e\n                \u003c/ContentView\u003e\n                \u003cRelativeLayout\u003e\n                    \u003cButton Text=\"Click\" /\u003e\n                \u003c/RelativeLayout\u003e\n                \u003cStackLayout\u003e\n                    \u003cLabel Text=\"any text\"/\u003e\n                \u003c/StackLayout\u003e\n            \u003c/x:Array\u003e\n    \u003c/cards:CarouselView.ItemsSource\u003e\n...\n```\n\nif you want to achieve scale or opacity changing effects for side views (**ScaleFactor** \u0026 **OpacityFactor**), you should mange corresponding properties in processor and pass them to view constructor via **x:Arguments**:\n\n``` xml\n\u003cContentPage \n    ...\n    xmlns:cards=\"clr-namespace:PanCardView;assembly=PanCardView\"\n    xmlns:proc=\"clr-namespace:PanCardView.Processors;assembly=PanCardView\"\u003e\n\n...\n\n\u003ccards:CoverFlowView \n      PositionShiftValue=\"145\"\n      ItemsSource=\"{Binding Items}\"\u003e\n\n      \u003cx:Arguments\u003e\n          \u003cproc:CoverFlowProcessor ScaleFactor=\"0.75\" OpacityFactor=\"0.25\" /\u003e\n      \u003c/x:Arguments\u003e\n\n  \u003ccards:CoverFlowView.ItemTemplate\u003e\n      \u003cDataTemplate\u003e\n         \u003cFrame\n             Margin=\"80\"\u003e\n               \n              ....\n\n          \u003c/Frame\u003e\n      \u003c/DataTemplate\u003e\n  \u003c/cards:CoverFlowView.ItemTemplate\u003e\n\n\u003c/cards:CoverFlowView\u003e\n\n...\n```\n\n-\u003e 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.\nAlso you can customize position of indicators (You need to set Rotation / AbsoluteLayout Flags and Bounds etc.)\n\nThis class is describing default indicators styles (each default indicator item is Frame)\nhttps://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/Styles/DefaultIndicatorItemStyles.cs\n\n\n**MORE SAMPLES** you can find here https://github.com/AndreiMisiukevich/CardView/tree/master/PanCardViewSample\n\n## Custom Animations\nYou are able to create custom animations, just implement *IProcessor* or extend existing processors (change animation speed or type etc.)\nhttps://github.com/AndreiMisiukevich/CardView/tree/master/PanCardView/Processors\n\n\n## Workarounds\n\n-\u003e If you want to put your cardsView/carouselView INTO a ```TabbedPage``` on **Android**:\n1) Add an event handler for the ``` UserInteraction ``` event\n2) On ``` UserInteractionStatus.Started ```: Disable TabbedPage Swipe Scrolling\n3) On ``` UserInteractionStatus.Ending/Ended ```: Enabled TabbedPage Swipe Scrolling\n\nExample:\n1) TabbedPage:\n``` csharp\npublic partial class TabbedHomePage : Xamarin.Forms.TabbedPage\n{\n    public static TabbedHomePage Current { get; private set; }\n\n    public TabbedHomePage()\n    {\n        Current = this;\n    }\n\n    public static void DisableSwipe()\n    {\n        Current.On\u003cAndroid\u003e().DisableSwipePaging();\n    }\n    \n    public static void EnableSwipe()\n    {\n        Current.On\u003cAndroid\u003e().EnableSwipePaging();\n    }\n}\n```\n\n2) Page with CardsView/CarouselView:\n``` csharp\npublic PageWithCarouselView()\n{\n    InitializeComponent();\n\n    carouselView.UserInteracted += CarouselView_UserInteracted;\n}\n\nprivate void CarouselView_UserInteracted(PanCardView.CardsView view, PanCardView.EventArgs.UserInteractedEventArgs args)\n{\n    if (args.Status == PanCardView.Enums.UserInteractionStatus.Started)\n    {\n        TabbedHomePage.DisableSwipe();\n    }\n    if (args.Status == PanCardView.Enums.UserInteractionStatus.Ended)\n    {\n        TabbedHomePage.EnableSwipe();\n    }\n}\n```\n\n-\u003e If you don't want to handle vertical swipes or they interrupt your scrolling, you can set **IsVerticalSwipeEnabled = \"false\"**\n\n-\u003e If all these tricks didn't help you, you may use **IsPanInteractionEnabled = false** This trick disables pan interaction, but preserve ability to swipe cards.\n\n-\u003e If you get **crashes** during ItemsSource update, try to add/set items in Main Thread (**Device.BeginInvokeOnMainThread**)\n\n-\u003e **GTK** use click / double click for forward/back navigation.\n\nCheck source code for more info, or ***just ask me =)***\n\n## Full documentation\n\nhttps://github.com/AndreiMisiukevich/CardView/tree/master/docs\n\n## License\nThe MIT License (MIT) see [License file](LICENSE)\n\n## Contribution\nFeel free to create issues and PRs 😃\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreimisiukevich%2Fcardview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreimisiukevich%2Fcardview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreimisiukevich%2Fcardview/lists"}