highlight-nodes-on-search-treeview-xamarin

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

Sample

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>

Behavior

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);
            }
        }
    }
}

Requirements to run the demo

To run the demo, refer to System Requirements for Xamarin

Troubleshooting

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.