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.
Please pour some ideas. Lead me to some examples (if any).
Thanks.
N Baua
@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
Answers
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
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
@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:
Here i can call the EditCommand in my viewmodel, with the key of the group as a parameter.
Hope this helps,
Dirk
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