Issues with Xamarin Forms 4 (pre 4) using CollectionView in UWP project

Question

I'm facing some tricky bugs while trying to use the new CollectionView feature implemented in Xamarin Forms 4. On the Android project it works very well after enabling experimental features in MainActivity.cs with:

global::Xamarin.Forms.Forms.SetFlags(new[] { "CollectionView_Experimental", "Shell_Experimental" });

But xamarin documentation doesn't provide any information about UWP project so first when I tried to compile the UWP project, it throws me this exception when it tries to render a page that uses CollectionView

System.InvalidOperationException:

'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().'

So I tried to call the SetFlags in App.xaml.cs in UWP project before calling InitializeComponent() method. So this time it throws me this exception when it tries to load the page containing CollectionView:

System.NullReferenceException: 'Object reference not set to an instance of an object.'

So like in this example:

await Navigation.PushAsync(new PageWithCollectionView());

The exception is thrown after successful execution of PageWithCollectionView constructor.

Can somebody help me to solve this problem?

UPDATE

Ok, so adding the SetFlags in App.xaml.cs in UWP project works and the CollectionView gets initialized correctly. But the NRE is still there (on Android the CollectionView works without problems), while trying to get rid of this problem I noticed that it's caused when I try to nest the XAML layout this way:

<CollectionView SelectionMode="Single">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Horizontal"
                         Span="2"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <StackLayout Orientation="Vertical"
                             Grid.Column="0"
                             Grid.Row="0">
                    <Label Text="{Binding Title}"/>
                </StackLayout>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

If I remove all the DataTemplate from CollectionView.ItemTemplate, just leaving it blank like this:

<CollectionView SelectionMode="Single">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Horizontal"
                         Span="2"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

The page gets rendered a CollectionView shows ItemSource elements with messy layout (without margin and padding, and calling ToString() method of element to visualize it inside the cell).

[UPDATE]

After update to Xamarin Forms 4 pre 8, the exception is gone.

Laryngeal

I'm confused. I thought CollectionView was not supported in UWP. – Summertree

Since latest updates of XF, CollectionView is supported in UWP too – Laryngeal

Answer 1

I created a code sample that contains CollectionView. According to the document, we need call SetFlag before Xamarin.Forms.Forms.Init(e) in the App.xaml.cs file like the following.

........

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

........

Implement CollectionView

<CollectionView>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Baboon</x:String>
            <x:String>Capuchin Monkey</x:String>
            <x:String>Blue Monkey</x:String>
            <x:String>Squirrel Monkey</x:String>
            <x:String>Golden Lion Tamarin</x:String>
            <x:String>Howler Monkey</x:String>
            <x:String>Japanese Macaque</x:String>
        </x:Array>
    </CollectionView.ItemsSource>
</CollectionView>

And it works well, For NullReferenceException issue, you need check if there is null object in the code behind. Simple implementation of CollectionView does not cause such error.

Update

Please try to update Xamarin Forms 4 to latest pre version.

Chagres

Thank you, so SetFlags worked well but the NRE is still here. I updated the question providing more information about it – Laryngeal

@BitZar, I used your ViewCell layout in my project and it works. I think the issue occurs in your ItemsSource. Could your mind share a mini sample? – Chagres

So I passed a lot of time searching to some kind of null value that may have been causing the exception but my model is ok, so I'll update my question with a sample of code – Laryngeal

@BitZar, Could share a sample project for use that could reproduce this issue ? – Chagres

So after a long a debug searching for null references in my code I found nothing. But after update to Xamarin Forms 4 pre 8, the exception just vanished – Laryngeal

@BitZar, Great, you could add this in the case update. – Chagres

Answer 2

global::Xamarin.Forms.Forms.SetFlags(“CollectionView_Experimental”);

use MainActivity.cs in Android

Godliman