We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfTreeView

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

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

Image to use separator line for Xamarin.Forms TreeView.

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile