Xamarin.Forms 4.3 is live! Introducing CollectionView

Paul DiPietro

Today we’re incredibly pleased to announce the stable release of Xamarin.Forms 4.3.0. This release marks the removal of the experimental flag from CollectionView as it moves into stable status. Along with this, comes a number of enhancements and contributions from the community. Including SourceLink support, the ability to display HTML on Labels, and more.

Using CollectionView

With Xamarin.Forms 4.3.0, you can now use CollectionView in your apps without the need for the Experimental flag enabled. If you haven’t used CollectionView before, go check out the docs to learn more and download the samples. CollectionView is built to be fast, uses modern, native controls, and removes the concept of ViewCells. Simply set your View inside a DataTemplate:  

    <StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.RowSpan="2" 
                               Source="{Binding ImageUrl}" 
                               Aspect="AspectFill"
                               HeightRequest="60" 
                               WidthRequest="60" />
                        <Label Grid.Column="1" 
                               Text="{Binding Name}" 
                               FontAttributes="Bold" />
                        <Label Grid.Row="1"
                               Grid.Column="1" 
                               Text="{Binding Location}"
                               FontAttributes="Italic" 
                               VerticalOptions="End" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

 

Xamarin.Forms 4.3 - WeatherColors using CollectionView

For more information on getting started with CollectionView, visit the docs.

RefreshView

Xamarin.Forms 4.3 also introduces RefreshView. The need for pull-to-refresh functionality was a top piece of feedback during the CollectionView Challenge. RefreshView provides pull-to-refresh functionality to any child which supports scrollable content:

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}">
    <CollectionView ItemsSource="{Binding Animals}">
        ...
    </CollectionView>
</RefreshView>

Visit the docs to learn more about RefreshView.

Additional Features

Xamarin.Forms 4.3.0 also brings additional enhancements. As mentioned earlier, two of those particularly notable additions include SourceLink support within Xamarin.Forms. As well as the ability to display HTML on Labels.

With SourceLink support added to Xamarin.Forms, easily step into the source code for a first-class debugging experience. Learn more through the SourceLink GitHub repo.

Displaying HTML on a Label (#4527)

By setting the TextType  property on the Label to Html, your string values can be parsed as HTML. Then display appropriately on a Label:

var labelUsingHTML = new Label
{
    Text = "<h1>Hello from Xamarin.Forms!</h1></br>This <i>Label</i>'s text is being displayed with <b>HTML</b>!",
    TextType = TextType.Html,
    VerticalOptions = LayoutOptions.CenterAndExpand,
    HorizontalTextAlignment = TextAlignment.Center
};

Xamarin.Forms 4.3 - A Label displaying HTML

 

Additional enhancements include:

  • Character spacing (kerning) for Labels and Buttons (#5167)
  • Padding on Labels (#6299)
  • Scrolled event for ListView (#7157)

Xamarin.Forms 4.3.0 Preview Features

In addition to all of the above, Xamarin.Forms 4.3.0 also includes previews of CarouselView and Shell support in UWP.

Using CarouselView

In our recent CarouselView Challenge Wrap-up we showed off some fantastic submissions from the community and dug further into our findings. To summarize, you clearly indicated that your top desire for the CarouselView is the ability to display position indicators. Additionally, you also expressed the desire for better refresh functionality and more control around transitions.

Thanks to your feedback, we have placed CarouselView under an Experimental flag for this 4.3.0 release. You can enable it by setting the following flag before calling:

  • Init()  in the MainActivity.cs  of your Android project.
  • AppDelegate.cs  of your iOS project.
  • App.xaml.cs  of your UWP project:
Xamarin.Forms.Forms.SetFlags("CarouselView_Experimental");

Our current plan is to continue to refine CarouselView. Then implement these desired features before removing the experimental flag.

A submission by Javier Suárez Ruiz

Preview Shell Support in UWP

Shell support is now available for UWP as a preview under the Experimental flags. To enable it in your existing UWP apps, add the following line of code before calling Init() in the App.xaml.cs  file of your UWP project:

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

The Gastropods sample running on UWP

If you need to add a UWP project to your solution, follow the documentation. We would like to thank Morton Nielsen for the effort put in on this implementation.

Upgrade to 4.3 Today

For full details about Xamarin.Forms 4.3.0, check the release notes.

You can update your existing projects via the NuGet Package Manager. As always, feedback is very welcome. Should you encounter any problems or have suggestions, please open an issue on GitHub.

6 comments

Discussion is closed. Login to edit/delete existing comments.

  • Enrique David Jose Incio Chapilliquen 0

    I was already waiting for him!

  • Sebastian Schlund 0

    Thanks for showcasing the new features.
    Do you also have an example for RelativeSource Binding?
    #3847

  • hamid 0

    Hello and thanks for your efforts.
    I tried the Collectionview and it seems it has a bug when flowDirection is RightToLeft and ItemsLayout set to GridItemsLayout with Orientation Vertical.(at least Span =2)
    In this case the Collectionview itself appears right to left , but the items sequence is not like what in items-source and items are actually laid from Left to Right.(example :with Span =3,first item in the View is Third one in bound itemsSource)
    I hope you solve this problem ,because I’m using Xamarin Forms and I need this feature.
    Thank You.

  • Huy Dang 0

    I have an error when I removed global::Xamarin.Forms.Forms.SetFlags(“CollectionView_Experimental”); like below

    System.InvalidOperationException
    Message=The class, property, or method you are attempting to use (‘VerifyCollectionViewFlagEnabled’) is part of CollectionView; to use it, you must opt-in by calling Forms.SetFlags(“CollectionView_Experimental”) before calling Forms.Init().

    I’m using xamarin.forms 4.3

  • Mark Dev 0

    Hi there,
    We would like to use the Carousel and remove a third party nuget we are using ,could you give us an idea when the Indicators will be available?

    Many thanks

  • Sean Anderson 0

    CollectionView replaces ListView

Feedback usabilla icon