Scrolling in .NET MAUI TreeView (SfTreeView)

The SfTreeView provides various options to achieve programmatic scrolling. Please walk through the following section in detail to achieve the same.

Bring Into View

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

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

Download the entire source code from GitHub here.

The BringIntoView method comprises other optional parameters to decide on the way in which the child item should come into view.

Scroll to the child item with animation

The second optional parameter, disableAnimation, in the BringIntoView method determines whether the scrolling animation should be enabled or disabled when the child item comes into view. By default, the scrolling will be 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];
    // Here, the second optional parameter has been passed as true; hence, it will disable the animation.
    TreeView.BringIntoView(data, true);
}

Scroll to the collapsed child item

The third optional parameter canExpand in the BringIntoView method, determines whether we need to expand and show the collapsed node when an item is passed for the BringIntoView method, which is in a collapsed state. By default, the value of this parameter will be false.

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

  • If the parameter value is false, TreeView does not expand the collapsed node and only scroll for item which is not in 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);
}

NOTE

We need to set the NodePopulationMode API value as a TreeNodePopulationMode.Instant for scrolling the collapsed item in addition to the additional parameter passed to the BringIntoView method.

Scroll the item into specified position

The fourth optional parameter scrollToPosition in the BringIntoView method allows the positioning of the scrolled item in the view. The scrolled item can take either of the four positions as explained in the following. 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);
}

Scrollbar Visibility

The TreeView provides an option to enable or disable the Scrollbar visibility by using the ScrollBarVisibility property. By default, the value will be Default.

<syncfusion:SfTreeView x:Name="treeView" ScrollBarVisibility="Always" />
SfTreeView treeView = new SfTreeView();
treeView.ScrollBarVisibility = ScrollBarVisibility.Always;

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.

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