How to sort the nodes in .NET MAUI TreeView (SfTreeView)?

In .NET MAUI TreeView, based on node properties you can sort the nodes.

XAML

Bind the Command to the Button to sort the nodes in TreeView.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
            xmlns:local="clr-namespace:MauiTreeView"
            x:Class="MauiTreeView.MainPage">

   <ContentPage.BindingContext>
       <local:FileManagerViewModel x:Name="viewModel"/>
   </ContentPage.BindingContext>

   <Grid RowDefinitions="Auto,*">
       <Button Text="Sort TreeView"
               Command="{Binding TreeViewSortCommand}" 
               HeightRequest="50" 
               Grid.Row="0" />
       <syncfusion:SfTreeView x:Name="treeView" 
                              Grid.Row="1" 
                              ChildPropertyName="SubFiles" 
                              ItemTemplateContextType="Node" 
                              AutoExpandMode="AllNodesExpanded" 
                              ItemsSource="{Binding ImageNodeInfo}">
           <syncfusion:SfTreeView.ItemTemplate>
               <DataTemplate>
                   <Grid x:Name="grid" RowSpacing="0" >
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="40" />
                           <ColumnDefinition Width="*" />
                       </Grid.ColumnDefinitions>
                       <Image Source="{Binding Content.ImageIcon}" 
                              VerticalOptions="Center" 
                              HorizontalOptions="Center" 
                              HeightRequest="35" 
                              WidthRequest="35"/>
                       <Grid Grid.Column="1" 
                             RowSpacing="1" 
                             Padding="1,0,0,0" 
                             VerticalOptions="Center">
                           <Label LineBreakMode="NoWrap" 
                                  Text="{Binding Content.ItemName}" 
                                  VerticalTextAlignment="Center"/>
                       </Grid>
                   </Grid>
               </DataTemplate>
           </syncfusion:SfTreeView.ItemTemplate>
       </syncfusion:SfTreeView>
   </Grid>
</ContentPage> 

C#

To sort the collection, create a new collection and sort the ViewModel collection based on the model property using OrderBy linq method. Assign the new collection to the ViewModel collection in the command execute method.

namespace MauiTreeView
{
   public class FileManagerViewModel : INotifyPropertyChanged
   {
       public Command TreeViewSortCommand { get; set; }

       public FileManagerViewModel()
       {
           TreeViewSortCommand = new Command(OnTreeViewSortClicked);
       }
       
       private void OnTreeViewSortClicked(object obj)
       {
           this.ImageNodeInfo = new ObservableCollection<FileManager>(ImageNodeInfo.OrderBy(i => i.ItemName));
       }
   }
} 

C#

To notify the collection changed, implement INotifyPropertyChanged for ViewModel and raise PropertyChanged event for collection.

namespace MauiTreeView
{
   public class FileManagerViewModel : INotifyPropertyChanged
   {
       public ObservableCollection<FileManager> ImageNodeInfo
       {
           get
           {
               return imageNodeInfo;
           }
           set
           {
               this.imageNodeInfo = value;
               this.RaisedOnPropertyChanged("ImageNodeInfo");
           }
       }

       public event PropertyChangedEventHandler PropertyChanged;
       public void RaisedOnPropertyChanged(string _PropertyName)
       {
           if (PropertyChanged != null)
           {
               PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
           }
       }
   }
} 

Download the complete sample from GitHub

Conclusion:

I hope you enjoyed learning how to sort the nodes in .NET MAUI TreeView.

You can refer to our .NET MAUI TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!