如何在Xamarin Forms的Page.ToolbarItems间添加分隔线

我明白你之前用图片做分隔线的痛点——不仅要处理点击无响应的问题，视觉效果还不贴合原生体验。其实咱们可以用更优雅的方式来实现，不用依赖图片，直接通过自定义ToolbarItem和平台渲染器来搞定，完全用C#代码就能实现。

方案一：自定义分隔线ToolbarItem + 平台渲染器（推荐） #

这种方法能让分隔线完全贴合各个平台的原生样式，而且点击不会触发任何操作，完美解决你的问题。

第一步：在共享项目中定义分隔线类

先创建一个专门的SeparatorToolbarItem类，继承自原生的ToolbarItem，用来标记这是一个分隔线项：

public class SeparatorToolbarItem : ToolbarItem
{
    // 不需要额外属性，只是作为标记类
}

第二步：给Android平台写渲染器

在Android项目中创建渲染器，把SeparatorToolbarItem转换成原生的Toolbar分隔线：

[assembly: ExportRenderer(typeof(SeparatorToolbarItem), typeof(SeparatorToolbarItemRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class SeparatorToolbarItemRenderer : ToolbarItemRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ToolbarItem> e)
        {
            base.OnElementChanged(e);
            
            if (Control == null || e.NewElement == null) return;
            
            // 获取当前页面的Toolbar
            var toolbar = (Toolbar)Context.GetActivity().FindViewById(Resource.Id.toolbar);
            if (toolbar == null) return;
            
            // 创建原生的分隔线View
            var divider = new View(Context)
            {
                LayoutParameters = new Toolbar.LayoutParams(
                    ViewGroup.LayoutParams.WrapContent, 
                    ViewGroup.LayoutParams.MatchParent)
                {
                    Width = 1, // 分隔线宽度
                    MarginStart = 16, // 左右边距，让分隔线更美观
                    MarginEnd = 16
                },
                BackgroundColor = Color.LightGray.ToAndroid() // 分隔线颜色，可根据需求调整
            };
            
            // 将分隔线添加到Toolbar中
            toolbar.AddView(divider);
            
            // 隐藏原有的ToolbarItem控件，因为我们已经用原生分隔线替代了
            Control.Visibility = ViewStates.Gone;
        }
    }
}

第三步：给iOS平台写渲染器

在iOS项目中同样创建渲染器，生成iOS原生的工具栏分隔线：

[assembly: ExportRenderer(typeof(SeparatorToolbarItem), typeof(SeparatorToolbarItemRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class SeparatorToolbarItemRenderer : ToolbarItemRenderer
    {
        protected override UIBarButtonItem CreateNativeControl()
        {
            // 创建一个显示实线的View作为分隔线
            var lineView = new UIView(new CGRect(0, 0, 1, 44))
            {
                BackgroundColor = UIColor.LightGray // 分隔线颜色
            };
            
            // 将View包装成UIBarButtonItem
            return new UIBarButtonItem(lineView);
        }
    }
}

第四步：在页面中添加分隔线

现在你就可以像添加普通ToolbarItem一样，在需要的位置插入分隔线了：

if(!ToolbarItems.Any()) 
{
    // 添加第一个功能项
    ToolbarItems.Add(new ToolbarItem(
        "刷新", 
        "refresh_icon.png", 
        () => { /* 这里写刷新的逻辑 */ }));
    
    // 添加分隔线
    ToolbarItems.Add(new SeparatorToolbarItem());
    
    // 添加第二个功能项
    ToolbarItems.Add(new ToolbarItem(
        "设置", 
        "settings_icon.png", 
        () => { /* 这里写设置的逻辑 */ }));
}

方案二：快速临时方案（无需渲染器） #

如果你不想写平台渲染器，也可以用一个简单的临时方案：创建一个空命令的ToolbarItem，让它点击无响应，再配合一个细线条图标（或者空文本）。

首先定义一个空命令：

private readonly ICommand _emptyCommand = new Command(() => {});

然后添加分隔线项：

var separator = new ToolbarItem
{
    Text = "", // 空文本
    IconImageSource = "toolbar_separator.png", // 提前准备好的细线条图标
    Command = _emptyCommand, // 点击触发空操作
    Order = ToolbarItemOrder.Primary,
    Priority = 2 // 控制显示位置，放在两个功能项之间
};

ToolbarItems.Add(separator);

这种方法虽然简单，但视觉效果不如原生渲染器方案，而且需要准备适配不同分辨率的图标，所以还是推荐第一种方案。

内容的提问来源于stack exchange，提问作者J. Ha