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?

Nyasaland

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 – Albina

@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. – Nyasaland

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. – Albina

You don't get me. With MvvmCross you never call (and must not) anything related to "PushModal"... – Nyasaland

Answer 1

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/

Hedgepeth

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)? – Nyasaland

Also, do you know which way the binding would work then? Standard {Binding ...} doesn't allow to bind to the page BindingContext. – Nyasaland

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... – Hedgepeth

If you want a more advanced example take a look at github.com/davidortinau/TheLittleThingsPlayground/blob/… – Hedgepeth

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. – Nyasaland

Answer 2

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>

Ticktack

There is already exactly same answer above poster a year and a half ago! – Nyasaland