<Window.DataContext>
<local:FileManagerViewModel/>
</Window.DataContext>
<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>
<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; }
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();
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
