如何在MAUI应用中实现Tabbar背景透明？

步骤1：修改AppShell.XAML的TabBar配置 #

先在XAML中显式设置TabBar的背景色为透明，确保Shell层面的样式生效：

<TabBar BackgroundColor="Transparent">
     <Tab Title="Add New" >
         <ShellContent
         ContentTemplate="{DataTemplate local:AddNewAwake}"
         Route="AddNewAwake" />
     </Tab>
     <Tab Title="Upcoming">
         <ShellContent
         ContentTemplate="{DataTemplate local:UpcomingAwake}"
         Route="UpcomingAwake" />
     </Tab>
</TabBar>

步骤2：调整自定义Handler的背景设置 #

修改CustomShellBottomNavViewAppearanceTracker代码，将GradientDrawable的颜色设为透明，同时清除BottomNavigationView的原生默认背景：

internal class CustomShellBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem)
    : ShellBottomNavViewAppearanceTracker(shellContext, shellItem)
{
    private readonly IShellContext _shellContext = shellContext;

    public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        base.SetAppearance(bottomView, appearance);
        
        if (Shell.GetTabBarIsVisible(_shellContext.Shell.CurrentPage))
        {
            var backgroundDrawable = new GradientDrawable();
            backgroundDrawable.SetShape(ShapeType.Rectangle);
            backgroundDrawable.SetCornerRadius(30);
            // 设置为完全透明
            backgroundDrawable.SetColor(Android.Graphics.Color.Transparent);

            bottomView.SetBackground(backgroundDrawable);
            // 移除原生控件的默认背景
            bottomView.SetBackgroundColor(Android.Graphics.Color.Transparent);

            var layoutParams = bottomView.LayoutParameters;
            if (layoutParams is ViewGroup.MarginLayoutParams marginLayoutParams)
            {
                const int margin = 30;
                marginLayoutParams.BottomMargin = margin;
                marginLayoutParams.LeftMargin = margin;
                marginLayoutParams.RightMargin = margin;
                bottomView.LayoutParameters = layoutParams;
            }
        }
    }
}

关键说明 #

• 原代码中appearance.EffectiveTabBarBackgroundColor.ToPlatform()会使用默认的白色背景，直接替换为Android.Graphics.Color.Transparent即可实现透明效果。
• 额外调用bottomView.SetBackgroundColor(Android.Graphics.Color.Transparent)是为了清除BottomNavigationView原生控件自带的默认背景，避免出现残留的白色区域。

内容的提问来源于stack exchange，提问作者Subin