Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 779
BitZar Avatar asked Mar 02 '19 16:03

BitZar


1 Answers

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.

like image 131
Nico Zhu - MSFT Avatar answered Nov 02 '22 13:11

Nico Zhu - MSFT