Articles in this section
Category / Section

How to highlight nodes when searching in Xamarin.Forms TreeView (SfTreeView)

1 min read

You can highlight the TreeViewNode when searching in Xamarin.Forms SfTreeView. You can also refer to the search nodes in the SfTreeView document here.

XAML

Bind the model property to customise the BackgroundColor of the ItemTemplate.

<StackLayout>
    <SearchBar Placeholder="Search TreeView" x:Name="searchBar"/>
    <syncfusion:SfTreeView x:Name="treeView" ChildPropertyName="SubFiles" ItemTemplateContextType="Node" 
                            AutoExpandMode="AllNodesExpanded" ItemsSource="{Binding ImageNodeInfo}">
        <syncfusion:SfTreeView.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="grid" RowSpacing="0" BackgroundColor="{Binding Content.NodeColor}">
                    <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>
</StackLayout>

C#

Set the BackgroudColor for the filtered items. Also, reset the color when the search is removed.

namespace TreeViewXamarin
{
    public class Behavior : Behavior<ContentPage>
    {
        SearchBar SearchBar;
        SfTreeView TreeView;
 
        protected override void OnAttachedTo(ContentPage bindable)
        {
            SearchBar = bindable.FindByName<SearchBar>("searchBar");
            TreeView = bindable.FindByName<SfTreeView>("treeView");
 
            SearchBar.TextChanged += SearchBar_TextChanged;
 
            base.OnAttachedTo(bindable);
        }
 
        private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
        {
            this.TraverseNodes(TreeView.Nodes, e.NewTextValue);
        }
 
        /// <summary>
        /// Recursively traverse all the nodes in the TreeView and sets the BackgroundColor for the searched nodes. 
        /// </summary>
        /// <param name="nodes">Represents the TreeViewNodes.</param>
        /// <param name="searchText">Represents the search key word.</param>
        private void TraverseNodes(TreeViewNodeCollection nodes, string searchText)
        {
            foreach (var child in nodes)
            {
                (child.Content as FileManager).NodeColor = (child.Content as FileManager).ItemName.ToLower().StartsWith(searchText.ToLower()) ? Color.Teal : Color.Transparent;
 
                if (string.IsNullOrEmpty(searchText)) (child.Content as FileManager).NodeColor = Color.Transparent;
 
                if (child.ChildNodes != null)
                {
                    this.TraverseNodes(child.ChildNodes, searchText);
                }
            }
        }
    }
}

View sample in GitHub

Demo gif to customize the TreeViewNode based when filtering the Xamarin.Forms SfTreeView

 

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