Expand and Collapse in WPF TreeView (SfTreeView)
21 Sep 20219 minutes to read
The WPF TreeView allows you to expand and collapse the nodes either by user interaction on the nodes or by programmatically.
Expand Action Trigger
Expanding and Collapsing of nodes can be performed either by tapping the expander view or in both expander view and content view by setting the ExpandActionTrigger property.
<syncfusion:SfTreeView x:Name="sfTreeView" ExpandActionTrigger="Node" />
// Expands by tapping both expander view and content view.
sfTreeView.ExpandActionTrigger = ExpandActionTrigger.Node;
Auto Expand Mode
By default, the treeview items will be in collapsed state. You can define how the nodes to be expanded while loading the TreeView by using AutoExpandMode property.
The AutoExpandMode
property is only applicable for bound mode. For Unbound mode you need to set IsExpanded
property to true
while creating the nodes, to be in expanded state while loading the TreeView.
- None : All items are collapsed when loaded.
- RootNodes : Expands only the root item when loaded.
- AllNodes : Expands all the items when loaded.
Expand or collapse the nodes based on property of underlying data object
You can bind expand state of node to the bool property in underlying data object by using IsExpandedPropertyName property. TreeView updates the expanded of node when underlying data object property gets changed and vice versa.
xmlns:treeviewengine="clr-namespace:Syncfusion.UI.Xaml.TreeView.Engine;assembly=Syncfusion.SfTreeView.WPF"
<syncfusion:SfTreeView x:Name="treeView"
ItemsSource="{Binding Folders}">
<syncfusion:SfTreeView.HierarchyPropertyDescriptors>
<treeviewengine:HierarchyPropertyDescriptor IsExpandedPropertyName="IsExpanded" ChildPropertyName="SubFiles" TargetType="{x:Type local:FileManager}" />
</syncfusion:SfTreeView.HierarchyPropertyDescriptors>
</syncfusion:SfTreeView>
public class FileManager : INotifyPropertyChanged
{
private string fileName;
private ObservableCollection<FileManager> subFiles;
private bool isExpanded;
public ObservableCollection<FileManager> SubFiles
{
get { return subFiles; }
set
{
subFiles = value;
RaisedOnPropertyChanged("SubFiles");
}
}
public string ItemName
{
get { return fileName; }
set
{
fileName = value;
RaisedOnPropertyChanged("ItemName");
}
}
public bool IsExpanded
{
get { return isExpanded; }
set
{
isExpanded = value;
RaisedOnPropertyChanged("IsExpanded");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisedOnPropertyChanged(string _PropertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
}
}
}
public class FileManagerViewModel
{
private ObservableCollection<FileManager> folders;
public FileManagerViewModel()
{
GenerateSource();
}
public ObservableCollection<FileManager> Folders
{
get { return folders; }
set { this.folders = value; }
}
private void GenerateSource()
{
var fileManager = new ObservableCollection<FileManager>();
var doc = new FileManager() { ItemName = "Documents", IsExpanded = true };
var download = new FileManager() { ItemName = "Downloads", IsExpanded = false };
var pollution = new FileManager() { ItemName = "Environmental Pollution.docx"};
var globalWarming = new FileManager() { ItemName = "Global Warming.ppt" };
var sanitation = new FileManager() { ItemName = "Sanitation.docx"};
var socialNetwork = new FileManager() { ItemName = "Social Network.pdf" };
var youthEmpower = new FileManager() { ItemName = "Youth Empowerment.pdf" };
var games = new FileManager() { ItemName = "Game.exe" };
var tutorials = new FileManager() { ItemName = "Tutorials.zip" };
var TypeScript = new FileManager() { ItemName = "TypeScript.7z"};
var uiGuide = new FileManager() { ItemName = "UI-Guide.pdf"};
doc.SubFiles = new ObservableCollection<FileManager>
{
pollution,
globalWarming,
sanitation,
socialNetwork,
youthEmpower
};
download.SubFiles = new ObservableCollection<FileManager>
{
games,
tutorials,
TypeScript,
uiGuide
};
fileManager.Add(doc);
fileManager.Add(download);
folders = fileManager;
}
}
NOTE
IsExpandedPropertyName
property is not supported for unbound mode and it accepts only boolean type property.
Programmatic Expand and Collapse
TreeView allows programmatic expand and collapse based on the TreeViewNode and level by using following methods.
-
ExpandNode(TreeViewNode item) - Method to expand the particular
TreeViewNode
passed to it. -
CollapseNode(TreeViewNode item) - Method to collapse the particular
TreeViewNode
passed to it. - ExpandNodes(int level) - Method to expand the all items of level passed to it.
- CollapseNodes(int level) - Method to expand the all items of level passed to it.
// Expands all the nodes of root level '0'
sfTreeView.ExpandNodes(0);
// Collapses all the nodes of root level '0'
sfTreeView.CollapseNodes(0);
// Expand a particular node.
sfTreeView.ExpandNode(node);
// Collapse a particular node.
sfTreeView.CollapseNode(node);
Expand and Collapse all the nodes
Expand and Collapse all the TreeViewNode programmatically at runtime by using the SfTreeView.ExpandAll
method and SfTreeView.CollapseAll
method.
//Expands all the nodes
sfTreeView.ExpandAll();
//Collapses all the nodes
sfTreeView.CollapseAll();
Expand and Collapse using Keyboard
TreeView allows to expand and collapse the nodes by using right and left arrows keys. To expand a node, press the right arrow key and to collapse a node, press the left arrow key on the focused item.
Events
TreeView exposes following events to handle expanding and collapsing of items.
- NodeCollapsing - It occurs when a node is being collapsed.
- NodeExpanding - It occurs when a node is being expanded.
- NodeCollapsed - It occurs when a node is collapsed.
- NodeExpanded - It occurs when a node is expanded.
The expanding and collapsing interactions can be handled with the help of NodeCollapsing
and NodeExpanding
events and expanded and collapsed interactions can be handled with help of NodeCollapsed
and NodeExpanded
events.
NOTE
You can refer to our WPF TreeView feature tour page for its groundbreaking feature representations. You can also explore our WPF TreeView example to knows how to represents hierarchical data in a tree-like structure with expand and collapse node options.