Customizing TabView Header

[Benjamin]

I would like to achieve this

Current this is what is get

The header should not be hidden like this, when selected to be highlighted with a curved border like the 1st image

[Muneesh Kumar G]

Hi Benjamin, 

 

Greetings from Syncfusion, 

 

We have analyzed your query and based on this created sample to achieve your requirement. Please find the sample link from below location. 

 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewSelection-1291143838.zip  

 

In this sample, we have done the following things, 

 

Added the custom TabHeader using HeaderContent property and added SfBorder control for curved border as like below code snippet.  

<tabView:SfTabItem  > 

                <tabView:SfTabItem.HeaderContent> 

                    <Grid Padding="5"> 

                        <Label BackgroundColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  TextColor="White" Text="SLA Trend line"/> 

                        <border:SfBorder CornerRadius="20" IsVisible="False"> 

                            <Grid BackgroundColor="#AA183D5A"/> 

                        </border:SfBorder> 

                    </Grid> 

                </tabView:SfTabItem.HeaderContent> 

            </tabView:SfTabItem> 

 

Screenshot: 

 

 

Please let us know if you have any concern. 

 

Thanks,  

Muneesh Kumar G  

[Benjamin]

Hi. Thanks for the assistance. following the sample has solved my issue

[Muneesh Kumar G]

Hi Benjamin,  

 

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Regards,   

Muneesh Kumar G  

 

[Kamran Masud]

Hi Benjamin, 

 

Greetings from Syncfusion, 

 

We have analyzed your query and based on this created sample to achieve your requirement. Please find the sample link from below location. 

 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewSelection-1291143838.zip  

 

In this sample, we have done the following things, 

 

Added the custom TabHeader using HeaderContent property and added SfBorder control for curved border as like below code snippet.  

<tabView:SfTabItem  > 

                <tabView:SfTabItem.HeaderContent> 

                    <Grid Padding="5"> 

                        <Label BackgroundColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  TextColor="White" Text="SLA Trend line"/> 

                        <border:SfBorder CornerRadius="20" IsVisible="False"> 

                            <Grid BackgroundColor="#AA183D5A"/> 

                        </border:SfBorder> 

                    </Grid> 

                </tabView:SfTabItem.HeaderContent> 

            </tabView:SfTabItem> 

 

Screenshot: 

 

 

Please let us know if you have any concern. 

 

Thanks,  

Muneesh Kumar G  

In this image, tab items corners are rounded?Is there anyway to round the corners of tab bar?

[Sakthivel Palaniyappan]

Hi Benjamin,

Greetings from Syncfusion.

Yes,  by using tab item HeaderContent we can customize the tab header. In above  sample we have used SfBorder control for round the corners as like below code snippet.

XAML: 

  <tabView:SfTabItem > 

                <tabView:SfTabItem.HeaderContent> 

                    <Grid Padding="5"> 

                        <Label BackgroundColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  TextColor="White" Text="SLA Trend line"/> 

                        <border:SfBorder CornerRadius="20" IsVisible="False"> 

                            <Grid BackgroundColor="#AA183D5A"/> 

                        </border:SfBorder> 

                    </Grid> 

                </tabView:SfTabItem.HeaderContent> 

            </tabView:SfTabItem> 

Please let us know if you have any other queries.

Regards,
Sakthivel P.