Articles in this section
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:

sorted listview

 

Descending order:

sorted listview

 

Sample Link: SortColumns

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment