Xamarin.Forms CarouselView

As with any app that has a need to display products or services, or show off its new features, you're more than likely going to want a carousel view within your app, its a staple of UI that you'd think Xamarin would have by default right?

Wrong. Whilst Xamarin does have inbuilt support for a CarouselView, you're going to be pretty disappointing when you realise that you can't run your app without enabling experimental features or installing their beta NuGet package. I'm not sure how you feel about it, but this makes me feel sick knowing I'm about to release an app with features that might brick it for every user. Nonetheless here's an example of how to use it and then we'll go into why you might want to install a third party package to get things done right.

Example:

Before calling Forms.Init within the platform specific code for both Android and iOS:

Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

Within the page where the CarouselView is required.

CarouselView objLayout = new CarouselView()
{
    HorizontalOptions   = LayoutOptions.FillAndExpand,
    VerticalOptions     = LayoutOptions.FillAndExpand,
    ItemTemplate        = new DataTemplate(typeof(ImageCell)),
    ItemsSource         = colImages
};

From there on out, it works just like a regular ListView, you're just held back by the issues mentioned above. Note that before you can even run the app, you need to set the 'CollectionView_Experimental' flag for Xamarin.

Here's a useful article on Stack Overflow describing th issues encountered on UWP.

Other options available:

Syncfusion:
This is a really great package and has th full backing of Syncfusion, so you know when installing this package, you're going to get quality and there's great documentation and support on hand to help out.

https://www.syncfusion.com/xamarin-ui-controls/xamarin-carousel-view

CarouselView.FormsPlugin:
Another great option if you want to support those open source projects out there, just like Syncfusion, this package has support for navigation dots/buttons, scaling, custom templates and data-sources.

https://github.com/alexrainman/CarouselView

Example:

After Forms.Init within the platform specific project from both Android and iOS:

CarouselViewRenderer.Init();

Within the page where the CarouselViewControl is required.

CarouselViewControl objLayout = new CarouselViewControl()
{
    HorizontalOptions   = LayoutOptions.FillAndExpand,
    VerticalOptions     = LayoutOptions.FillAndExpand,
    ItemTemplate        = new DataTemplate(typeof(ImageCell)),
    ItemsSource         = colImages,
    InterPageSpacing    = 0,
    ShowIndicators      = true,
    IndicatorsTintColor = Color.White,
    CurrentPageIndicatorTintColor = Core.Colours.PinkAccent,
    Position            = intStartIndex
};

Published at

Tags: C#,Xamarin,Xamarin Forms,Android,iOS,App

Luke Alderton

Comments

Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By Small pp on How to add a Xamarin Forms Loading Screen/Overlay
22 Mar 2021, 12:04 PM
By Mr. Greymatter on Raspberry Pi - Running Java app on Raspbian
16 Feb 2021, 07:35 AM
By Mikko Seittenranta on Xamarin Forms multiple instances of same app open
16 Feb 2021, 04:34 AM
By Andrew on Auto/Custom height on Xamarin Forms WebView for Android and iOS
22 Jan 2021, 22:15 PM
By Rrrft on JQuery Unobtrusive Validation for dynamically created elements
5 Dec 2020, 09:18 AM
By Nick on Raspberry Pi - Running Java app on Raspbian
14 Oct 2020, 19:37 PM
By Ivan on Fixed: Value cannot be null Parameter Name: source
15 Sep 2020, 19:47 PM
By Anand on Raspberry Pi - Bluetooth using Bluecove on Raspbian
7 Sep 2020, 16:53 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development