Item Height Customization in Xamarin TreeView (SfTreeView)

21 Aug 20238 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 40d. This property can be customized at runtime.

XAML
C#
<syncfusion:SfTreeView x:Name="treeView" ItemHeight="40">
SfTreeView treeView = new SfTreeView();
treeView.ItemHeight = 40;

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.
GetActualNodeHeight: This method will return the measured height of the node item based on content loaded in it.

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.

XAML
C#
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">
    <ContentPage.BindingContext>
       <local:FileManagerViewModel x:Name="viewModel"></local:FileManagerViewModel>
    </ContentPage.BindingContext>
    <ContentPage.Content>
       <syncfusion:SfTreeView x:Name="treeView"
                              QueryNodeSize="TreeView_QueryNodeSize"
                              ChildPropertyName="SubFiles"
                              ItemsSource="{Binding ImageNodeInfo}"/>
       </syncfusion:SfTreeView>
    </ContentPage.Content>
</ContentPage>
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 speified item height for items.
            e.Height = 200;
            e.Handled = true;
        }
    }
}

Customize specific item height based on the content size

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.GetActualNodeHeight method.

XAML
C#
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">
    <ContentPage.BindingContext>
       <local:FileManagerViewModel x:Name="viewModel"></local:FileManagerViewModel>
    </ContentPage.BindingContext>
    <ContentPage.Content>
       <syncfusion:SfTreeView x:Name="treeView"
                              QueryNodeSize="TreeView_QueryNodeSize"
                              ChildPropertyName="SubFiles"
                              ItemsSource="{Binding ImageNodeInfo}"/>
       </syncfusion:SfTreeView>
    </ContentPage.Content>
</ContentPage>
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;
        }
    }
}

Autofit item height on dynamic changes

The Treeview supports autofit the item based on dynamic change in item size. It is enabled by setting NodeSizeMode property to NodeSizeMode.Dynamic. The default value is NodeSizeMode.None.

None: The item height does not autofit for dynamic changes.
Dynamic: The item height responds for dynamic changes and the size is recalculated.

XAML
C#
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             xmlns:local="clr-namespace:GettingStarted"
             x:Class="GettingStarted.MainPage">
    <ContentPage.BindingContext>
       <local:FileManagerViewModel x:Name="viewModel"></local:FileManagerViewModel>
    </ContentPage.BindingContext>
    <ContentPage.Content>
       <syncfusion:SfTreeView x:Name="treeView"
                              QueryNodeSize="TreeView_QueryNodeSize"
                              NodeSizeMode="Dynamic"
                              ChildPropertyName="SubFiles"
                              ItemsSource="{Binding ImageNodeInfo}"/>
       </syncfusion:SfTreeView>
    </ContentPage.Content>
</ContentPage>
public class MainPage : ContentPage
{
    public MainPage()
    {
      InitializeComponent();
      this.treeView.QueryNodeSize += TreeView_QueryNodeSize;
      this.treeView.NodeSizeMode = NodeSizeMode.Dynamic; 
    }
    
    private void TreeView_QueryNodeSize(object sender, QueryNodeSizeEventArgs e)
    {
        if (e.Node.Level == 0)
        {
            //Returns speified item height for items.
            e.Height = 200;
            e.Handled = true;
        }
        else
        {
            // Returns item height based on the content loaded.
            e.Height = e.GetActualNodeHeight();
            e.Handled = true;
        }
    }
}

Download the entire source code from GitHub here.

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.