Adding a button to the title bar Xamarin Forms

Question

Haven't been able to find quite the right answer for this yet. I want to add a button into the navigation / title bar at the top of a Xamarin Forms Navigation Page. Note that I need to know a method that will work on android, I'm not interested in trying to find an iOS only solution here. This button needs to be an image button as I want a way to access a hamburger menu.

Could you please add some more detail about what you've tried already and any code snippets you've used? — Paul Andrew, Sep 08 '16 at 07:31
none of the code snippets I've tried have worked in the slightest, so I really have nothing to show. — Jobalisk, Sep 08 '16 at 18:37

eakgul · Accepted Answer · 2020-07-22T09:33:18.020

82

Use ToolbarItem from YourPage.xaml.cs:

ToolbarItems.Add(new ToolbarItem("Search", "search.png",() =>
{
  //logic code goes here
}));

In Xaml:

<ContentPage.ToolbarItems> 
    <ToolbarItem Icon="search.png" Text="Search" Clicked="Search_Clicked"/>
</ContentPage.ToolbarItems>

Update

Xamarin.Forms introduced TitleView in 3.2.0 that you can customize title of the navigation.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestPage">
    <NavigationPage.TitleView>
        <Button ... />
    </NavigationPage.TitleView>
    ...
</ContentPage>

edited Jul 22 '20 at 09:33

answered Sep 08 '16 at 07:02

eakgul

3,658
21
33

1

How it will look like in xaml? – tytyryty Sep 25 '17 at 10:25
3

@tytyryty: – K232 Nov 26 '17 at 13:26
@Kowalski - I feel like a superb answer. But could u plz tell me, from where the `"Search_Clicked"` event catch ? – Mohan Perera Apr 03 '18 at 05:09
2

at YourPage.xaml.cs `private void Search_Clicked(object sender, EventArgs args){}` – eakgul Apr 03 '18 at 05:37
Can we add AbsoluteLayout instead an icon in the toolbar, so that we can manage more than one thing as an icon? Like, add to cart icon with the badge. – Rohit Sharma Jul 07 '18 at 13:14
@RohitSharma You can now use [`TitleView`](https://www.andrewhoefling.com/Blog/Post/xamarin-forms-title-view-a-powerful-navigation-view) for more complicated title bars – BlueRaja - Danny Pflughoeft Jun 18 '20 at 10:30

Adding a button to the title bar Xamarin Forms

1 Answers1