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

Customizing TabView Header

I would like to achieve this
Expected Tab


Current this is what is get
current

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

5 Replies

MK Muneesh Kumar G Syncfusion Team September 3, 2019 09:26 AM UTC

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. 
 
 
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  



BE Benjamin September 3, 2019 10:38 AM UTC

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


MK Muneesh Kumar G Syncfusion Team September 3, 2019 01:47 PM UTC

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  
 



KM Kamran Masud replied to Muneesh Kumar G September 4, 2020 07:51 PM UTC

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. 
 
 
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?



SP Sakthivel Palaniyappan Syncfusion Team September 7, 2020 10:24 AM UTC

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.
 


Loader.
Live Chat Icon For mobile
Up arrow icon