SfTabView - Vertical Alignment issues with Text and Image Tab Items.

Question

Hi,We are using the SfTabView with TabBarPlacement=Bottom & text/icons.When migrating from Xamarin release to the MAUI release we have noticed that the Icon/Text is vertically positioned at top of the tab bar (up against the tab indicator) instead of being Center aligned - which is different to the Xamarin version where Icon/Text was center aligned vertically.If I make the TabBarHeight larger then we just end up with even more space underneath. Similarly if use the new MAUI ImageTextSpacing property - that will simply adjust the spacing between the Text & Icon not above (and it will all still be aligned to the top of the available space).Please see screenshot below for example (each Text/Icon is vertically aligned to the top of the Tab Bar) :  Is it possible to please fix this so the Text/Icon are center aligned (like the Xamarin version) /or/ can an additional property be added to specify either space above the icon or an alignment property for this? Otherwise - is there something else built in that can control this with existing version (ie. Control Templates or using the HeaderItemTemplate property which currently doesn't seem to do anything)thanksNiall

AhamedAliNishad JahirHussain · Answer

Hi Niall, We have reviewed your query and would like to clarify that there is not an alignment property available to adjust space in the SfTabView. However, you can achieve the desired alignment using the TabBarHeight and ImageTextSpacing properties, demonstrated in the code snippet below. This approach has been successfully tested across all platforms. We have provided a tested sample and video for your reference. Please review the sample provided. If you encounter any issues even after applying TabBarHeight and ImageTextSpacing, kindly share your project that reproduces the issue. This will assist us in investigating the problem thoroughly and offering a prompt solution Code Snippet: Regards, Ahamed Ali Nishad. Attachment: TabMaui_(3)_1ec68011.zip

Niall · Answer

Hi Ahamed,Thank you for your sample. I think you may have misunderstood the issue - please see some more detailed screenshots/description below.The ImageTextSpacing property sets the gap between the Icon and the Text in the TabItem - however it does not set the vertical placement of the combined Image + Text inside the TabItem.The Vertical Placement in this case is Start/Top aligned no matter what the ImageTextSpacing and TabBarHeight properties are set to.  In the Xamarin version, the Vertical placement was set to Center/Middle - which is what we want.In the screenshots below I have set the background color of the SfTabView to Pink (and then placed a label below it with information & page background of White) - so you can see where the TabItems.For example : If I have

ImageTextSpacing set to 8 and TabBarHeight = 70 - it looks OK and it appears the tabitem content is in the middle. However, if I increase the TabBarHeight to be 120 - you can see that the TabItem Text+Image are now aligned to the top of the tab item - not the middle.

If I then increase the ImageTextSpacing to 24 - then you can also see that instead of aligning the Text+Icon properly in the TabItem - it again vertically aligns it to the top right up against the Tab Indicator ​- it doesn't correctly align the combined Text+Icon to the center of the TabBar. Hence - as you can see in my examples above - there is no way to control the placement of the Text+Icon - and because it's vertically aligning the Text+Icon to the Start/Top - it doesn't work/render very well at all. In our legacy Xamarin App - we have a larger TabBarHeight to it to be more easy for end user (~100 height) - and because the Xamarin version aligned vertically to the center it works fine. However if we try to have a TabBarHeight of 100 in our MAUI app it looks very strange and there is all this whitespace below the Text+Icon.It would seem that the Xamarin version defaulted this alignment to Center whereas the MAUI version defaults this alignment to Start/Top. If you can either please make this work the same as the Xamarin version /or/ provide additional property to specify the vertical alignment of the Text+Icon then this would be the best solution.thanksNiall

AhamedAliNishad JahirHussain · Answer

Hi Niall,

After reviewing your
query and verifying the TabBarHeight set as 120
and the ImageTextSpacing as 8, as indicated in the image, and also
confirming TabBarHeight as 120 and ImageTextSpacing as 24 in our sample, we
have not been able to reproduce the issue on our end. We have attached the
modified sample and output images for your reference.

Please review the
attached example and make any necessary adjustments to replicate the problem.
Once done, kindly forward the sample to us, allowing for a more comprehensive
investigation of the issue.

Additionally, could
you please provide details on how you utilize the ImageSource in your project?
Also, confirm the NuGet version of the Syncfusion TabView you are using and
specify the platforms on which you are encountering this issue.

Regards,

Ahamed Ali Nishad.

Attachment: TabMaui_(4)_85bc6b2c.zip