Item Height Customization in WinUI TreeView

8 Jul 20262 minutes to read

The TreeView provides various options to customize the height of items. Please walk through the sections below to learn more.

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 you to customize the height of the items using the QueryNodeSize event. This event is raised whenever an item comes into view and is 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;
    }
}