Xamarin.Forms 4.0 Feature Preview: An Entirely New Point of (Collection)View

Avatar

Paul

As part of the upcoming Xamarin.Forms 4.0 release, we are implementing the all new CollectionView control. The CollectionView is intended to be a successor to the ListView, improving upon its design by reducing technical complexity and allowing for more flexibility of layout and function. But we’re not stopping there! Along with this also comes the long-awaited CarouselView.

Technical note: Enable the CollectionView (which also enables the CarouselView) with a feature flag just before you initialize Xamarin.Forms in your MainActivity.cs and AppDelegate:

Follow along: if you wish to follow along with this blog post you can clone and run the sample from GitHub. Alternatively, if you want to update an existing project to the Xamarin.Forms 4.0-pre NuGet (available via your favorite NuGet package manager using the pre-release option).

A Basic Layout

One of the biggest changes between ListView and  CollectionView is the removal of wrapping content in a  ViewCell. This allows for significant gains to performance, especially on Android, while remaining familiar to what you’ve done before when using the ListView.

Below is an example layout. For simplicity’s sake, create a List<string> of people’s names in your binding context and then bind to it in XAML:

 

A Basic CollectionView

You now have a basic list of items. Notice that you no longer use a ViewCell, but a  DataTemplate! Hopefully, so far this new  CollectionView is familiar to the ListView you’ve used in the past. Let’s look now at what else it can do.

Making A Grid Layout

By default, CollectionView assumes a linear layout. That means you can not only do vertical lists, but horizontal as well! This is accomplished by setting the  ItemsLayout property to a new instance of  ListItemsLayout which takes an  ItemsLayoutOrientation parameter (Vertical|Horizontal).

There’s also another option available: the GridItemsLayout.

Going back to the previous example above, you can use this option to make the  CollectionView look a little fancier. Using a GridItemsLayout, you still get a scrollable list, but now with two items in each row:

Note the ItemsLayout in the above XAML. Setting the Orientation to Vertical indicates the direction in which the CollectionView expands, and the Span property sets the number of items per row. In this instance, when you choose to display two you get this result:

A Grid-style CollectionView

CarouselView is Here

The previous example shows a scrollable grid of people, but perhaps you want to show one person at a time in a card format. You can use  CarouselView<span style="background-color: #ffffff;font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif;font-size: medium">, a separate control which uses  CollectionView as its basis, can be used to adjust your layout, and add in some business card-like information:

A page using a CarouselView

It’s a Snap to Use

One of the great features provided by  CollectionView is the ability to add snap points. For the page you just designed, it allows for the view to stop part-way between cards. What if you instead want only one card to appear centered at a time? With the SnapPointsAlignment and SnapPointsType properties on the ItemsLayout, you can configure this behavior in a snap (pun intended)! Add the following to your XAML for enabling this behavior:

A CarouselView using a SnapPoint

It’s so Empty in Here

Lastly, a common scenario many developers may face is what to display when the  ItemsSource is empty. With the CollectionView you can now set any content to the EmptyView  of your list for just this purpose. With the XAML below, the string “No items currently exist!” will be shown inside of the CollectionView when the list of people is empty:

An EmptyView

You can customize this view however you like, including interactive content and supporting bindings.

Try it today!

With the early preview release of Xamarin.Forms 4.0, the CollectionView is also in a early preview state. As such, it is missing some features, and feature parity between Android and iOS is not complete. You can track the development progress of this control on GitHub.

New functionality will be available quickly on nightly releases, and ship with future pre-releases. Have feedback? Take this survey covering all the new Xamarin.Forms 4.0 features we are now previewing.

We invite and encourage you to join the conversation on the Xamarin.Forms GitHub repo where the CollectionView and CarouselView are being discussed. If you’d like to try out this sample, grab the code on GitHub.

 

Avatar
Paul DiPietro

Follow Paul   

5 comments

  • Avatar
    Doğan Çoruh

    I could not run any version of CarouselView example code that i find on the net. Please release a stable version… 🙂

  • Avatar
    Marlon Hizole

    How did you make each carousel item perfectly fit the width of your mobile device? I copied your sample code, but when I run it on my simulator, I can see 2 items displayed. I was expecting 1 item would take the full width of the device.

    • Avatar
      Marlon Hizole

      I created a custom layout that inherits a StackLayout which overrides OnMeasure and computes a new SizeRequest for the items inside the CarouselView. Not sure if this is the way to go, but it gets the job done and it’s enough for the POC I’m making right now. Thanks!

  • Avatar
    Sergio Tardío

    When using CarouselView control ,… is there a way to make the change of card by time? I mean, I wanna change the card showed in the carousel control every 3 seconds. Is there a way to do something like that?
     thnks

Leave a comment