Loading...
Loading...
Comprehensive guide for implementing Syncfusion WPF TreeView (SfTreeView) control to display hierarchical data in Windows Presentation Foundation applications. Use this when working with tree structures, folder hierarchies, organizational charts, or parent-child data relationships. Supports drag-and-drop reordering, checkbox selection, load-on-demand for large datasets, and inline editing of tree nodes.
npx skill4agent add syncfusion/wpf-ui-components-skills syncfusion-wpf-treeview<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
xmlns:Engine="clr-namespace:Syncfusion.UI.Xaml.TreeView.Engine;assembly=Syncfusion.SfTreeView.WPF">
<Grid>
<syncfusion:SfTreeView x:Name="treeView" Width="300">
<syncfusion:SfTreeView.Nodes>
<Engine:TreeViewNode Content="Documents" IsExpanded="True">
<Engine:TreeViewNode.ChildNodes>
<Engine:TreeViewNode Content="Reports"/>
<Engine:TreeViewNode Content="Invoices"/>
</Engine:TreeViewNode.ChildNodes>
</Engine:TreeViewNode>
<Engine:TreeViewNode Content="Pictures" IsExpanded="True">
<Engine:TreeViewNode.ChildNodes>
<Engine:TreeViewNode Content="Vacation"/>
<Engine:TreeViewNode Content="Family"/>
</Engine:TreeViewNode.ChildNodes>
</Engine:TreeViewNode>
</syncfusion:SfTreeView.Nodes>
</syncfusion:SfTreeView>
</Grid>
</Window><syncfusion:SfTreeView x:Name="treeView"
ItemsSource="{Binding Folders}"
ChildPropertyName="SubFolders"
AutoExpandMode="RootNodes">
<syncfusion:SfTreeView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FolderName}"
VerticalAlignment="Center"/>
</DataTemplate>
</syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>// ViewModel
public class ViewModel : INotifyPropertyChanged
{
public ObservableCollection<Folder> Folders { get; set; }
public ViewModel()
{
Folders = new ObservableCollection<Folder>
{
new Folder
{
FolderName = "Documents",
SubFolders = new ObservableCollection<Folder>
{
new Folder { FolderName = "Reports" },
new Folder { FolderName = "Invoices" }
}
}
};
}
}
public class Folder : INotifyPropertyChanged
{
public string FolderName { get; set; }
public ObservableCollection<Folder> SubFolders { get; set; }
}<syncfusion:SfTreeView x:Name="treeView"
ItemsSource="{Binding Items}"
ChildPropertyName="Children"
SelectionMode="Multiple"
CheckBoxMode="Recursive"
CheckedItems="{Binding CheckedItems}"
ItemTemplateDataContextType="Node">
<syncfusion:SfTreeView.ItemTemplate>
<DataTemplate>
<Grid>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
FocusVisualStyle="{x:Null}"/>
<TextBlock Text="{Binding Content.Name}"
Margin="25,0,0,0"
VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView><syncfusion:SfTreeView x:Name="treeView"
ItemsSource="{Binding Items}"
ChildPropertyName="Children"
LoadOnDemand="TreeView_LoadOnDemand"/>private void TreeView_LoadOnDemand(object sender, LoadOnDemandEventArgs e)
{
var node = e.Node;
var model = node.Content as MyModel;
// Load child items asynchronously
var childItems = LoadChildItemsFromDatabase(model.Id);
node.PopulateChildNodes(childItems);
e.HasChildNodes = childItems.Count > 0;
}<syncfusion:SfTreeView x:Name="treeView"
ItemsSource="{Binding Items}"
ChildPropertyName="Children"
AllowDragging="True"
SelectionMode="Multiple"
ItemDropping="TreeView_ItemDropping"/>private void TreeView_ItemDropping(object sender, TreeViewItemDroppingEventArgs e)
{
// Validate drop operation
if (!IsValidDrop(e.TargetNode, e.DraggingNodes))
{
e.Handled = true; // Cancel drop
}
}| Property | Type | Description |
|---|---|---|
| IEnumerable | Data source for bound mode |
| string | Property name for child collection |
| SelectionMode | Single, Multiple, Extended, etc. |
| object | Currently selected item |
| ObservableCollection | Multiple selected items |
| CheckBoxMode | None, Default, Recursive |
| ObservableCollection | Checked items collection |
| bool | Enable drag and drop |
| bool | Enable inline editing |
| AutoExpandMode | AllNodes, RootNodes, None |
| ExpandActionTrigger | Node or Expander click |
| bool | Display tree lines |
| DataTemplate | Template for item display |
| DataTemplate | Template for editing mode |
| DataTemplate | Template for expander icon |