https://github.com/grendio/xcarouselpicker
Xamarin Horizontal Carousel Picker
https://github.com/grendio/xcarouselpicker
carousel-component carousel-picker xamarin-android xamarin-ios
Last synced: 11 months ago
JSON representation
Xamarin Horizontal Carousel Picker
- Host: GitHub
- URL: https://github.com/grendio/xcarouselpicker
- Owner: grendio
- License: mit
- Created: 2019-01-18T22:09:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-23T18:52:23.000Z (over 7 years ago)
- Last Synced: 2025-06-23T18:06:03.235Z (about 1 year ago)
- Topics: carousel-component, carousel-picker, xamarin-android, xamarin-ios
- Language: C#
- Homepage:
- Size: 772 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# XCarousel
## Build Status
| XCarousel.Touch | XCarousel.Droid | .Touch.Sample | .Droid.Sample |
| ------------- | ------------- | ------------- | ------------- |
|||||
## Preview
## Blogs
1. https://butonium.com/xamarin-carouselpicker/
2. https://alexandrustefan.com/xcarouselpicker/
## Setup
On client projects install the nuget XCarouselPicker ([](https://www.nuget.org/packages/XCarouselPicker/)) and then follow the steps based on platform:
## Android
#### Standard
1. Add a new XCarouselView inside your Main layout file:
```
```
2. In your Activity you'll need to assign a Collection to this view:
```
var picker = FindViewById(Resource.Id.picker);
var products = new List();
products.Add(new DrawableItem(Resource.Drawable.CoffeeAsset));
products.Add(new DrawableItem(Resource.Drawable.CoffeeAsset));
products.Add(new DrawableItem(Resource.Drawable.CoffeeAsset));
products.Add(new DrawableItem(Resource.Drawable.CoffeeAsset));
products.Add(new DrawableItem(Resource.Drawable.CoffeeAsset));
products.Add(new DrawableItem(Resource.Drawable.CoffeeAsset));
products.Add(new DrawableItem(Resource.Drawable.CoffeeAsset));
picker.Items = products;
```
3. And for the FadeEffect to take place you'll need to assign the desired FadeColor:
```
picker.FadeColor = "#ecf0f1";
```
## iOS
#### Standard
Note that this UICollectionView customization was designed to work with one row and horizontal scrolling. If you have a different case, create a pull request to see if we can addapt the component to more general needs.
1. Add a new UICollectionView to your view. Within Widget properties, select "XCarouselView" as you CollectionViewType.
2. Create your UICollectionViewCell. There is no known restriction on what can be in here.
3. Create your UICollectionViewDataSource.
4. Wire everything together:
```
customCollectionView.RegisterNibForCell(CustomCollectionViewCell.Nib, CustomCollectionViewCell.Key);
customCollectionView.DataSource = new CustomDataSource();
```
Now your project should have a UICollectionView that resembles the behaviour from the Preview gif.
## Known issues/difficulties/notes
- The current state of the component works properly only with one image within the element of the XCarouselPicker. If you have a different scenario, please do create an issue and we'll see how we can addapt the component to it.
## Conclusion
### If you have a question or a suggestion, please add an issue and we'll discuss over it. We're open to respond, add new features, fine tune our solutions or, last, but most important, to fix bugs/problems that you encounter.
#### As you've got this far and our code might helped you, support us to build more content like this through:
