Xamarin.forms: [Bug] Cannot set items inside CollectionView to occupy entire width of page and without interelement spacing

[Happypig375]

Description, Steps to Reproduce, Expected Behavior, Actual Behavior, Screenshots

It is impossible to set items inside a CollectionView to occupy the entire width of the view. The example below has the CollectionView spanning the entire width of the page so the items should be able to span the entire page width too.

Moreover, it is also impossible to let items inside a CollectionView to have no spacing at all.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:WhereIsImage"
             mc:Ignorable="d"
             x:Class="WhereIsImage.XF" Padding="0">
    <StackLayout Spacing="0">
        <Label BackgroundColor="Yellow">This</Label>
        <Label BackgroundColor="Yellow">is</Label>
        <Label BackgroundColor="Yellow">expected</Label>
        <Label BackgroundColor="Yellow">behavior</Label>
        <CollectionView Margin="0" BackgroundColor="DeepSkyBlue">
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>This</x:String>
                    <x:String>is</x:String>
                    <x:String>actual</x:String>
                    <x:String>behavior</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
            <CollectionView.ItemsLayout>
                <ListItemsLayout Orientation="Vertical" ItemSpacing="0" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}" BackgroundColor="Yellow" Margin="0" HorizontalOptions="FillAndExpand"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Basic Information

• Version with issue: 4.2
• Last known good version: No
• IDE: VS16.3.2
• Platform Target Frameworks:
  
  
  
  • UWP: 17134
  
  
• Affected Devices: My PC

Reproduction Link

WhereIsImage2.zip

[jfversluis]

Hi @Happypig375 thanks for the report!

Would you mind updating the post and elaborating a bit more about what should work how according to you?

[Happypig375]

Updated

[jfversluis]

As a (sort of) workaround you can wrap it into a Grid (or maybe other layout component) that seems to be stretching it more horizontally. I think it does make sense that the Label should behave the same way in and out of the CollectionView

[PaulVrugt]

This issue is not limited to UWP. I have the exact same issue on Android. I thought I was just being an idiot and could not find the right padding property to set. But being unable to remove the spacing makes the collectionview unusable in my case

[Russc0]

Any update on this? Seems it can be fixed on UWP by adding below code in your App.xaml file.

<Style TargetType="ListViewItem">
     <Setter Property="Padding" Value="0"/>
</Style>

[YZahringer]

Same issue, there is a padding or margin on each item by default. Another reproduction link: https://github.com/MADSENSE/Madsense.XamarinForms.Sample/tree/collectionView-ItemSize

[artur170dx]

Any workaround for this?

Any update on this? Seems it can be fixed on UWP by adding below code in your App.xaml file.

<Style TargetType="ListViewItem">
     <Setter Property="Padding" Value="0"/>
</Style>

Seems it can be fixed or it's a fix? Not working for me unfortunatelly.

[Russc0]

@artur170dx I just tested my code above and it is no longer working on the latest Xamarin.Forms Nuget but if you roll back to 4.4.0991265 then it works.

[YZahringer]

Related to https://github.com/xamarin/Xamarin.Forms/issues/10547?

[YZahringer]

Currently in the CollectionView headers there are hardcoded Margin and Padding defined in the ListViewHeaderItem and GridViewHeaderItem styles and it is not possible to override them without redefining the entire template in the application.

The default MinHeight = 44 of headers can be overriden with ThemeResource:
xaml <Application.Resources> <x:Double x:Key="ListViewHeaderItemMinHeight">0</x:Double> <x:Double x:Key="GridViewHeaderItemMinHeight">0</x:Double> </Application.Resources>

Unfortunately it is not possible to override the default style/template of the ListViewItem. There are two ThemeResource to redefine the default MinHeight = 44, but they are ignored by the CollectionView:
xaml <Application.Resources> <x:Double x:Key="ListViewItemMinHeight">0</x:Double> <x:Double x:Key="GridViewItemMinHeight">0</x:Double> </Application.Resources>

An implicit style for the ListViewItem also does not work:
xaml <Style TargetType="ListViewItem"> <Setter Property="Margin" Value="0" /> <Setter Property="Padding" Value="0" /> <Setter Property="MinHeight" Value="0" /> </Style>

The default Padding on ListViewItem has been fixed in #10807, which partially solves the problem.

In my opinion, Margin/Padding/MinHeight should not be hardcoded, it should be defined by the DataTemplate. If they are default values, it should be allowed to override them.