How to show the separator in Xamarin.Forms TreeView (SfTreeView)

You can add a separator for the whole row by customizing the SfTreeView expander and indentation in Xamarin.Forms.

You can also refer the following article.

https://www.syncfusion.com/kb/11440/how-to-show-the-separator-in-xamarin-forms-treeview-sftreeview

XAML

Set ExpanderWidth and Indentation to zero to disable the default expander and indentation.

<treeview:SfTreeView x:Name="treeView"
                    ItemHeight="40"
                    Indentation="0"
                    ExpanderWidth="0"
                    AutoExpandMode="None"
                    ItemTemplateContextType="Node"
                    ChildPropertyName="SubFiles"
                    ExpandActionTarget="Node"
                    ItemsSource="{Binding ImageNodeInfo}">
...
</treeview:SfTreeView>

Use the converter to display custom expander based on IsExpanded and indentation based on the Level property of TreeViewNode. Use the BoxView with HeightRequest as 1 to display the separator line.

<treeview:SfTreeView.ItemTemplate>
    <DataTemplate>
        <Grid x:Name="grid" Padding="5,5,5,5" RowSpacing="0" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="1"/>
            </Grid.RowDefinitions>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{Binding Level, Converter={StaticResource IndentationConverter}}" />
                    <ColumnDefinition Width="35" />
                    <ColumnDefinition Width="35" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
 
                <Image Grid.Column="1" Source="{Binding IsExpanded,Converter={StaticResource ExpanderIconConverter}}"
                        IsVisible="{Binding HasChildNodes,Converter={StaticResource ExpanderIconVisibilityConverter}}"
                            VerticalOptions="Center" 
                            HorizontalOptions="Center"
                            HeightRequest="15" 
                            WidthRequest="15"/>
                <Image Grid.Column="2" Source="{Binding Content.ImageIcon}" VerticalOptions="Center" HorizontalOptions="Start" HeightRequest="35" WidthRequest="35"/>
                <Grid Grid.Column="3" RowSpacing="1" Padding="1,0,0,0" VerticalOptions="Center">
                    <Label LineBreakMode="NoWrap" Text="{Binding Content.ItemName}" VerticalTextAlignment="Center"/>
                </Grid>
            </Grid>
            <BoxView HeightRequest="1" BackgroundColor="Gray" Grid.Row="1"/>
        </Grid>
    </DataTemplate>
</treeview:SfTreeView.ItemTemplate>

You can also refer to the following article to use the custom expander icon in Xamarin.Forms SfTreeView, CustomExpanderIcon

C#

Converter to return the indentation value based on the node level.

public class IndentationConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (int)value * 40;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Output