I’m currently trying to create a custom CollectionView element that has the first row frozen, so the user can see the first entry when scrolling down. After some trial and error, I concluded that the best way to do this was by rendering the first element separately from the rest. So I created a custom class as follows:

internal class CustomCollectionView : StackLayout
{
    public static readonly BindableProperty FirstItemProperty = BindableProperty.Create(
        nameof(FirstItem),
        typeof(string),
        typeof(CustomCollectionView),
        null);

    public string FirstItem
    {
        get => (string)GetValue(FirstItemProperty);
        set => SetValue(FirstItemProperty, value);
    }

    public static readonly BindableProperty RemainingItemsProperty = BindableProperty.Create(
        nameof(RemainingItems),
        typeof(ObservableCollection<Person>),
        typeof(CustomCollectionView),
        new ObservableCollection<Person>());
    
    public ObservableCollection<Person> RemainingItems
    {
        get => (ObservableCollection<Person>)GetValue(RemainingItemsProperty);
        set => SetValue(RemainingItemsProperty, value);
    }

    public CustomCollectionView()
    {
        var frozenRow = new Frame { 
            BackgroundColor = Colors.LightGray,
            Padding = new Thickness(10),
            Content = new Label { FontSize = 24, VerticalOptions = LayoutOptions.Center }
        };

        frozenRow.SetBinding(Label.TextProperty, new Binding(nameof(FirstItem), source: this.FirstItem));

        var collectionView = new CollectionView
        {
            ItemsSource = RemainingItems,
            ItemTemplate = new DataTemplate(() =>
            {
                return new Label { FontSize = 18, VerticalOptions = LayoutOptions.Center };
            })
        };

        collectionView.SetBinding(ItemsView.ItemsSourceProperty, new Binding(nameof(RemainingItems), source: this.RemainingItems));

        Children.Add(frozenRow);
        Children.Add(collectionView);
    }
}

In XAML, I tried to render this by:

<Grid>
    <local:CustomCollectionView FirstItem="{Binding HeaderExample}" RemainingItems="{Binding People}"></local:CustomCollectionView>
</Grid>

Where my ViewModel is defined as

class PersonViewModel
 {
     public ObservableCollection<Person> People { get; set; }
     public ObservableCollection<Person> HeaderItem { get; set; }

     public string HeaderExample; 

     public PersonViewModel()
     {
         // Sample data
         HeaderExample = "This is a header"; 
         HeaderItem = new ObservableCollection<Person> { new Person { Name = "Header", Age = 10, Location = "Korea" } };
         People = new ObservableCollection<Person>
     {
         new Person { Name = "Person A", Age = 30, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" },
         new Person { Name = "Person B", Age = 31, Location = "Seoul" }
     };
     }
 }

However, this doesn’t seem to render properly and I’m not sure why. At this point, I have two questions:

1. Is this even a good way to implement a frozen row in CollectionView? The only other working solution I was able to find is tinkering with the Translation.Y values when scrolling. This looks terrible though, as the row keeps moving and lagging behind the scroll, and I don’t intend to use it.

2. How can I render the items properly? I’ve tried more basic renderings such as just trying to render the HeaderExample string,
   but it still does not work. Furthermore, I’ve confirmed that the items of my viewmodel render properly when using a regular CollectionView.

I would appreciate any help regarding this matter. Thank you.