{"id":38397,"date":"2018-12-07T14:00:30","date_gmt":"2018-12-07T19:00:30","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=38397"},"modified":"2019-03-25T13:38:37","modified_gmt":"2019-03-25T21:38:37","slug":"xamarin-forms-4-0-feature-preview-an-entirely-new-point-of-collectionview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-4-0-feature-preview-an-entirely-new-point-of-collectionview\/","title":{"rendered":"Xamarin.Forms 4.0 Feature Preview: An Entirely New Point of (Collection)View"},"content":{"rendered":"

As part of the upcoming Xamarin.Forms 4.0 release, we are implementing the all new CollectionView\u00a0control. The CollectionView\u00a0is 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.<\/p>\n

Technical note:<\/strong>\u00a0Enable the CollectionView<\/span>\u00a0(which also enables the CarouselView<\/span>) with a feature flag just before you initialize Xamarin.Forms in your MainActivity.cs and AppDelegate:<\/p>\n

global::Xamarin.Forms.Forms.SetFlags(\"CollectionView_Experimental\");\r\n<\/pre>\n
Follow along:\u00a0<\/strong>if you wish to follow along with this blog post you can clone and run the sample from GitHub<\/a>. Alternatively, if you want to update an existing project to the Xamarin.Forms 4.0-pre NuGet<\/a> (available via your favorite NuGet package manager using the pre-release option).<\/p>\n
A Basic Layout<\/h2>\n
One of the biggest changes between ListView<\/span>\u00a0and\u00a0CollectionView<\/span>\u00a0is the removal of wrapping content in a\u00a0ViewCell<\/span>. This allows for significant gains to performance, especially on Android, while remaining familiar to what you\u2019ve done before when using the ListView<\/span>.<\/p>\n
Below is an example layout. For simplicity\u2019s sake, create a List<string><\/span>\u00a0of people’s names in your binding context and then bind to it in XAML:<\/p>\n
<StackLayout>\r\n    <CollectionView x:Name=\"CV\" \r\n                    ItemsSource=\"{Binding People}\" \r\n                    Margin=\"10,0,0,0\">\r\n        <CollectionView.ItemTemplate>\r\n            <DataTemplate>\r\n                <StackLayout HeightRequest=\"50\" WidthRequest=\"200\" Orientation=\"Horizontal\" Padding=\"0,5,0,5\">\r\n                    <Image Source=\"person\"\/>\r\n                    <Label Text=\"{Binding}\" VerticalOptions=\"Center\"\/>\r\n                <\/StackLayout>\r\n            <\/DataTemplate>\r\n        <\/CollectionView.ItemTemplate>\r\n    <\/CollectionView>\r\n<\/StackLayout><\/pre>\n
 <\/p>\n
\"A<\/a><\/p>\n
You now have a basic list of items. Notice that you no longer use a ViewCell<\/span>, but a\u00a0DataTemplate<\/span>!<\/span> Hopefully, so far this new\u00a0CollectionView<\/span>\u00a0is familiar to the ListView<\/span>\u00a0you’ve used in the past. Let’s look now at what else it can do.<\/p>\n
Making A Grid Layout<\/h2>\n
By default, CollectionView<\/span>\u00a0assumes a linear layout. That means you can not only do vertical lists, but horizontal as well! This is accomplished by setting the\u00a0ItemsLayout<\/span>\u00a0property to a new instance of\u00a0ListItemsLayout<\/span>\u00a0which takes an\u00a0ItemsLayoutOrientation<\/span>\u00a0parameter (Vertical|Horizontal).<\/p>\n
There’s also another option available: the GridItemsLayout<\/span>.<\/p>\n
Going back to the previous example above, you can use this option to make the\u00a0CollectionView<\/span> look a little fancier. Using a GridItemsLayout<\/span>, you still get a scrollable list, but now with two items in each row:<\/p>\n
  <StackLayout>\r\n      <CollectionView x:Name=\"CV\" ItemsSource=\"{Binding People}\" VerticalOptions=\"Center\" HorizontalOptions=\"Center\" Margin=\"10,0,10,0\">\r\n          <CollectionView.ItemsLayout>\r\n              <GridItemsLayout Orientation=\"Horizontal\" Span=\"2\"\/>\r\n          <\/CollectionView.ItemsLayout>\r\n          <CollectionView.ItemTemplate>\r\n              <DataTemplate>\r\n                  <Frame BorderColor=\"LightGray\" CornerRadius=\"3\" HasShadow=\"False\">\r\n                      <Grid>\r\n                          <Grid.ColumnDefinitions>\r\n                              <ColumnDefinition Width=\"Auto\"\/>\r\n                              <ColumnDefinition Width=\"100\" \/>\r\n                          <\/Grid.ColumnDefinitions>\r\n                          <Grid.RowDefinitions>\r\n                              <RowDefinition Height=\"Auto\"\/>\r\n                          <\/Grid.RowDefinitions>\r\n                          <Image Grid.Column=\"0\" Source=\"person\" Aspect=\"Fill\"\/>\r\n                          <StackLayout Grid.Column=\"1\">\r\n                              <Label Text=\"{Binding}\" HorizontalOptions=\"EndAndExpand\" VerticalOptions=\"CenterAndExpand\"\/>\r\n                          <\/StackLayout>\r\n                      <\/Grid>\r\n                  <\/Frame>\r\n              <\/DataTemplate>\r\n          <\/CollectionView.ItemTemplate>\r\n      <\/CollectionView>\r\n  <\/StackLayout><\/pre>\n
Note the ItemsLayout<\/span>\u00a0in the above XAML. Setting the Orientation<\/span>\u00a0to Vertical<\/span>\u00a0indicates the direction in which the CollectionView<\/span>\u00a0expands, and the Span<\/span>\u00a0property sets the number of items per row. In this instance, when you choose to display two you get this result:<\/p>\n
\"A<\/a><\/p>\n
CarouselView is Here<\/h2>\n
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\u00a0CarouselView,<\/span><\/span>\u00a0a separate control which uses\u00a0CollectionView<\/span>\u00a0as its basis, can be used to adjust your layout, and add in some business card-like information:<\/p>\n
<CarouselView   x:Name=\"CV\" \r\n                ItemsSource=\"{Binding People}\" \r\n                HeightRequest=\"200\" \r\n                HorizontalOptions=\"Center\" \r\n                VerticalOptions=\"CenterAndExpand\" \r\n                Margin=\"10\">\r\n    <CarouselView.ItemsLayout>\r\n        <GridItemsLayout Orientation=\"Horizontal\"\/>\r\n    <\/CarouselView.ItemsLayout>\r\n    <CarouselView.ItemTemplate>\r\n        <DataTemplate>\r\n            <Frame BorderColor=\"LightGray\" CornerRadius=\"3\" HasShadow=\"False\">\r\n                <Grid>\r\n                    <Grid.ColumnDefinitions>\r\n                        <ColumnDefinition Width=\"75\"\/>\r\n                        <ColumnDefinition Width=\"*\" \/>\r\n                    <\/Grid.ColumnDefinitions>\r\n                    <Grid.RowDefinitions>\r\n                        <RowDefinition Height=\"*\"\/>\r\n                        <RowDefinition Height=\"*\"\/>\r\n                    <\/Grid.RowDefinitions>\r\n                    <Image Grid.Column=\"0\" Grid.Row=\"0\" Source=\"person\" VerticalOptions=\"Start\"\/>\r\n                    <StackLayout Grid.Column=\"1\" Grid.Row=\"1\" HorizontalOptions=\"EndAndExpand\" VerticalOptions=\"EndAndExpand\">\r\n                        <Label Text=\"{Binding}\" FontSize=\"24\" HorizontalOptions=\"EndAndExpand\"\/>\r\n                        <Label Text=\"Company Address\" HorizontalOptions=\"EndAndExpand\"\/>\r\n                        <Label Text=\"City, State\" HorizontalOptions=\"EndAndExpand\"\/>\r\n                    <\/StackLayout>\r\n                <\/Grid>\r\n            <\/Frame>\r\n        <\/DataTemplate>\r\n    <\/CarouselView.ItemTemplate>\r\n<\/CarouselView>\r\n<\/pre>\n
\"A<\/a><\/h2>\n
It\u2019s a Snap to Use<\/h2>\n
One of the great features provided by\u00a0CollectionView<\/span>\u00a0is 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<\/span>\u00a0and SnapPointsType<\/span>\u00a0properties on the ItemsLayout<\/span>, you can configure this behavior in a snap (pun intended)! Add the following to your XAML for enabling this behavior:<\/p>\n
<CarouselView.ItemsLayout>\r\n    <GridItemsLayout \r\n        Orientation=\"Horizontal\" \r\n        SnapPointsAlignment=\"Center\" \r\n        SnapPointsType=\"Mandatory\"\/>\r\n<\/CarouselView.ItemsLayout><\/pre>\n
\"A<\/a><\/h2>\n
It\u2019s so Empty in Here<\/h2>\n
Lastly, a common scenario many developers may face is what to display when the\u00a0ItemsSource<\/span> is empty. With the CollectionView<\/span>\u00a0you can now set any content to the EmptyView<\/span>\u00a0 of your list for just this purpose. With the XAML below, the string “No items currently exist!” will be shown inside of the CollectionView<\/span>\u00a0when the list of people is empty:<\/p>\n
<CollectionView.EmptyView>\r\n    <Label Text=\"No items currently exist!\"\/>\r\n<\/CollectionView.EmptyView>\r\n<\/pre>\n
\"An<\/a><\/h2>\n
You can customize this view however you like, including interactive content and supporting bindings.<\/p>\n
Try it today!<\/h2>\n
With the early preview release of Xamarin.Forms 4.0, the CollectionView<\/span>\u00a0is 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<\/a>.<\/p>\n
New functionality will be available quickly on nightly releases<\/a>, and ship with future pre-releases. Have feedback? Take this survey<\/a> covering all the new Xamarin.Forms 4.0 features<\/a> we are now previewing.<\/p>\n
We invite and encourage you to join the conversation<\/a> on the Xamarin.Forms GitHub repo where the CollectionView<\/span>\u00a0and CarouselView<\/span>\u00a0are being discussed. If you’d like to try out this sample, grab the code on GitHub<\/a>.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
As part of the upcoming Xamarin.Forms 4.0 release, we are implementing the all new CollectionView\u00a0control. The CollectionView\u00a0is 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.<\/p>\n","protected":false},"author":1958,"featured_media":40919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,367],"tags":[750,751,409],"class_list":["post-38397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin-forms","tag-carouselview","tag-collectionview","tag-releases"],"acf":[],"blog_post_summary":"
As part of the upcoming Xamarin.Forms 4.0 release, we are implementing the all new CollectionView\u00a0control. The CollectionView\u00a0is 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.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/38397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1958"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=38397"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/38397\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/40919"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=38397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=38397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=38397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}