Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (149).NET Core  (24)Angular  (42)ASP.NET  (48)ASP.NET Core  (56)ASP.NET MVC  (84)Azure  (28)Blazor  (68)DocIO  (18)Essential JS 2  (67)Essential Studio  (161)Flutter  (78)JavaScript  (140)Microsoft  (101)PDF  (54)React  (31)Succinctly series  (120)Syncfusion  (457)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (16)Windows Forms  (54)WPF  (106)Xamarin  (117)XlsIO  (22)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (104)Chart  (43)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (36)Development  (244)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (16)Extensions  (9)File Manager  (3)Gantt  (7)Gauge  (5)Git  (3)Grid  (25)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (179)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (18)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (18)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (14)Solution Services  (2)Spreadsheet  (4)SQL  (5)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (41)UI  (101)Uncategorized  (68)Unix  (2)User interface  (66)Visual State Manager  (1)Visual Studio  (15)Visual Studio Code  (8)Web  (154)What's new  (99)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Top 5 Features of WPF TreeView

Top 5 Features of WPF TreeView

The WPF TreeView has all the features that an essential tree view control should have. In this blog, we are going to look at the top 5 features available to improve your application:

Let’s get started!

Expand and collapse actions

The expanding and collapsing of nodes are the usual operations performed in a TreeView control. But our Syncfusion WPF TreeView provides an intuitive way to expand and collapse the nodes. You can perform the expanding and collapsing actions by interacting with either the expander icon or the whole content view in the node. You can control this behavior with the ExpandActionTrigger property.

<syncfusion:SfTreeView x:Name="sfTreeView"  ExpandActionTrigger="Node" />

You can also change the position of the expander view. You can display the expander at either the start or end of the node by setting values to the ExpanderPosition property.

<Syncfusion:SfTreeView x:Name="sfTreeView" ExpanderPosition="End">

Recursive checking

Load a check box in each node to allow users to check and uncheck them. You can load check boxes in the WPF TreeView control when you load TreeView in bound or unbound modes. You can also modify the parent node’s checked state when you check or uncheck the child nodes by setting the CheckBoxMode property to Recursive.

If you are binding the ItemsSource and need to bind the CheckBox value, then you should set the ItemTemplateDataContextType to Node to bind the TreeViewNode.IsChecked property to CheckBox in ItemTemplate.

Refer to the following code example.

<syncfusion:SfTreeView 
    x:Name="sfTreeView"
    CheckBoxMode ="Recursive"
    CheckedItems="{Binding CheckedStates}"
    ChildPropertyName="Models"
    ItemTemplateDataContextType="Node"
    ItemsSource="{Binding Items}">            
<syncfusion:SfTreeView.ItemTemplate>
   <DataTemplate>
     <Grid>                        
        <CheckBox x:Name="CheckBox" FocusVisualStyle="{x:Null}"
              IsChecked="{Binding IsChecked, Mode=TwoWay}"/>
         <TextBlock FontSize="12" VerticalAlignment="Center" Text="{Binding Content.State}" Margin="25,0,0,0"/>
      </Grid>
   </DataTemplate>
 </syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>
Recursive checking in WPF TreeView
Recursive checking in WPF TreeView

GitHub reference: You can view the example in this GitHub location.

Load on-demand with built-in busy animation (lazy loading)

TreeView allows you to load child nodes on request using the load-on-demand (lazy loading) feature. It helps you load the child nodes from services when the end-user expands the node. You can use the LoadOnDemandCommand property to load the child nodes on demand while expanding the nodes.

An important feature is that you can also display a busy indicator in the node by using the TreeViewNode.ShowExpanderAnimation property until the data is fetched in the command.

The following code example shows the procedure to bind the LoadOnDemandCommand property with the ViewModel’s property in XAML.

<syncfusion:SfTreeView
 x:Name="sfTreeView"
 LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}"
 ItemsSource="{Binding Menu}" >
 <syncfusion:SfTreeView.ItemTemplate>
   <DataTemplate>
     <Label
        VerticalContentAlignment="Center"
        Content="{Binding ItemName}"
        FocusVisualStyle="{x:Null}"
        FontSize="12" />
    </DataTemplate>
 </syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>

The following code shows how to load child nodes on demand when the OnDemandCommand is triggered.

public class MusicInfoRepository
 {
…………….
     private ICommand treeViewOnDemandCommand;
     public ICommand TreeViewOnDemandCommand
     {
         get{ return treeViewOnDemandCommand; }
         set{ treeViewOnDemandCommand = value; }
     }

     public MusicInfoRepository()
     {
         ………………..
         TreeViewOnDemandCommand = new OnDemandCommand(ExecuteOnDemandLoading, CanExecuteOnDemandLoading);
     }

    private bool CanExecuteOnDemandLoading(object sender)
        {
            var hasChildNodes = ((sender as TreeViewNode).Content as MusicInfo).HasChildNodes;
            if (hasChildNodes)
                return true;
            else
                return false;
        }

             private void ExecuteOnDemandLoading(object obj)
        {
            var node = obj as TreeViewNode;

            // Skip the repeated population of child items every time the node expands.
            if (node.ChildNodes.Count > 0)
            {
                node.IsExpanded = true;
                return;
            }
            //Animation starts for expander to show progress of load on demand.
            node.ShowExpanderAnimation = true;
            treeViewNodes.Add(node);

            Application.Current.MainWindow.Dispatcher.BeginInvoke(DispatcherPriority.Background,
               new Action(async () =>
               {
                   await Task.Delay(1000);
                   foreach (var item in treeViewNodes)
                   {
                       if (!item.ShowExpanderAnimation)
                           continue;
                       currentNode = item;
                       break;
                   }

                   MusicInfo musicInfo = currentNode.Content as MusicInfo;

                   //Fetching child items to add.
                   var items = GetSubMenu(musicInfo.ID);

                   // Populating child items for the node in on-demand.
                   currentNode.PopulateChildNodes(items);
                   if (items.Count() > 0)
                       //Expand the node after child items are added.
                       currentNode.IsExpanded = true;

                   //Stop the animation after load on demand is executed If animation is not stopped, it remains after execution of load on demand.
                   currentNode.ShowExpanderAnimation = false;
                   treeViewNodes.Remove(currentNode);

               }));
        }
………………
}
Load on demand with built-in busy animation
Load on demand with built-in busy animation

GitHub reference: You can check out the example project in this GitHub location.

Auto fit node height

TreeView allows you to set the height of the node:

You can adjust (autofit) the height of the node based on the content’s measured size to improve readability. You can do this through the QueryNodeSize event and the QueryNodeSizeEventArgs.GetAutoFitNodeHeight method.

Refer to the following code example.

sfTreeView.QueryNodeSize += SfTreeView_QueryNodeSize;

private void SfTreeView_QueryNodeSize(object sender, Syncfusion.UI.Xaml.TreeView.QueryNodeSizeEventArgs e)
{
    if (e.Node.Level == 0)
    {
        //Returns specified item height for items.
        e.Height = 30;
        e.Handled = true;
    }
    else
    {
        // Returns item height based on the content loaded.
        e.Height = e.GetAutoFitNodeHeight();
        e.Handled = true;
    }
}
Auto fit node height in WPF TreeView
Auto fit node height in WPF TreeView

GitHub reference: You can view the example project in this GitHub location.

Drag and drop within TreeView and between controls

TreeView allows you to drag and drop items within the TreeView control by setting the AllowDragging property to true. You can also drag and drop the items between TreeViews or to any other control, such as ListView and DataGrid.

While dropping, you can add the dragged nodes above or below the target item or as a child to a specific node based on the drag indicator position.

Refer to the following code example.

<treeview:SfTreeView
    Name="sfTreeView"
    AllowDragging="True"
    ChildPropertyName="Childs"
    ItemsSource="{Binding Nodes1}" />
Dragging and dropping items within a TreeView
Dragging and dropping items within a TreeView

WPF TreeView has the following events to perform custom operations when dragging items between nodes. Also, you can utilize these events to perform the drag-and-drop actions between TreeView and other controls:

Github examples

The examples for dragging and dropping items between TreeView and other controls are:

Conclusion

Thanks for reading! In this blog, we have learned the top five features available in our Syncfusion WPF TreeView control. It also provides other features, such as editing, selection, a context menu, and tree lines. You can refer to this UG documentation for a complete guide to all the available features in the WPF TreeView control. Try our TreeView demos in this link. Browse through our documentation to learn more about our other WPF controls.

If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

If you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our support forumfeedback portal, or Direct-Trac support system. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top