如何在 Xamarin 表单的分组 ListView 中创建页脚模板

Question

I'm working with Xamarin Form and C#. So, I have a listview in a Xamarin project which I enable the property IsGroupingEnabled. The items and header of items work perfectly but I cannot set a footer template. I need to create a listview, items must be composed of:

1. Header: User information.
2. Items: List of subitems.
3. Footer: Actions buttons (shared, comments, etc).

This is part of my code:

Model:

public class Post
{
    public long PostID { get; set; }
    public string Name { get; set; }
    public List<OptionDefault> OptionsDefault { get; set; }
}
public class OptionDefault
{
    public long OptionTypeID { get; set; }
    public string SubItemName { get; set; }
}

ViewModel

public class PostsViewModel
{
    public InfiniteScrollCollection<Grouping<Post, OptionDefault>> Items { get; set; } = new InfiniteScrollCollection<Grouping<Post, OptionDefault>>();
    public IPostsService repository;

    public PostsViewModel(INavigation navigation)
    {
        repository = new PostsService();

        Items = new InfiniteScrollCollection<Grouping<Post, OptionDefault>>
        {
            OnLoadMore = async () => await GetItems()
        };
        Items.LoadMoreAsync();
    }
    async Task<List<Grouping<Post, OptionDefault>>> GetItems()
    {
        IsWorking = true;
        List<Grouping<Post, OptionDefault>> items = new List<Grouping<Post, OptionDefault>>();
        try
        {
            // load the next page
            var lists = await repository.GetList(Items.Count);
            foreach (var item in lists)
            {
                for (int i = 0; i < item.OptionsDefault.Count; i++)
                {
                    if ((i + 1) == item.OptionsDefault.Count)
                        item.OptionsDefault[i].LastItem = true;
                }
                var group = new Grouping<Post, OptionDefault>(item, item.OptionsDefault);
                items.Add(group);
            }
        }
        catch (Exception ex)
        {
            ErrorHelper.RegisterError(ex);
        }
        finally
        {
            IsWorking = false;
        }
        return items;
    }

.xaml:

<ListView ItemsSource="{Binding Items}"                     
            IsGroupingEnabled="True">
        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Margin="5,15,5,0">
                        <Label Text="{Binding Key.User.UserName}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Margin="5,0,5,5">
                        <Label Text="{Binding SubItemName}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

I've tried using footertemplate, but it doesn't work:

<ListView.FooterTemplate>
            <DataTemplate>
                <StackLayout Margin="5,0,5,5">
                    <Label Text="This is my footer" />
                </StackLayout>
            </DataTemplate>
        </ListView.FooterTemplate>

Answer 1

Whether it's <ListView.Footer> or <ListView.FooterTemplate> , the display position is the same, right at the bottom of the ListView. Currently, ListView of xamarin form does not have this property to make each items have a footer. Maybe you need to rethink the requirements and UI design of your app.

Answer 2

CollectionView is now available in Xamarin.Forms. It have both GroupHeaderTemplate and GroupFooterTemplate . You can use it to show the Group of data. The code to do so is identical with ListView

Answer 3

It is not <ListView.FooterTemplate> but <ListView.Footer>

<ListView.Footer>
    <StackLayout Margin="5,0,5,5">
        <Label Text="This is my footer" />
    </StackLayout>
</ListView.Footer>

For more info, see: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#headers-and-footers