Add Separator Above TabItem (Header)

[xDaijobu]

I want to add a separator (e.g., a line or visual divider) above the TabItem headers. How can I achieve this? Is there a built-in feature to customize the header area, or would I need to use a workaround?

[naveenkumar-sanjeevirayan]

Hi @xDaijobu

Currently, we do not have a built-in feature to customize or add a separator above the TabItem headers in the SfTabView.

However, as a potential workaround, you can manually add a visual separator using a BoxView placed above the SfTabView within a Grid layout. Here's a sample code snippet demonstrating this approach:

Code Snippet :

<Grid RowDefinitions="Auto, *">
    <BoxView Grid.Row="0"
         HeightRequest="1"
         BackgroundColor="Red"
         VerticalOptions="End"
         Margin="0,0,0,1" />
 
    <tabView:SfTabView Grid.Row="1"
                        TabBarBackground="LightBlue">
 
        <tabView:SfTabView.Items>
            <tabView:SfTabItem Header="Call">
                 <tabView:SfTabItem.Content>
                    <Label Text="Call Content" HorizontalOptions="Center" 
                            VerticalOptions="Center" />
                 </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
 
            <tabView:SfTabItem Header="Contacts">
                 <tabView:SfTabItem.Content>
                    <Label Text="Contacts Content" HorizontalOptions="Center"
                            VerticalOptions="Center" />
                 </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
        </tabView:SfTabView.Items>
    </tabView:SfTabView>
</Grid>

This will make the BoxView appear as a separator line just above the tab headers, providing the desired visual effect.

Let us know if you need help customizing this further!

Regards,
Naveenkumar S