How to add ToolbarItem on the left side of NavigationBar in Xamarin.Forms on Android?

Question

I need to have a close button (in this particular case) on the left of Navigation Bar, as below. I need it only for popups, so there is no potential issues with other elements/navigations.

There are a few suggestions in Google regarding this, but I saw only iOS examples (and this is not a big thing to handle in iOS custom renderer), but no hints how to handle it (easily) with Android.

Just to be clear, it need it for Xamarin.Forms defining similar to this (or codebehind):

<ContentPage.ToolbarItems>
    <ToolbarItem Text="X" Priority="-1" Command="{Binding GoCancel}"/>
    <ToolbarItem Icon="icon_save" Command="{Binding GoSave}"/>
</ContentPage.ToolbarItems>

Any thoughts?

you can also use a PushModalAsync of the popup page and design the top bar in this page which has close and tick images. Since you mentioned this as a popup, it is better to use PushModalAsync instead of PushAsync — hashimks, Oct 03 '18 at 12:04
@hashimks, I am not using any of "PushModal"-like methods, as I work with MvvmCross framework, which handles everything by itself. So, this is only the XF layout-question. — Agat, Oct 03 '18 at 12:08
I am also talking about same. You can design the top layer of this page with a layout which holds these cross and tick. You can call it simply by PushModalAsync... Another way is to use TitleView. But you will get a navigation effect instead of a popup like animation. — hashimks, Oct 03 '18 at 12:13
You don't get me. With MvvmCross you never call (and must not) anything related to "PushModal"... — Agat, Oct 03 '18 at 12:49

score 12 · Accepted Answer · answered Oct 03 '18 at 09:57

12

With Xamarin Forms 3.2 there is a new way of handling more complex scenario's with the NavigationBar. It's called the TitleView.

With this you can push any View you want unto the NavigationBar.

Example XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageTitleView.TitleViewPage">
    <NavigationPage.TitleView>
        <Slider HeightRequest="44" WidthRequest="300" />
    </NavigationPage.TitleView>
    ...
</ContentPage>

More info about it here https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar and example project can be found here https://developer.xamarin.com/samples/xamarin-forms/Navigation/TitleView/

answered Oct 03 '18 at 09:57

Depechie

6,102
24
46

2

Thanks for the response. And this solution really does allow to add the button easily. However, when adding some view there it removes initial title label. Does that mean, the only way of having the title is implementing a custom one (but it will rather look differently from standard appearance then)? – Agat Oct 03 '18 at 12:47
Also, do you know which way the binding would work then? Standard {Binding ...} doesn't allow to bind to the page BindingContext. – Agat Oct 03 '18 at 12:48
Indeed, adding a custom view has the downside that you will need to 'design' it - so mimic the default look. And not tried the binding context setting myself yet, so no idea why or how that should be done yet... – Depechie Oct 03 '18 at 14:01
If you want a more advanced example take a look at https://github.com/davidortinau/TheLittleThingsPlayground/blob/47b07d2e2e6edb54dab5ebc0d1ed8c2e7234d06d/TheLittleThingsPlayground/Views/ThreeTwoPage.xaml – Depechie Oct 03 '18 at 14:04
Yeah. This is how I was thinking to handle that. But the issue is that in different platforms the Lable size (at least) can be different (not mentioning colors etc.), so the title will look different for this particular view from other "standard" ones. But in general, your answer solves the button adding easy way. – Agat Oct 03 '18 at 14:50

score 0 · Answer 2 · answered May 17 '20 at 19:03

Abit late, but this will work, add this to the page that will be called on the PushModalAsync:

<NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal" VerticalOptions="Center" Margin="20,0,0,0" Spacing="0">
            <ImageButton Source="img.png"
                         HorizontalOptions="Start"
                         Clicked="BackButton_Clicked"
                         HeightRequest="25"
                         WidthRequest="25"/>
        </StackLayout>
</NavigationPage.TitleView>

There is already exactly same answer above poster a year and a half ago! — Agat, May 17 '20 at 22:04

How to add ToolbarItem on the left side of NavigationBar in Xamarin.Forms on Android?

2 Answers2

Linked