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. 

[ANSON]

Hi , just want clarify ..Header content seem no support in .net maui , please advise

[Kamalesh Periyasamy]

Hi ANSON,

 

We recommend utilizing the HeaderItemTemplate property in .NET MAUI's SfTabView to achieve functionality similar to the Xamarin SfTabView's HeaderContent property. We have prepared a sample demonstrating this approach and have attached it for your reference.

 

Please review the sample provided and let us know if it fulfills your requirements. If you have any additional questions or concerns, don't hesitate to reach out.

 

For additional guidance, please refer to the help documentation for the SfTabView HeaderItemTemplate property: HeaderItemTemplate

 

Regards,

Kamalesh P

Attachment: TabViewMauiSample_e3880219.zip