Category / Section
How to sort the ListView items by choosing property name in the header?
2 mins read
Xamarin listview(SfListView) allows you to sort the listview items based on the property name selected in the header item.
xaml
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable"> <ContentPage.Content> <syncfusion:SfListView x:Name="listView" IsStickyHeader="True" ItemsSource="{Binding contactsinfo}"> <syncfusion:SfListView.HeaderTemplate> <DataTemplate> <Grid> <Grid Grid.Column="0"> <Label Text="Contact Image"/> </Grid> <Grid Grid.Column="1"> <Grid.GestureRecognizers> <TapGestureRecognizer Command="{Binding BindingContext.NameTapCommand,Source={x:Reference Name=listView}}" CommandParameter="{Binding Source={x:Reference Name=listView}}"/> </Grid.GestureRecognizers> <Label Text="Contact Name"/> </Grid> <Grid Grid.Column="2"> <Grid.GestureRecognizers> <TapGestureRecognizer Command="{Binding BindingContext.NumberTapCommand,Source={x:Reference Name=listView}}" CommandParameter="{Binding Source={x:Reference Name=listView}}"/> </Grid.GestureRecognizers> <Label Text="Contact Number"/> </Grid> <Grid Grid.Column="3"> <Grid.GestureRecognizers> <TapGestureRecognizer Command="{Binding BindingContext.StringTapCommand,Source={x:Reference Name=listView}}" CommandParameter="{Binding Source={x:Reference Name=listView}}"/> </Grid.GestureRecognizers> <Label Text="Display String" /> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.HeaderTemplate> <syncfusion:SfListView.ItemTemplate> <DataTemplate> ... ... ... </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </ContentPage.Content> </ContentPage>
Here, Items are sort based on the label tapped in the header item.
C#
public class ContactsViewModel : INotifyPropertyChanged { static bool isAscending = true; private Command<Object> nametapCommand; private Command<Object> numbertapCommand; private Command<Object> stringtapCommand; public Command<Object> NameTapCommand { get { return nametapCommand; } set { nametapCommand = value; } } public Command<Object> NumberTapCommand { get { return numbertapCommand; } set { numbertapCommand = value; } } public Command<Object> StringTapCommand { get { return stringtapCommand; } set { stringtapCommand = value; } } public ObservableCollection<Contacts> contactsinfo { get; set; } public ContactsViewModel() { NameTapCommand = new Command<object>(NameTapped); NumberTapCommand = new Command<object>(NumberTapped); StringTapCommand = new Command<object>(StringTapped); } private void StringTapped(object obj) { var listView = obj as SfListView; listView.DataSource.SortDescriptors.Clear(); listView.DataSource.SortDescriptors.Add(new SortDescriptor() { PropertyName = "DisplayString", Direction = isAscending ? ListSortDirection.Ascending : ListSortDirection.Descending }); isAscending = isAscending ? false : true; } private void NumberTapped(object obj) { var listView = obj as SfListView; listView.DataSource.SortDescriptors.Clear(); listView.DataSource.SortDescriptors.Add(new SortDescriptor() { PropertyName = "ContactNumber", Direction = isAscending ? ListSortDirection.Ascending : ListSortDirection.Descending }); isAscending = isAscending ? false : true; } private void NameTapped(object obj) { var listView = obj as SfListView; listView.DataSource.SortDescriptors.Clear(); listView.DataSource.SortDescriptors.Add(new SortDescriptor() { PropertyName = "ContactName", Direction = isAscending ? ListSortDirection.Ascending : ListSortDirection.Descending }); isAscending = isAscending ? false : true; } }
Now run the application to render the following output.
Ascending order:
Descending order:
Sample Link: SortColumns