Category / Section
How to show the separator in Xamarin.Forms TreeView (SfTreeView)
3 mins read
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,
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
