Item Height Customization in WPF TreeView (SfTreeView)

29 Jul 20213 minutes to read

The TreeView provides various options to customize the height of items. To achieve this customization, please walkthrough the below sections:

Customize Item Height

The TreeView allows customizing the height of items by setting the ItemHeight property. The default value of this property is 24. This property can be customized at runtime.

<syncfusion:SfTreeView x:Name="sfTreeView" ItemHeight="30" />
sfTreeView.ItemHeight = 30;

Customize Item height using QueryNodeSize event

The TreeView allows customizing the height of the items using QueryNodeSize event. This event is raised whenever the item comes into view and triggered with QueryNodeSizeEventArgs.

The SfTreeView.QueryNodeSize event provides the following arguments:

  • Node: This argument contains the TreeViewNode and data associated with it.
  • Height: This argument contains the default item height of the queried item and can be set with desired size.
  • Handled: Decides whether the specified or measured height can be set to the item or not. The default value is false. When this property is not set, the decided height will not set to the item.

Customize specific item height using custom value

The TreeView allows customizing the height of the specific item by setting the custom value directly to the Height argument which is available in QueryNodeSizeEventArgs.

<syncfusion:SfTreeView
    x:Name="sfTreeView"
    Margin="10"
    QueryNodeSize="SfTreeView_QueryNodeSize"    
    ExpandActionTrigger="Node"
    ItemsSource="{Binding Menu}" />
sfTreeView.QueryNodeSize += SfTreeView_QueryNodeSize;

private void SfTreeView_QueryNodeSize(object sender, Syncfusion.UI.Xaml.TreeView.QueryNodeSizeEventArgs e)
{
    if (e.Node.Level == 0)
    {
        //Returns speified item height for items.
        e.Height = 50;
        e.Handled = true;
    }
}

Autofit item height based on content

The TreeView allows adjusting height of items based on the content measured size while loaded by setting the Height argument with value returned from QueryNodeSizeEventArgs.GetAutoFitNodeHeight method.

<syncfusion:SfTreeView
    x:Name="sfTreeView"
    Margin="10"
    QueryNodeSize="SfTreeView_QueryNodeSize"    
    ExpandActionTrigger="Node"
    ItemsSource="{Binding Menu}" />
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;
    }
}

NOTE

View sample in GitHub.

WPF TreeView with AutoFit Items

Limitations

  • Define the size of the image when loading image in the SfTreeView.ItemTemplate. Because, it does not return actual measured size when measuring before item layout.

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.