Item Height Customization in .NET MAUI TreeView (SfTreeView)

14 Jul 20268 minutes to read

The TreeView offers several options for customizing the height of items. The following sections describe each option.

Customize item height

The TreeView allows to customize the item height by setting the ItemHeight property. The default value is 48d. You can also customize this property at runtime.

<ContentPage>
    <syncfusion:SfTreeView x:Name="treeView"
                           ItemHeight="40"/>
</ContentPage>
using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    SfTreeView treeView;
    public MainPage()
    {
        InitializeComponent();
        treeView = new SfTreeView();
        treeView.ItemHeight = 40;
        this.Content = treeView;
    }
}

Customize item height using the QueryNodeSize event

The TreeView allows to customize the height of items using the QueryNodeSize event. This event fires whenever an item comes into view and provides the QueryNodeSizeEventArgs.

The SfTreeView.QueryNodeSize event provides the following arguments:

  • Node : Contains the TreeViewNode and its associated data
  • Height : Contains the default item height of the queried item, which you can set to the desired size
  • Handled : Decides whether the specified or measured height is applied to the item. The default value is false. The decided height is applied only when you set this property to true
  • GetActualNodeHeight : Returns the measured height of the node item based on its loaded content

Customize specific item height using custom value

The TreeView allows to customize the height of a specific item by setting a custom value to the Height argument in QueryNodeSizeEventArgs.

<ContentPage>
    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <syncfusion:SfTreeView x:Name="treeView"
                               QueryNodeSize="TreeView_QueryNodeSize"
                               ChildPropertyName="SubFiles"
                               ItemsSource="{Binding ImageNodeInfo}"/>
    </ContentPage.Content>
</ContentPage>
using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.treeView.QueryNodeSize += TreeView_QueryNodeSize;
    }

    private void TreeView_QueryNodeSize(object sender, QueryNodeSizeEventArgs e)
    {
        if (e.Node.Level == 0)
        {
            //Returns the specified item height for the items.
            e.Height = 200;
            e.Handled = true;
        }
    }
}

Customize specific item height based on the content size

The TreeView allows to adjust the height of items based on the measured size of their content by setting the Height argument with the value returned from the QueryNodeSizeEventArgs.GetActualNodeHeight method.

<ContentPage>
    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <syncfusion:SfTreeView x:Name="treeView"
                               QueryNodeSize="TreeView_QueryNodeSize"
                               ChildPropertyName="SubFiles"
                               ItemsSource="{Binding ImageNodeInfo}"/>
    </ContentPage.Content>
</ContentPage>
using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.treeView.QueryNodeSize += TreeView_QueryNodeSize;
    }

    private void TreeView_QueryNodeSize(object sender, QueryNodeSizeEventArgs e)
    {
        if (e.Node.Level != 0)
        {
            // Returns item height based on the content loaded.
            e.Height = e.GetActualNodeHeight();
            e.Handled = true;
        }
    }
}

Download the entire source code from GitHub here.

Syncfusion .NET MAUI TreeView Item Height Customization

Autofit the node height to content

The TreeView allows dynamically adjust the node height based on the content loaded in the ItemTemplate by setting the NodeSizeMode property to Dynamic. The default value is None.

The NodeSizeMode property supports the following values:

  • Dynamic: Automatically adjusts the node height to fit its content, and resizes the node if the content size changes at runtime
  • None: Uses ItemHeight to layout the nodes
<ContentPage>
    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <syncfusion:SfTreeView x:Name="treeView"
                               ChildPropertyName="SubFiles"
                               ItemsSource="{Binding ImageNodeInfo}"
                               NodeSizeMode="Dynamic"/>
    </ContentPage.Content>
</ContentPage>
using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    SfTreeView treeView;
    public MainPage()
    {
        InitializeComponent();
        treeView = new SfTreeView();
        FileManagerViewModel viewModel = new FileManagerViewModel();
        treeView.ChildPropertyName = "SubFiles";
        treeView.ItemsSource = viewModel.ImageNodeInfo;
        treeView.NodeSizeMode = NodeSizeMode.Dynamic;
        this.Content = treeView;
    }
}

Syncfusion .NET MAUI TreeView Item Height Customization

Limitations

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