Skip to content

This repository contains sample about how to bring the selected node to view when navigation back in Xamarin.Forms TreeView (SfTreeView) ?

Notifications You must be signed in to change notification settings

SyncfusionExamples/bring-selected-node-to-view-on-navigation-back-treeview-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

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.

You can also refer our article.

https://www.syncfusion.com/kb/12004/how-to-bring-the-selected-node-to-view-when-navigation-back-in-xamarin-forms-treeview

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

BringSelectedNodeToView

About

This repository contains sample about how to bring the selected node to view when navigation back in Xamarin.Forms TreeView (SfTreeView) ?

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages