Tab Bar Content Titles Trimmed After Navigating to Custom WebView in .NET MAUI iOS App

Nikhil Kurian 0 Reputation points
2024-09-24T09:32:40.7366667+00:00

I'm encountering an issue in my .NET MAUI application on iOS where the titles in the TabBar's ShellContent are being trimmed or cropped. This issue occurs only after navigating to a page that contains a WebView (referred to as "AppWebView") and then returning to the Homepage. The problem does not appear the first time the app loads or navigates; it only happens after returning from the WebView page to the Homepage.

The issue seems specific to iOS devices, as I haven't observed it on Android. It looks like a rendering or layout problem with the Shell TabBar titles after the navigation back from the WebView. I've implemented custom Shell handlers and appearance customizations, but the issue persists.

Has anyone experienced this behavior on iOS or knows of a potential fix for this title trimming issue?

This is my Shell handler code.

    public class CustomShellHandler : ShellRenderer
    {
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
            => new CustomTabBarAppearanceTracker(Element);
        public class CustomTabBarAppearanceTracker : ShellTabBarAppearanceTracker
        {
            UIView? _tabbarlineview;
            private readonly Shell _shell;
            public CustomTabBarAppearanceTracker(VisualElement shell)
            {
                _shell = (Shell)shell;
            }
            public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
            {
                base.SetAppearance(controller, appearance);
                var selectedIndex = (int)controller.SelectedIndex;
                if (selectedIndex == -1)
                    return;
                // Call the code-behind method of the Shell page
                if (_shell is MainPage shellPage)
                {
                    shellPage.OnTabTapped();
                }
                // Adding line above Menu item
                var itemCount = controller.TabBar.Items.Length;
                var topOffset = 0;
                var lineHeight = 2;
                var itemWidth = (int)controller.TabBar.Frame.Width / itemCount;
                var leftOffset = selectedIndex * itemWidth;
                if (_tabbarlineview is not null)
                {
                    _tabbarlineview.RemoveFromSuperview();
                }
                _tabbarlineview = new UIView(new CGRect(leftOffset, topOffset, itemWidth, lineHeight))
                {
                    BackgroundColor = Colors.Blue.ToPlatform()
                };
                controller.TabBar.AddSubview(_tabbarlineview);
            }
        }
    }


Image

Cropped_Image

This is my MainPage.xaml code.

    <TabBar Title="TabBar">
        <ShellContent
            Title="Dashboard"
            ContentTemplate="{DataTemplate tab:HomePage}"
            Icon="tab_home"
            Route="TabHomePage" />
        <ShellContent
            Title="Manage Cards"
            ContentTemplate="{DataTemplate tab:ManageCardsPage}"
            Icon="tab_manage_cards"
            Route="TabManageCardsPage" />
        <ShellContent
            Title="Transfer Money"
            ContentTemplate="{DataTemplate tab:TransfersPage}"
            Icon="tab_transfers"
            Route="TabTransfersPage" />
        <ShellContent
            Title="Shopping"
            ContentTemplate="{DataTemplate tab:ShoppingPage}"
            Icon="tab_shopping"
            Route="TabShoppingPage" />
        <ShellContent
            Title="History"
            ContentTemplate="{DataTemplate tab:HistoryPage}"
            Icon="tab_History"
            Route="TabHistoryPage" />
    </TabBar>

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,449 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,879 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.