Scrolling in .NET MAUI TreeView (SfTreeView)

14 Jul 20267 minutes to read

The SfTreeView provides various options to achieve programmatic scrolling. The following sections detail each option.

Bring into view

The TreeView allows programmatic scrolling based on the data model and TreeViewNode using the BringIntoView method.

Method signature

The following table summarizes the parameters of the BringIntoView method:

Parameter Type Description Default value
data (or node) object / TreeViewNode The data object or TreeViewNode to bring into view. —
disableAnimation bool Disables the scrolling animation when set to true. false
canExpand bool Expands the collapsed node when set to true. false
scrollToPosition ScrollToPosition Specifies the position of the item after scrolling. Start

If the specified data object or TreeViewNode is not found in the TreeView (for example, it is within a collapsed parent and canExpand is false), no scrolling occurs.

Bring a data object into view

The following example scrolls a bound data object into view:

private void BringIntoView_Clicked(object sender, EventArgs e)
{
    var count = viewModel.ImageNodeInfo.Count;
    var data = viewModel.ImageNodeInfo[count-1];
    treeView.BringIntoView(data);
}

Bring a TreeViewNode into view

The following example scrolls a TreeViewNode into view by passing the node directly:

private void BringNodeIntoView_Clicked(object sender, EventArgs e)
{
    var node = treeView.Nodes[0].Nodes[1];
    treeView.BringIntoView(node);
}

Download the entire source code from GitHub here.

Optional parameters

The BringIntoView method comprises optional parameters to decide on the way in which the child item should come into view. The following subsections detail each parameter.

Enable or disable scrolling animation

The disableAnimation parameter in the BringIntoView method determines whether the scrolling animation should be enabled or disabled when the child item comes into view. By default, scrolling is animated.

  • If the parameter value is true, scrolling animation will be disabled.
  • If the parameter value is false, scrolling animation will be enabled.
private void BringIntoView_Clicked(object sender, EventArgs e)
{
    var count = viewModel.ImageNodeInfo.Count;
    var data = viewModel.ImageNodeInfo[count-1];
    // Passing true disables the scrolling animation.
    treeView.BringIntoView(data, true);
}

The same GitHub sample covers the optional-parameter variants of BringIntoView and is available here.

Scroll to the collapsed child item

The canExpand parameter in the BringIntoView method determines whether to expand and show the collapsed node when an item passed to the BringIntoView method is in a collapsed state. By default, the value of this parameter is false.

  • If the parameter value is true, the TreeView expands the collapsed node and scrolls to the specified item.

  • If the parameter value is false, the TreeView does not expand the collapsed node and only scrolls to items that are not in a collapsed state.

private void BringIntoView_Clicked(object sender, EventArgs e)
{
    var count = viewModel.ImageNodeInfo.Count;
    var data = viewModel.ImageNodeInfo[count-1];
    treeView.BringIntoView(data, false, true);
}

Scroll the item into a specified position

The scrollToPosition parameter in the BringIntoView method allows positioning the scrolled item within the view. The scrolled item can take any of the four positions explained below. The default position is Start.

  • Start: Scroll to make the node positioned at the start of the view.

  • MakeVisible: Scroll to make a specified node visible in the view. If the specified node is already in view, scrolling will not occur.

  • Center: Scroll to make the node positioned at the center of the view.

  • End: Scroll to make the node positioned at the end of the view.

private void BringIntoView_Clicked(object sender, EventArgs e)
{
    var count = viewModel.ImageNodeInfo.Count;
    var data = viewModel.ImageNodeInfo[count-1];
    // Scrolls to the data item to make it visible in the view.
    treeView.BringIntoView(data, false, false, ScrollToPosition.MakeVisible);
}

Horizontal scrolling

The TreeView allows you to enable horizontal scrolling based on the content by setting the EnableHorizontalScrolling property to True. By default, this property is set to False. Horizontal scrolling engages when the content width exceeds the visible viewport width.

<syncfusion:SfTreeView x:Name="treeView" 
                       EnableHorizontalScrolling="True" />

using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        SfTreeView treeView = new SfTreeView();
        treeView.EnableHorizontalScrolling = true;
    }
}

Scrollbar visibility

The TreeView allows showing or hiding the scrollbars using the VerticalScrollBarVisibility and HorizontalScrollBarVisibility properties. By default, both are set to Default. The ScrollBarVisibility enum resides in the Microsoft.Maui.Controls namespace and supports the following values:

  • Default — The scrollbar is visible only when scrolling is possible.
  • Always — The scrollbar is always visible.
  • Never — The scrollbar is never visible.
<syncfusion:SfTreeView x:Name="treeView" 
                       VerticalScrollBarVisibility="Always" 
                       HorizontalScrollBarVisibility="Always" />

using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        SfTreeView treeView = new SfTreeView();
        treeView.VerticalScrollBarVisibility = ScrollBarVisibility.Always;
        treeView.HorizontalScrollBarVisibility = ScrollBarVisibility.Always;
    }
}