TabView with Icon

[Aprile Salvatore]

Hi, I need to implement a tab view with icon in the tab view item. Attached my implementation but not working very well for all android devices.

In the zip there are : my code, the icon, and some images on several devices

Can you help me to implement a good solution ?

Attachment: TabView_feacae5b.zip

[Sakthivel Palaniyappan]

Hi Aprile Salvatore,

Greetings from Syncfusion.

We have analyzed your query and checked the reported issue at our end, and we could be able to reproduce the issue. We are currently investigating the provided code snippet to resolve it at the sample level, and we will provide more information on or before May 6, 2021. Until then, we value your patience.

Regards,
Sakthivel P.

[Sakthivel Palaniyappan]

Hi Aprile Salvatore,

Thanks for the patience.

On further analyses reported issue is reproduced only when adding CenterButton to SfTabView and we are currently checking the issue and we will update the details on before end of the day Today.

Regards,
Sakthivel P.

[Sakthivel Palaniyappan]

Hi Aprile Salvatore,

Thanks for the patience.

We can resolve the problem by adding Grid to HeaderContent and setting the TabWidth property of SfTabview as shown in the code snippet below.

XAML:

 

<tabView:SfTabView x:Name="tabView" OverflowMode="CenterButton" TabHeight="90" TabWidth="80" SelectedIndex="0" EnableSwiping="False"  > 

 

             

            <tabView:SfTabItem  > 

                <tabView:SfTabItem.HeaderContent> 

                    <Grid> 

                        <agri_control:TabMenuButton SelectedIndex="{Binding SelectedIndex, Source={x:Reference tabView}, Mode=TwoWay}" CurrentIndex="0"   

                                                    ImageSource="menu_map.png"  

                                                    SelectedBackgroundColor="Black" 

                                                    SelectedForegroundColor="White" 

                                                    SelectedImageSource="sel_menu_map.png" 

                                                    LabelText="Mappa"></agri_control:TabMenuButton> 

                    </Grid> 

                </tabView:SfTabItem.HeaderContent> 

Screenshot:


Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewCenterButtonIconSample-2139405083.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P.