Articles in this section
Category / Section

How to bring the selected node to view when navigation back in Xamarin.Forms TreeView (SfTreeView) ?

1 min read

You can bring the selected node to view when navigating to another page on selection and back to the SfTreeView page in Xamarin.Forms by using the BringToView method.

XAML

Bind SfTreeView.ItemTapped command to navigate to another page.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TreeViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             x:Class="TreeViewXamarin.MainPage">
 
    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
 
    <syncfusion:SfTreeView x:Name="treeView" ChildPropertyName="SubFiles" ItemTemplateContextType="Node" AutoExpandMode="AllNodesExpanded" TapCommand="{Binding ItemTappedCommand}" ItemsSource="{Binding ImageNodeInfo}" VerticalOptions="Center">
        <syncfusion:SfTreeView.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="grid" RowSpacing="0" >
                    ...
                </Grid>
            </DataTemplate>
        </syncfusion:SfTreeView.ItemTemplate>
    </syncfusion:SfTreeView>
</ContentPage>

C#

In the command execution method, get the tapped node details from the command parameter and set it to the ViewModel.SelectedNode property.

namespace TreeViewXamarin
{
    public class FileManagerViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<FileManager> imageNodeInfo;
        private object selectedNode;
 
        public FileManagerViewModel()
        {
            ItemTappedCommand = new Command<object>(OnItemTapped);
        }
 
        public Command<object> ItemTappedCommand { get; set; }
 
        public object SelectedNode
        {
            get
            {
                return selectedNode;
            }
            set
            {
                selectedNode = value;
                this.OnPropertyChanged("SelectedNode");
            }
        }
 
        private void OnItemTapped(object obj)
        {
            this.SelectedNode = (obj as TreeViewNode).Content as FileManager;
            App.Current.MainPage.Navigation.PushAsync(new NewPage());
        }
    }
}

C#

In the OnAppearing override method, invoke the SfTreeView.BringIntoView method to bring the selected item to the view by passing the ViewModel.SelectedNode property.

namespace TreeViewXamarin
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        protected override void OnAppearing()
        {
            //Brind the selected item to the view.
            if (this.viewModel.SelectedNode != null)
                treeView.BringIntoView(this.viewModel.SelectedNode, true);
            
            base.OnAppearing();
        }
    }
}

Output

Demo image to scroll the selected item into view in Xamarin.Forms SfTreeView

View sample in GitHub

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