Xamarin two collectionviews right after one another without space

Question

I am trying to display two collection views in a page. I want first collection view displays all of its items and only after the second collection view starts right after end of the first collection view without any space to display its items.

However when I add the second collection view in the page, the page divided into to two section. How can I achieve what I want. Any help appreciated.

<?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:local="clr-namespace:ListTestApp.ViewModels"
xmlns:model="clr-namespace:ListTestApp.Models"
x:DataType="local:ListPageViewModel"
x:Class="ListTestApp.Views.ListPage">
<ContentPage.BindingContext>
<local:ListPageViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />

        <CollectionView x:Name="ItemsListView"   
            HeightRequest="200"  
            ItemsSource="{Binding ItemList1}"                               
            SelectionMode="None">  
            <CollectionView.Header>  
                <Label Text="List 1" TextColor="Chocolate"  FontSize="20" Padding="10" />  
            </CollectionView.Header>  
            <CollectionView.ItemTemplate>  
                <DataTemplate>  
                    <StackLayout Padding="10" x:DataType="model:Item" >  
                        <Label Text="{Binding Text}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemTextStyle}" FontSize="16" />                              
                    </StackLayout>  
                </DataTemplate>  
            </CollectionView.ItemTemplate>  
        </CollectionView>  

        <CollectionView x:Name="ItemsListView2"  
            ItemsSource="{Binding ItemList2}"                               
            SelectionMode="None">  
            <CollectionView.Header>  
                <Label Text="List 2" TextColor="Chocolate"  FontSize="20" Padding="10" />  
            </CollectionView.Header>  
            <CollectionView.ItemTemplate>  
                <DataTemplate>  
                    <StackLayout Padding="10" x:DataType="model:Item" >  
                        <Label Text="{Binding Text}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemTextStyle}" FontSize="16" />  
                    </StackLayout>  
                </DataTemplate>  
            </CollectionView.ItemTemplate>  
        </CollectionView>  

    </StackLayout>  
</ContentPage.Content>  

</ContentPage>

using ListTestApp.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace ListTestApp.ViewModels
{
public class ListPageViewModel : BaseViewModel
{

    public ObservableCollection<Item> ItemList1 { get; set; }  

    public ObservableCollection<Item> ItemList2 { get; set; }  

    public ListPageViewModel()   
    {  

        ItemList1 = new ObservableCollection<Item> {   
            new Item{ Id="1", Text="Item1", Description="" } ,  
            new Item{ Id="2", Text="Item2", Description="" },  
            //new Item{ Id="11", Text="Item1", Description="" } ,  
            //new Item{ Id="12", Text="Item2", Description="" },  
            //new Item{ Id="13", Text="Item1", Description="" } ,  
            //new Item{ Id="14", Text="Item2", Description="" }  

        };  

        ItemList2 = new ObservableCollection<Item> {  
            new Item{ Id="3", Text="Item3", Description="" } ,  
            new Item{ Id="4", Text="Item4", Description="" } ,  
            new Item{ Id="5", Text="Item5", Description="" } ,  
            new Item{ Id="6", Text="Item6", Description="" }  
        };  

        OnPropertyChanged(nameof(ItemList1));  
        OnPropertyChanged(nameof(ItemList2));  
    }  

}  

}

Answer 1

Hello,​

You can set a specific height for first <CollectionView>, I set HeightRequest="200", I can get the result that you want.

As Note: How to write a quality question, please do not post screenshot of code.

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

BindableLayout is the solution. There is the code in following link.

https://stackoverflow.com/questions/73316721/xamarin-two-collectionviews-right-after-one-another-without-space-between-them/73333326#73333326