How to fit the height of CollectionView when it is wrapped by ScrollView?

nemunoznemunoz ✭✭Member ✭✭

Hi to everyone!
I do not know if is a problem or a misunderstanding by me (maybe the second one) but I can not success to set any height size to my CollectionView.

I am starting to use Xamarin and I was trying to use the CollectionView object when I realized that the height of this View is very large (and other View Objects had an addecuate size, for example Label Views).
The height is more or less like the height Page.
Firstly I think that was a problem with the inside objects. I tried with strings and custom objects without success.
After a lot of tests, I tried with an empty CollectionView (with the BackgroundColor set in LightBlue) and I realized that my problem is not in the collectionView objects, but is in the CollectionView object itself.
When I was trying to reproduce the problem to publish it here I realized that the CollectionView was fitting its own size to the page size (the height is still very big but less than the height Page).
So, finally, I checked my code and found that the CollectionView is inside a StackLayout and this StackLayout is in a ScrollView.
I mean:

    <ScrollView>
       <StackLayout>
          <CollectionView>
          </CollectionView>
       </StackLayout>        
    </ScrollView>

When I wrap the StackLayout in a ScrollView, the CollectionView height increase (I didn't measure it, but the height is more or less like the height page).

This height is very large and I didn't find an option to change its height.

I am using the latest stable version of Xamarin (3.6.0.344457). But I also checked the latest preliminar version (4.0.0.394984-pre) without success.
To test the program I am using an emulator with Android 9.0 (Api 28) and my own smartphone (Nexus 5X with Android 8.1, Api 27).

To reproduce the problem I created a new Mobile Application (Xamarin.Forms) project, select a Shell template and, in ItemDetailPage.xaml, I added the ScrollView, two labels and the CollectionView.
This is the full code of ItemDetailPage.xaml with my own modifications:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http: //xamarin.com/schemas/2014/forms"<!-- Here I added a space between "http:" and "//" because I can not publish urls in the forum-->
             xmlns:x="http: //schemas.microsoft.com/winfx/2009/xaml"<!-- The same here-->
             x:Class="XamarinTest.Views.ItemDetailPage"
             Title="{Binding Title}">

    <ScrollView>
        <StackLayout Spacing="20" Padding="15">
            <Label Text="Text:" FontSize="Medium" />
            <Label Text="{Binding Item.Text}" FontSize="Small"/>
            <Label Text="Description:" FontSize="Medium" />
            <Label Text="{Binding Item.Description}" FontSize="Small"/>

            <Label Text="CollectionView:"></Label>
            <CollectionView BackgroundColor="LightBlue">

            </CollectionView>
            <Label Text="End CollectionView"></Label>
        </StackLayout>        
    </ScrollView>

</ContentPage>

I only want a CollectionView that it only has the necessary height, the enough to wrap it's own children.

Thanks in advance!

Answers

  • nemunoznemunoz ✭✭ Member ✭✭

    @yelinzh said:
    Check the tutorial: https: //devblogs.microsoft.com/xamarin/xamarin-forms-4-0-feature-preview-an-entirely-new-point-of-collectionview/

    Sample here: https: //github.com/pauldipietro/CollectionViewSample

    Thank you @yelinzh for answer so quickly! But none of them work to me.
    In the tutorial I have the same problem (in fact, it is one of the documents that I'm based to learn about CollectionView).

    And in the sample, after updating Xamarin nuget package in all projects, it looks like it was working, but in the end no, it doesn't.
    The problem is hidden because this example has a lot of names. If you reduce them to a very few names, you will see again the problem (and I am starting to think that the width has the same problem).
    For example, in the sample if you take BasicListPage.xaml.cs and reduce the People list to three people, and in BasicListPage.xaml you set BackgroundColor on the objects, you will see that CollectionView color will fill all the page. And if you add a ScrollView that wraps the main StackLayout, you will see that the CollectionView height increase.

    I copy the BasicListPage.xaml code that I have used to test this problem after reducing the People list to three:

        <ContentPage.Content>
            <ScrollView>
                <StackLayout>
                    <CollectionView x:Name="CV" ItemsSource="{Binding People}" Margin="10,10,10,10" BackgroundColor="LightGray">
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <StackLayout HeightRequest="50" WidthRequest="200" Orientation="Horizontal" Padding="0,5,0,5" BackgroundColor="LightGreen">
                                    <Image Source="person"/>
                                    <Label Text="{Binding}" VerticalOptions="Center" BackgroundColor="LightCyan"/>
                                </StackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </StackLayout>
            </ScrollView>
        </ContentPage.Content>
    

    I added the ScrollView, three BackgroundColor for CollectionView, StackLayout and Label and changed the CollectionView Margin from Margin="10,0,0,0" to Margin="10,10,10,10". With this Margin I can see where the CollectionView ends in the four edges.

  • JarvanJarvan Xamurai Member, Xamarin Team Xamurai

    @nemunoz
    You can specify a value to collectionView.HeightRequest. As the code shows:

    public Page1()
    {
        InitializeComponent();
        ...
        collectionview.ItemsSource = list;
        collectionview.HeightRequest = list.Count * 50 + list.Count *2*5;
    }
    

  • nemunoznemunoz ✭✭ Member ✭✭
    edited May 15

    Ok @yelinzh , but why I have to set manually the height instead of be set automatically by the program?
    I mean, you do not have to do anything with the height in all the other Views (ListView, StackLayout, Grid, Label, Button Entry, etc.).

  • DanilReedKurkinDanilReedKurkin ✭✭ GBUniversity ✭✭
    edited July 2

    Solution added by @yelinzh will not work properly in case of cells being different size.

  • FaizalSaidaliFaizalSaidali ✭✭✭ USMember ✭✭✭

    Hi @nemunoz , I think you can resolve your issue with BindableLayout feature. Please take a look on this link
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/bindable-layouts.

Sign In or Register to comment.