How to add Navigation buttons to the header onMaster Detail Page with Xamarin.Forms

Question

I am trying to create a similar header as in the Google Plus app (iOS) using Xamarin Forms. I already have the left menu (drawer) working as expected, but I am not able to find a way to add more buttons (like the search loop icon) and the tabbed / slide pages right underneath.

I am not interested in the tabbed menu at the bottom, just need the loop icon on the right hand side and the 3 tabbed menus (Recommended, member and yours).

Should I add this to each page that is child of the master detail page or this somehow goes to the Master Detail Page. I cannot figure out how.

Thanks

Joehl Joehl · Accepted Answer · 2016-06-16T07:17:31

For your search-option in the top, you can just add a ToolbarItem to your page:

<ContentPage ...>
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Search" Icon="MySearchIcon.png" Order="Primary" 
                Command="{Binding SearchCommandBinding}" />
        ...
    </ContentPage.ToolbarItems>

    <!-- Here are your UI Elements -->
</ContentPage>

And for your TabbedPage... yeah, that's also your answer. You can use a TabbedPage from Xamarin (instead of a ContentPage, or whatever you use).

Just set the Detail from your MasterDetailPage to a TabbedPage and that's it.

Alternatively, you can just add a Grid and design it like a Tabs. With this, you have the same UI over all platforms (more infos here).

How to add Navigation buttons to the header onMaster Detail Page with Xamarin.Forms

1 Answers