Grouped ListView - Custom GroupHeaderTemplate

N_Baua

Hi guys,

Looking for some specific style of grouping in ListView, seeking your thoughts/ideas on the same.

I've a requirement to implement the following view and the current implementation only provided me with standard GroupDisplayBinding and GroupShortNameBinding with the GroupHeaderTemplate. and believe me none of the online example go beyond the "A", "B", "C" ... group headers.

• I want to have Group Title and Total Sum (count of items) and small icon for expand/collapse state.
• I want to have my list view to respond to a bottom control (for expand all /collapse all feature) as well.

Please pour some ideas. Lead me to some examples (if any).

Thanks.
N Baua

DirkWilhelm

@N_Baua what have you tried so far?

I guess you know of James Montemagnos example: https://montemagno.com/enhancing-xamarinforms-listview-with-grouping/

I think that extending his Grouping class with additional properties should work and then you can access those properties in your group header template using bindings.

A button in the groupheader is also possible. In one of my project i have something like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MyPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Name="MyPage"
             >

    <ListView GroupDisplayBinding="{Binding Key}"
              HasUnevenRows="true"
              IsGroupingEnabled="true"
              ItemsSource="{Binding DataGrouped}">

        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell Height="40">
                    <StackLayout Orientation="Horizontal"
                                 BackgroundColor="#3498DB"
                                 VerticalOptions="FillAndExpand">
                        <Label Text="{Binding Key}"
                               TextColor="White"
                               VerticalOptions="Center" />
                        <Button Text="Edit"
                                            TextColor="White" 
                                            FontSize="20" 
                                            Command="{Binding Path=BindingContext.EditCommand, Source={x:Reference Name=MyPage}}"
                                            CommandParameter="{Binding Key}"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>

    </ListView>
...

Here i can call the EditCommand in my viewmodel, with the key of the group as a parameter.

Hope this helps,
Dirk

Dinesh4693

Hi Baua,

You can achieve the reported requirement using SfListView control. Please refer the following articles

Load items count in the group header: https://www.syncfusion.com/kb/8019/how-to-display-the-items-count-of-group-in-the-group-header-item-in-sflistview
Add expand/collapse icon in the group header: https://www.syncfusion.com/kb/7518/how-to-add-expand-or-collapse-icon-in-group-header-of-sflistview

Syncfusion controls is available for free through the community license program if you qualify (less than 1 million USD in revenue).
Note: I work for Syncfusion.

Regards,
Dinesh Babu Yadav

N_Baua

Hi @Dinesh4693 ,

Sync Fusion ListView controls increased my APK by at least another 9 Mb, so trying to avoid the SF controls.
(Actually refraining myself from using the 3rd party controls for now( only exception is AsNum controls for RadioButtons and CheckBoxes and removed all additional code to remain light on my apps APK size.)

Thanks for your inputs though.

-- N Baua

DirkWilhelm

@N_Baua what have you tried so far?

I guess you know of James Montemagnos example: https://montemagno.com/enhancing-xamarinforms-listview-with-grouping/

I think that extending his Grouping class with additional properties should work and then you can access those properties in your group header template using bindings.

A button in the groupheader is also possible. In one of my project i have something like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MyPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Name="MyPage"
             >

    <ListView GroupDisplayBinding="{Binding Key}"
              HasUnevenRows="true"
              IsGroupingEnabled="true"
              ItemsSource="{Binding DataGrouped}">

        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell Height="40">
                    <StackLayout Orientation="Horizontal"
                                 BackgroundColor="#3498DB"
                                 VerticalOptions="FillAndExpand">
                        <Label Text="{Binding Key}"
                               TextColor="White"
                               VerticalOptions="Center" />
                        <Button Text="Edit"
                                            TextColor="White" 
                                            FontSize="20" 
                                            Command="{Binding Path=BindingContext.EditCommand, Source={x:Reference Name=MyPage}}"
                                            CommandParameter="{Binding Key}"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>

    </ListView>
...

Here i can call the EditCommand in my viewmodel, with the key of the group as a parameter.

Hope this helps,
Dirk

N_Baua

Hi @DirkWilhelm,
Actually I did tried using same logic, what I was missing is the ViewCell, resulting is some error, I could not figure out. sometimes I get too numb to sort this kind of stuff on own. silly me. .
Thanks for your show.

--- N Baua