How to add a line separator between Page.Toolbaritems in Xamarin Forms

Question

I'm adding toolbar item to the Page.ToolbarItems list, but I would like to add a line separator between certain toolbar item. I could add a new toolbar item with an image of a line, but I would need to prevent any Action when the line is pressed and it won't allow me to use null. It would also look less than ideal.

Note that that each ToolbarItem is added through the C# code, not through Xaml.

Here is some pseudo code as an example of what I have now:

if(!ToolbarItems.Any())
{
    ToolbarItems.Add(new ToolbarItem("Page 1", null, NavigateToPage1(), ToolbarItemOrder.Secondary, 0);
    ToolbarItems.Add(new ToolbarItem("Page 2", null, NavigateToPage2(), ToolbarItemOrder.Secondary, 0);
    // <Insert Separator Here>
    if(boolVal) {
        ToolbarItems.Add(new ToolbarItem("Page 3", null, NavigateToPage3(), ToolbarItemOrder.Secondary, 0); 
    }
    ToolbarItems.Add(new ToolbarItem("Page 4", null, NavigateToPage4(), ToolbarItemOrder.Secondary, 0);
    ToolbarItems.Add(new ToolbarItem("Page 5", null, NavigateToPage5(), ToolbarItemOrder.Secondary, 0);
    // <Insert Separator Here>
    ToolbarItems.Add(new ToolbarItem("Page 6", null, NavigateToPage6(), ToolbarItemOrder.Secondary, 0);
}

will [setting `InputTransparent` to `true`](https://developer.xamarin.com/api/property/Xamarin.Forms.VisualElement.InputTransparent/) or [setting `IsEnabled` to `false`](https://developer.xamarin.com/api/property/Xamarin.Forms.VisualElement.IsEnabled/) help? — Patrick, Apr 23 '18 at 18:14
Where would I be setting those values? It doesn't seem like the `ToolbarItem` is able to set those. — J. Ha, Apr 23 '18 at 20:00
Not sure. Each `VisualElement` in Xamarin.Forms has those 2 properties. Maybe it's a good idea to edit your post and add your code there. — Patrick, Apr 23 '18 at 20:02
how about adding a `BoxView` and set the `WidthRequest` of the `BoxView` to 1 so it looks like a line? — Patrick, Apr 23 '18 at 20:20
I've looked at [BoxView Example](https://stackoverflow.com/questions/24102110/separators-in-xamarin-forms?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) for help, but ToolbarItems.Add() doesn't accept a BoxView as an argument, which makes sense. But since I have to add ToolbarItems in C#, I'm not sure how to work around that. — J. Ha, Apr 23 '18 at 21:24
I know the solution with a separator as a clickable toolbaritem isn't the ideal one, I'm totally with you. But what you could do is instead of setting the `Action` of the `ToolbarItem` to `null` just introduce a lambda like `() => {}` so your separator would look like `ToolbarItems.Add(new ToolbarItem("___", null, () => { }, ToolbarItemOrder.Secondary, 0));` otherwise you probably have to implement a custom renderer for your individual ToolbarItem — Johannes, May 04 '18 at 08:23
Are you adverse to using dependency injection to adjust the action bars in their respective native projects? — JoeTomks, May 04 '18 at 08:26
@Johannes, although this would indeed add a separating line, I'm unsure on the ability to style it so that it's not taking up a whole block of space causing off-putting spacing. Digitalsa1nt yes, because the Toolbar Functionality should be abstracted out from each page. — J. Ha, May 04 '18 at 15:04

score 1 · Answer 1 · answered Nov 26 '19 at 14:36

Strictly speaking, you can't.

ToolbarItems map to specific controls in iOS and Android which don't provide the capability that you want to have, so even if you go into writing the custom renderers it is not possible because native platforms don't allow this.

Speaking a bit more widely if you use TitleView then you can put into the header whatever you want and then you can make it look like what you wanted but that isn't a precise answer to your question as you wouldn't use ToolbarItems in that case.

How to add a line separator between Page.Toolbaritems in Xamarin Forms

1 Answers1