Item Height Customization in WinUI TreeView

27 Feb 20252 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 40. This property can be customized at runtime.

<treeView:SfTreeView x:Name="treeView" ItemHeight="50" />
treeView.ItemHeight = 50;

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 TreeView.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.

<treeView:SfTreeView x:Name="treeView"
                       QueryNodeSize="treeView_QueryNodeSize"    />
treeView.QueryNodeSize += treeView_QueryNodeSize;

private void treeView_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;
    }
}