Search code examples
c#xaml.net-mauicustom-renderer.net-maui.shell

How to center title text of TabBar Tab?


This is a follow-up question, I am using the custom renderer in Shell Custom Renderer reset color set by TabBarUnselectedColor

In my .Net MAUI app, I use a TabBar in AppShell:

    <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>

The Titles of the Tabs are left aligned. Can they be centred?

Currently, it looks like this:

enter image description here


Solution

  • You can set the alignment of the TextView :

    using TextAlignment = Android.Views.TextAlignment;
    smallTextView.TextAlignment = TextAlignment.Center;