Articles in this section
Category / Section

How to apply filters in WPF TreeView using ListCollectionView?

4 mins read

WPF TreeView (SfTreeView) allows to apply filters using ListCollectionView and CollectionView.

It can be achieved by using built in Filter property of CollectionView.

<Window.DataContext>
    <local:FileManagerViewModel/>
</Window.DataContext>
 
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--Filter applied to the SfTreeView based on the text typed in this TextBox.-->
        <TextBox x:Name="TextBox" Width="475" BorderThickness="1" Padding="2,0,2,0" Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}" Margin="0,3,0,3" />
        <syncfusion:SfTreeView
        Grid.Row="1"
        Width="475"
        Height="550"
        x:Name="treeView"
        BorderThickness="2"
        BorderBrush="LightGray"
        AutoExpandMode="AllNodes"
        FocusVisualStyle="{x:Null}"
        IsAnimationEnabled="True"
        ItemsSource="{Binding CollectionView}"
        ChildPropertyName="SubFiles">
            <syncfusion:SfTreeView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock VerticalAlignment="Center"
                           Text="{Binding FileName}" />
                    </Grid>
                </DataTemplate>
            </syncfusion:SfTreeView.ItemTemplate>
            <!--Using the SfTreeView loaded event hooks the OnFilterChanged method.-->
            <behavior:Interaction.Triggers>
                <behavior:EventTrigger EventName="Loaded">
                    <local:TreeViewFilterTrigger/>
                </behavior:EventTrigger>
            </behavior:Interaction.Triggers>
        </syncfusion:SfTreeView>
    </Grid>

 

public class FileManagerViewModel : NotificationObject
{
    #region Fields
 
    private ObservableCollection<FileManager> imageNodeInfo;
 
    public CollectionView CollectionView { get; set; }
 
    public object Item { get; set; }
    #endregion
 
    #region Constructor
 
    public FileManagerViewModel()
    {
        GenerateSource();
        CollectionView = new ListCollectionView(ImageNodeInfo);
    }
 
    #endregion
 
    #region Filtering
    internal delegate void FilterChanged();
    internal FilterChanged filterChanged;
 
    private string filterText = string.Empty;
 
    public string FilterText
    {
        get { return filterText; }
        set
        {
            filterText = value;
            if (filterChanged != null)
                filterChanged();
            RaisePropertyChanged("FilterText");
        }
    }
 
    #endregion
 
    #region Properties
 
    public ObservableCollection<FileManager> ImageNodeInfo
    {
        get { return imageNodeInfo; }
        set { this.imageNodeInfo = value; }
    }
 
 
    #endregion
}
/// <summary>
/// Represents a class that used to trigger filter action for SfTeeView.
/// </summary>
public class TreeViewFilterTrigger : TargetedTriggerAction<SfTreeView>
{
    /// <summary>
    /// Method used to hook the filter method when the SfTreeView is Loaded.
    /// </summary>
    /// <param name="parameter"></param>
    protected override void Invoke(object parameter)
    {
        var viewModel = this.Target.DataContext as FileManagerViewModel;
        viewModel.filterChanged += OnFilterChanged;
    }
 
    /// <summary>
    /// Method to filter the data.
    /// </summary>
    private void OnFilterChanged()
    {
        var viewModel = this.Target.DataContext as FileManagerViewModel;
        viewModel.CollectionView.Filter = (e) =>
        {
            FileManager file = e as FileManager;
            if ((file.FileName.ToLower()).Contains(viewModel.FilterText.ToLower()))
                return true;
            if (file.SubFiles != null)
            {
                foreach (var subFile in file.SubFiles)
                {
                    if (subFile.FileName.ToLower().Contains(viewModel.FilterText.ToLower()))
                        return true;
                    if (subFile.SubFiles != null)
                        foreach (var sub in subFile.SubFiles)
                            if (sub.FileName.ToLower().Contains(viewModel.FilterText.ToLower()))
                                return true;
                }
            }
            return false;
        };
        this.Target.ExpandAll();
 
    }
}

Text

Description automatically generated with medium confidence
View sample in github.

Conclusion

I hope you enjoyed learning about how to apply filters in WPF TreeView using ListCollectionView.

You can refer to our WPF TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

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