如何为Xamarin Forms App Shell的Tabbar添加顶部边框

要实现该效果，最稳定的方案是通过分平台自定义Shell渲染器完成，以下是可直接复用的实现代码：

1 自定义渲染器实现 #

Android端代码 #

在Android项目中新建自定义Shell渲染器类：

using Android.Content;
using Android.Graphics.Drawables;
using Google.Android.Material.BottomNavigation;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using YourNamespace; // 替换为你项目中AppShell所在的命名空间
using YourNamespace.Droid.Renderers;

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace YourNamespace.Droid.Renderers
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context) { }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new CustomBottomNavViewAppearanceTracker(this, shellItem);
        }
    }

    public class CustomBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
    {
        public CustomBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem) { }

        public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            base.SetAppearance(bottomView, appearance);
            // 添加顶部边框
            var divider = new ShapeDrawable(new Android.Graphics.Drawables.Shapes.RectShape());
            divider.Paint.Color = Android.Graphics.Color.LightGray;
            divider.SetIntrinsicHeight(1); // 边框高度可自定义，单位px
            bottomView.AddItemDecoration(new DividerItemDecoration(divider, DividerItemDecoration.Vertical));
            
            // 添加阴影效果
            bottomView.Elevation = 8f; // 阴影大小可自定义，单位dp
            bottomView.SetOutlineSpotShadowColor(Android.Graphics.Color.Argb(255, 180, 180, 180));
        }
    }
}

iOS端代码 #

在iOS项目中新建自定义Shell渲染器类：

using CoreGraphics;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourNamespace; // 替换为你项目中AppShell所在的命名空间
using YourNamespace.iOS.Renderers;

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace YourNamespace.iOS.Renderers
{
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new CustomShellTabBarAppearanceTracker();
        }
    }

    public class CustomShellTabBarAppearanceTracker : ShellTabBarAppearanceTracker
    {
        public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            base.SetAppearance(controller, appearance);
            var tabBar = controller.TabBar;
            
            // 清除系统默认分割线
            tabBar.ShadowImage = new UIImage();
            tabBar.BackgroundImage = new UIImage();
            
            // 添加自定义顶部边框
            var topBorder = new UIView(new CGRect(0, 0, tabBar.Frame.Width, 1))
            {
                BackgroundColor = UIColor.LightGray,
                AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin
            };
            tabBar.AddSubview(topBorder);
            
            // 添加阴影效果
            tabBar.Layer.ShadowColor = UIColor.Gray.CGColor;
            tabBar.Layer.ShadowOpacity = 0.3f;
            tabBar.Layer.ShadowRadius = 4f;
            tabBar.Layer.ShadowOffset = new CGSize(0, -2f); // 阴影向上偏移
            tabBar.ClipsToBounds = false;
        }
    }
}

2 效果示例 #

3 注意事项 #

• Android端如果阴影不显示，请检查是否为Tabbar设置了透明背景，纯色背景下阴影才能正常渲染
• iOS端如果阴影被裁剪，确认ClipsToBounds属性已设置为false
• 代码中的边框颜色、高度，阴影大小、颜色均可根据设计需求自行调整

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