How to integrate SfEffectView in a SfTabView Header Template

[Frederik Eichner]

Hi SyncFusion Team,

i am using the SfTabView with my own HeaderItemTemplate. Now i want to add the SfEffectView to the header template to have a visual ripple effect when i click on the header item and switch tabs.

Is there some good way to make this possible?

With best regards

Frederik Eichner

[Swetha Vasanthakumar]

Hi Frederik,

We have validated your reported query "Integrate SfEffectView in a SfTabView Header Template", and we have achieved your requirement as like the below code snippet.

XAML :

  …….

             xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"

             xmlns:effectsView="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core">

  ……..

<tabView:SfTabView.HeaderItemTemplate>

           <DataTemplate >

                <effectsView:SfEffectsView>

                    <effectsView:SfEffectsView.Content>

                       <Grid Margin="0,0,14,0">

                           <Label Margin ="14,0,0,0" 

                                   VerticalTextAlignment="Center"

                                   VerticalOptions="Center"

                                   HorizontalOptions="Center" 

                                   HorizontalTextAlignment="Center" 

                                   Text="{Binding Name}"></Label>

                       </Grid>

                    </effectsView:SfEffectsView.Content>

                </effectsView:SfEffectsView>

           </DataTemplate>

        </tabView:SfTabView.HeaderItemTemplate>

We have attached a sample for your reference. Could you please check and let us know if you require any further details or assistance.

Regards,

Swetha V

Attachment: SfTabView_8f353640.zip

[Frederik Eichner]

Thank you for the quick feedback!

Following up on my first question. I need to switch between different tab view header layout styles.

I tried this by using a DataTemplateSelector for the SfTabView.HeaderItemTemplate property but when i do this i get an exception:

System.NotSupportedException
Message=You are using an instance of DataTemplateSelector to set the BindableLayout.ItemTemplate property. Use BindableLayout.ItemTemplateSelector property instead to set an item template selector

I used a similar approach for the SfCombox and it worked there.

Any thoughts?

With best regards

Frederik Eichner

[Brundha Velusamy]

Hi Frederik,

We have validated your query and currently we don't have support for DatatemplateSelector support in SfTabView. We have created a new feature request for this "Provide a DatatemplateSelector support in SfTabview control ". Please find the below link for tracking the status of the feature implementation.

Feedback link: https://www.syncfusion.com/feedback/44908/provide-a-datatemplateselector-support-in-sftabview-control

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we have committed to already planned work. So, this feature will be available in any of our upcoming releases.

If you have any more specifications/suggestions for the feature request, you can add them as a comment in the portal. We will share the release details in the feedback itself.

Regards,

Brundha V.

[Frederik Eichner]

Thank you for creating the feature request.

I have also another question regarding the TabView. Is it possible to customize the shape of the Indicator, e.g. setting the width or border shape?

With best regards

Frederik Eichner

[Brundha Velusamy]

Hi Frederik,

Could you please share an image or video illustrating the customization of the selection indicator shape based on your requirements? This will be helpful for us to assist you further and provide  possible solution at earliest.

Regards,

Brundha V.

[Frederik Eichner]

Hi Brundha,

of course. Basically we want to set a shorter width and rounded corners like this:

 

With best regards

Frederik Eichner

[Brundha Velusamy]

Hi Frederik,

 

Query: Is it possible to customize the shape of the Indicator, e.g. setting the width or border shape?

 

We have validated your query and currently we don't have support for customizing the shape and width of the SelectionIndicator in SfTabView. We have created a new feature request for this "Provide support to customize the shape and width of SelectionIndicator in SfTabView". Please find the below link for tracking the status of the feature implementation.

 

Feedback link:  https://www.syncfusion.com/feedback/44974/provide-support-to-customize-the-shape-and-width-of-selectionindicator-in

 

Thank you for requesting this feature and helping us define it. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts.

 

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we have committed to already planned work. So, this feature will be available in any of our upcoming releases.

 

If you have any more specifications/suggestions for the feature request, you can add them as a comment on the portal. We will share the release details in the feedback itself.

 

Regards,

Brundha V.