TabBar at bottom of MAUI application

Question

I created a new MAUI app in Visual Studio with the default application. I am trying to add a TabBar at the bottom but it is always appearing at the top (see screenshot). All the examples I have seen and documentation I have read indicate it should be at the bottom. What am I doing wrong? This is on Windows.

Here is the AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="letseat.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:letseat"
    >


    <TabBar Route="Home">
        <Tab Icon="dotnet_bot.png" Title="Main">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Icon="dotnet_bot.png" Title="Profile">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}"/>
        </Tab>
        <Tab Icon="dotnet_bot.png" Title="Test">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}"/>
        </Tab>
    </TabBar>
</Shell>

And the result screenshot

Secondclass

This may be a problem with the .Net Maui Windows platform itself, you can consider using a custom tabbar renderer to achieve it. – Casern

I have the same issue, as per April 2024 it is not resolved. – Tuantuareg

Answer 1

You are doing nothing wrong.

It looks like this has been a bug for nearly a year, and, unfortunately, appears to be low priority.

However, it still displays the tabs at the bottom in the Android Emulator (pixel 5 API 33). So as of (4/25/2023), it is still a bug, and not expected to be fixed soon (according to the issue notes from Aug 30, 2022, "it is not going to be worked on for the coming release"

Stane

Answer 2

NB: It utilizes reflection. Please use it at your own risk, as I cannot guarantee it will work if Maui is updated.

I was only able to accomplish that by implementing a custom handler for Windows:

namespace MyNamespace.Windows;

using Microsoft.Maui.Controls.Handlers;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Platform;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System.Reflection;

public class CustomShellHandler : ShellHandler
{
    protected override void ConnectHandler(ShellView platformView)
    {
        platformView.Loaded += ShellViewOnLoaded;
        base.ConnectHandler(platformView);
    }

    protected override void DisconnectHandler(ShellView platformView)
    {
        platformView.Loaded -= ShellViewOnLoaded;
        base.DisconnectHandler(platformView);
    }

    private void ShellViewOnLoaded(object sender, RoutedEventArgs e)
    {
        if (PlatformView.IsLoaded
          && PlatformView.Content is MauiNavigationView navigationView)
        {
            var topNavArea = navigationView.GetType()
.GetProperty("TopNavArea", BindingFlags.NonPublic | BindingFlags.Instance)?
.GetValue(navigationView) as StackPanel;
            
            var grid = topNavArea?.Parent as Grid;

            if (grid != null)
            {
                grid.RowDefinitions
                    .Add(new RowDefinition { Height = GridLength.Auto });
                Grid.SetRow(topNavArea, grid.RowDefinitions.Count - 1);
            }
        }
    }
}

Then use it in your ConfigureMauiHandlers()

#if WINDOWS
     handlers.AddHandler(typeof(Shell), typeof(MyNamespace.Windows.CustomShellHandler));
#endif

Foretooth

Answer 3

After .NET 7 update, this bug has been resolved.

Christianly

Nope... in 2024, .NET 8 ... problem is the same on Desktop version of MAUI... but works fine on Android – Amidst