CollectionView Footer xamarinf forms Sticking to bottom of the page

Question

I am using a collection view in the latest xamarin forms 4.3 and I wonder if there is a way to make the footer of the collection view to stick to the bottom of the page even when there are few items only in the collection view.

Is this possible?

thanks

Answer 1

The CollectionView can present a header and footer that scroll with the items in the list. The Footer specifies the string, binding, or view that will be displayed at the end of the list. It could not stick to the bottom of the page.

Solution:

An easy way is to create a custom control with labels to simulate the collectionview header and footer.

MyCustomControl:

<StackLayout Orientation="Vertical">
    <Label x:Name="Header_label" Text="Hader" VerticalOptions="StartAndExpand" BackgroundColor="Red"></Label>
    <CollectionView ItemsSource="{Binding models}" ItemsLayout="VerticalList">
        <CollectionView.ItemTemplate>
            <DataTemplate>

                <StackLayout>
                    <Label x:Name="ID_label" Text="{Binding id}"></Label>
                    <Label x:Name="Name_label" Text="{Binding name}"></Label>
                    <Image x:Name="image" Source="{Binding image}"></Image>
                </StackLayout>

            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    <Label x:Name="Footer_label" Text="Footer" VerticalOptions="EndAndExpand" BackgroundColor="Green"></Label>
</StackLayout>

Model:

public class model
{
    public string name { get; set; }
    public string image { get; set; }
    public int id { get; set; }
}

Binding the content in custom control, you could binding in MainPage as well.

Please Note: Before you initialize Xamarin.Forms in your MainActivity.cs, add the following flag.

 Forms.SetFlags("CollectionView_Experimental");

I have upload on GitHub, you could download from Collectionview/MyCustomControl folder for reference. https://github.com/WendyZang/Test.git

Updated:

Or you could control the Footer according to the count of the collectionview items.

Use the IsVisible property when you crate the custom control.

   <Label x:Name="Footer_label" IsVisible="{Binding IsVisible}" Text="Footer" VerticalOptions="EndAndExpand" BackgroundColor="Green"></Label>

Make the custom control inherit INotifyPropertyChanged.

public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    private bool _IsVisible;
    public bool IsVisible
    {
        get
        {
            return _IsVisible;
        }

        set
        {
            if (_IsVisible != value)
            {
                _IsVisible = value;
                NotifyPropertyChanged("IsVisible");
            }
        }
    }

Set the IsVisible according to the count.

 if (models.Count <8)
        {
            IsVisible = false;

        }
        else
        {
            IsVisible = true;
        }

This sample has already uploaded on Github in updated folder.