Add a button at the end of each group header in a xamarin forms list view

Question

I have listview with group header template. I need to add button at the end of each group of the list view

Xaml:

<ListView x:Name="lvActivities" ItemsSource="{Binding LaborMiscTimeList}">
<ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Margin="8,8,8,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="80"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding Key}" FontSize="Medium" TextColor="Black" Grid.Column="0"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
 <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="5">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="60"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Label  Text="{Binding WorkDescription}" Grid.Row="0" Grid.Column="1" FontSize="20" VerticalOptions="Center"></Label>
                            <Label Text="{Binding TotalHours}"  Grid.Column="2" Grid.RowSpan="2" HorizontalOptions="Center"   TextColor="Black" VerticalOptions="Center"></Label>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Footer>
                <Label/>
            </ListView.Footer>
</ListView>

Below is the code I'm using for grouping based on date:

var sorted = from miscTime in toBeGrouped
                     orderby miscTime.LaborDate descending
                     group miscTime by miscTime.LaborDate into miscTimeGroup
                     select new Grouping_Activities(miscTimeGroup.Key.ToString("MMM dd, yyyy"), miscTimeGroup);

public class Grouping_Activities : ObservableCollection<LaborMiscTime>
{
    public string Key { get; private set; }

    public Grouping_Activities(string key, IEnumerable<LaborMiscTime> items)
    {
        Key = key;
        if (items != null)
        {
            long totalHoursTicks = 0;
            TimeSpan timeSpan;
            TotalHours = TimeSpan.FromTicks(totalHoursTicks).ToString(@"hh\:mm");
        }

    }
}

I tried to set a footer for grouped list but looks like there is no such option. Is it possible to achieve this?

Answer 1

You can use CollectionView to customize the group footer in Xamarin Forms :

The appearance of each group footer can be customized by setting the CollectionView.GroupFooterTemplate property to a DataTemplate:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    ...
    <CollectionView.GroupFooterTemplate>
        <DataTemplate>
            <Button Text="{Binding Count, StringFormat='Total animals: {0:D}'}"
                   Command="{Binding ButtonCommand}"
                   Margin="0,0,0,10" />
        </DataTemplate>
    </CollectionView.GroupFooterTemplate>
</CollectionView>

In this example, each group footer is set to a Button that displays the number of items in the group. The following screenshots show the customized group footer:

==================================Update=====================================

You can use Command of Button to bind click event in ViewModel .First , adding Command in ViewModel :

public ICommand ButtonCommand { private set; get; }

public class AnimalGroup : List<Animal>
{
    public string Name { get; private set; }

    public ICommand ButtonCommand { private set; get; }


    public AnimalGroup(string name, List<Animal> animals) : base(animals)
    {
        Name = name;
        ButtonCommand = new Command( () => {
            Console.WriteLine("---------"+Name);
        });
    }

    public override string ToString()
    {
        return Name;
    }
}

Then adding Command="{Binding ButtonCommand}" for Button in Xaml.

Effect :