How to maintain the expansion and collapsed states of nodes when navigating in .NET MAUI TreeView (SfTreeView)?

You can keep the expanded and collapsed state of the TreeViewNode after navigation by using a model class property and updating its value whenever the node is expanded or collapsed.

Define Behavior to the SfTreeView to update the expansion and collapsed state.

<treeView:SfTreeView x:Name="treeView" 
                     ExpanderWidth="0"
                     Indentation="40"
                     ExpandActionTarget="Node"
                     ChildPropertyName="SubFiles" 
                     ItemTemplateContextType="Node" 
                     ItemsSource="{Binding ImageNodeInfo}">
    <treeView:SfTreeView.Behaviors>
        <local:TreeViewBehavior/>
    </treeView:SfTreeView.Behaviors>
    <treeView:SfTreeView.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="grid" RowSpacing="0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40" />
                    <ColumnDefinition Width="40" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" 
                       Source="{Binding IsExpanded, Converter={StaticResource ExpanderIconConverter}}"
                       IsVisible="{Binding HasChildNodes,Converter={StaticResource ExpanderIconVisibilityConverter}}"/>
                <Image Grid.Column="1" 
                       Source="{Binding Content.ImageIcon}" 
                       VerticalOptions="Center" 
                       HorizontalOptions="Center" 
                       HeightRequest="35" 
                       WidthRequest="35"/>
                <Grid Grid.Column="2" 
                      RowSpacing="1" 
                      Padding="1,0,0,0" 
                      VerticalOptions="Center">
                    <Label LineBreakMode="NoWrap" 
                           Text="{Binding ., Converter={x:StaticResource ExpanderStateConverer}}" 
                           VerticalTextAlignment="Center"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView>

Update the model class IsExpanded property with the TreeViewNode.IsExpanded value in the NodeExpanded and NodeCollapsed events.

public class TreeViewBehavior : Behavior<SfTreeView>
{
    protected override void OnAttachedTo(SfTreeView bindable)
    {
        bindable.NodeExpanded += Bindable_NodeExpanded;
        bindable.NodeCollapsed += Bindable_NodeCollapsed;
        base.OnAttachedTo(bindable);
    }

    protected override void OnDetachingFrom(SfTreeView bindable)
    {
        bindable.NodeExpanded -= Bindable_NodeExpanded;
        bindable.NodeCollapsed -= Bindable_NodeCollapsed;
        base.OnDetachingFrom(bindable);
    }

    private void Bindable_NodeCollapsed(object? sender, NodeExpandedCollapsedEventArgs e)
    {
        (e.Node!.Content as FileManager)!.IsExpanded = e.Node.IsExpanded;
    }

    private void Bindable_NodeExpanded(object? sender, NodeExpandedCollapsedEventArgs e)
    {
        (e.Node!.Content as FileManager)!.IsExpanded = e.Node.IsExpanded;
    }
}

While navigating back to the TreeView, you can use custom converters to keep the state of each TreeViewNode by using the data model property.

public class ExpanderStateConverer : IValueConverter
{
    public object Convert(object? value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null) 
           return null;

        var treeViewNode = value as Syncfusion.TreeView.Engine.TreeViewNode;
        var dataObject = treeViewNode.Content as FileManager;
        treeViewNode.IsExpanded = dataObject.IsExpanded;
        return dataObject.ItemName;
    }

    public object ConvertBack(object? value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Output:

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to keep the MAUI TreeView expansion and collapsed states.

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 also explore our .NET MAUI TreeView example to understand how to create and manipulate data.

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!