Xamarin Forms Android Paddings are not showing within CollectionView

Viewed 242

We are observing a weird issue with our CollectionView in Xamarin Forms which we cannot explain. First we created a dynamic view with a ListView, but some or our view cells are dynamically changing height which is not really good supported by a Listview. So we switched to a CollectionView which should support that more nativaly. With the listview we did not have this padding issues; but more random crashes because of memory reusage.

We are using a Collection-view with a template selector to dynamically load different data-templates to create a LIST. These data-templates can vary in height and function.

Currently, we are observing that the paddings are not applied on android or not correct or it seems like some scaling issues because it also looks like the content is out of bounds. It is only happening in this collectionView on all the other views the paddings are correct on both Android and iOS. It is happening with all DataTemplates and not just this section.

Below there are two screenshots, one iOS, and one Android. This shows the result of the CollectionView with two items of the same type underneath each other.

First iOS which has the correct output:

paddings showing on iOS

Second Android; which seems weird:

Paddings not showing on Android

Code of this specifiek DataTemplate:

<DataTemplate x:Key="SectionTemplate">
        <ContentView Padding="0, 4, 0, 0" BackgroundColor="Red">
            <Grid Padding="8, 0, 17, 0" BackgroundColor="White">
            <Grid.HeightRequest>
                <OnIdiom x:TypeArguments="x:Double" Phone="50" Tablet="54.5"/>
            </Grid.HeightRequest>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="15"/>
            </Grid.ColumnDefinitions>
            <uikit:Label Grid.Column="0" StyleClass="SectionTitle" HorizontalTextAlignment="Start" Text="{Binding Name}" VerticalOptions="Center" VerticalTextAlignment="Center" />
            <uikit:Label Grid.Column="1" StyleClass="FoldButton" Text="{Binding FoldText}" TextColor="{StaticResource LightGreyFont}" FontAttributes="Bold" HorizontalOptions="CenterAndExpand" VerticalOptions="Center"/>
            <Grid.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding FoldCommand}" />
            </Grid.GestureRecognizers>
        </Grid>
        </ContentView>
    </DataTemplate>

Code of the view in which the CollectionView is loaded:

<?xml version="1.0" encoding="UTF-8" ?>
<view:ProductView
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:view="clr-namespace:Forms.Pages;assembly=Product.Forms"
    xmlns:vm="clr-namespace:Forms.BLL.ViewModels.ItemDetail"
    xmlns:datatemplates="clr-namespace:Forms.Resources.Templates"
    xmlns:templateselectors="clr-namespace:Forms.Helpers.DataTemplates"
    xmlns:converters="clr-namespace:Forms.Converters;assembly=Product.Forms"
    x:Class="Forms.Pages.Detail.Item.ItemDetailView"
    VerticalOptions="FillAndExpand"
    HorizontalOptions="FillAndExpand">
    <view:ProductView.BindingContext>
        <vm:ItemDetailViewModel />
    </view:ProductView.BindingContext>
    <view:ProductView.Resources>
        <ResourceDictionary>
           <!-- All Template items -->
        </ResourceDictionary>
    </view:ProductView.Resources>
    <view:ProductView.Content>
        <AbsoluteLayout BackgroundColor="{ StaticResource LightGreyBackground }" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <ActivityIndicator AbsoluteLayout.LayoutFlags="SizeProportional"
                               AbsoluteLayout.LayoutBounds="0,0,1,1"
                               Color="{StaticResource PendingBlue}"
                               VerticalOptions="Center"
                               IsVisible="{Binding IsLoading}"
                               IsRunning="{Binding IsLoading}" />                
            <CollectionView 
                      ItemsSource="{Binding ElementRows}"
                      BackgroundColor="Transparent"
                      ItemTemplate="{StaticResource ItemDetailTemplate}"
                      SelectionMode="None"
                      VerticalOptions="FillAndExpand"
                      HorizontalOptions="FillAndExpand">
            </CollectionView>
        </AbsoluteLayout>
    </view:ProductView.Content>
</view:ProductView>

We tried setting the ItemSizingStrategy to ‘MeasureAllItems’, The ItemsLayout to have a spacing of 0, removing the AbsoluteLayout around it. Setting the Vertical and Horizontal options of the ContentViews. It all did not help.

<CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing=“0” />
</CollectionView.ItemsLayout>

The code of our overloading of the ContentView to include some extra loading options:

Namespace Product.Forms.Pages
{
    public class ProductView : ContentView
    {
        public ProductView()
        {
            AppCenterHelper.Instance.TrackEvent(TrackEventName.PAGE_OPENED, this.GetType().ToString().Split('.').LastOrDefault());
        }

        public async Task LoadData(Guid key)
        {
            if (BindingContext is ViewModelBase viewModel)
            {
                if (viewModel.Loaded == LoadStatus.RequiresLoad)
                {
                    viewModel.Loaded = LoadStatus.Loading;

                    await viewModel.Load(key);
                    // await viewModel.Load(_id, LazyLoadingBatchSize);

                    viewModel.ApplyFilter(String.Empty);

                    viewModel.Loaded = LoadStatus.Succes;
                    // viewModel.LazyLoaded = LoadStatus.Succes
                }
                else
                {
                    await viewModel.Reload();
                }
                if (!viewModel.HasSubscribedToMessageCenter)
                {
                    SubscribeToMessagingCenter();
                }
            }
            else
            {
                throw new NullReferenceException($"ViewModel of {this.GetType().ToString()} is not set as a ViewModelBase.");
            }
        }

        public void SubscribeToMessagingCenter()
        {
            if (BindingContext is ViewModelBase vm)
            {
                vm.SubscribeToMessagingCenter();
                vm.HasSubscribedToMessageCenter = true;
            }
        }

        public void UnSubscribeFromMessagingCenter()
        {
            if (BindingContext is ViewModelBase vm)
            {
                vm.UnSubscribeFromMessagingCenter();
            }
        }
    }
}
0 Answers
Related