TabBar's bar title is not centered

Question

In our .Net MAUI iOS app, we use Shell TabBar:

    <TabBar>  
        <Tab Title="Home" Icon="{StaticResource IconHome}">  
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />  
        </Tab>  
        <Tab Title="Coverage&#10;Calculator" Icon="{StaticResource IconCalculator}" >  
            <ShellContent ContentTemplate="{DataTemplate calculator:CoverageCalculatorPage}" />  
        </Tab>  
        <Tab Title="Distributor&#10;Locator" Icon="{StaticResource IconLocator}">  
            <ShellContent ContentTemplate="{DataTemplate locator:DistributorsLocatorPage}" />  
        </Tab>  
        <Tab Title="Scan&#10;QR Code" Icon="{StaticResource IconQrScanner}">  
            <ShellContent ContentTemplate="{DataTemplate qrScanner:QrScannerPage}" />  
        </Tab>          
        <Tab Title="More" Icon="{StaticResource IconMore}">  
            <ShellContent ContentTemplate="{DataTemplate more:MoreFeaturesPage}" />  
        </Tab>  
    </TabBar>  

We need Titles to be centered horizontally. So I created a custom renderer like this:

    internal class MyShellRenderer : ShellRenderer  
    {  
        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)  
        {  
            var renderer = base.CreateShellItemRenderer(item);  
            if (renderer != null)  
            {  
                if (renderer is ShellItemRenderer shellItem)  
                {  
                    var items = shellItem.TabBar.Items;  
                    for (int i = 0; i < items.Length; i++)  
                    {  
                        if (items[i] == null) continue;  
                        else  
                        {  
                            UITabBarItem item_temp = items[i];  
                            UIView view = item_temp.ValueForKey(new Foundation.NSString("view")) as UIView;  
                            UILabel label = view.Subviews[1] as UILabel;  
  
                            label.Lines = 2;  
                            label.LineBreakMode = UILineBreakMode.WordWrap;  
                            label.TextAlignment = UITextAlignment.Center;  
                        }  
                    }  
                }  
            }  
            return renderer;  
        }  
    }  
  

But the titles of the tabs still are not centered. When I did a similar renderer for Android, it did work.
What am I missing?

Answer 1

Hello,

If you want to custom the TabBar's bar title, you need to override the CreateTabBarAppearanceTracker method. Then set the title to the center like the following code.

   [assembly: ExportRenderer(typeof(Shell), typeof(MyCustomrender))]  
   namespace App1.iOS  
   {  
   internal class MyCustomrender: ShellRenderer  
       {  
           protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()  
           {  
               return new MyCreateTabBarAppearanceTracker();  
           }  
       }  
      internal class MyCreateTabBarAppearanceTracker : IShellTabBarAppearanceTracker  
       {  
           public void Dispose()  
           {  
               
           }  
          public void ResetAppearance(UITabBarController controller)  
           {  
                 
           }  
          public void SetAppearance(UITabBarController controller, ShellAppearance appearance)  
           {           
              var items = controller.TabBar.Items;  
               for (int i = 0; i < items.Length; i++)  
               {  
                   if (items[i] == null) continue;  
                   else  
                   {  
                       UITabBarItem item_temp = items[i];  
                       UIView view = item_temp.ValueForKey(new Foundation.NSString("view")) as UIView;  
                       UILabel label = view.Subviews[1] as UILabel;  
                      label.Lines = 2;  
                       label.LineBreakMode = UILineBreakMode.WordWrap;  
                       label.TextAlignment = UITextAlignment.Center;  
                   }  
               }           
           }  
          public void UpdateLayout(UITabBarController controller)  
           {  
     
          }  
       }  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.