Is it possible to have a Custom Tool Bar in Detail Page of a Master Detail Page in Xamarin Forms ? Where the Detail Page is of Tabbed Page type

1
votes

I'm working on a Xamarin Forms App.I have a Master Detail Page and my Detail Page is of type Tabbed Page which has some views in that. Is it possible to have Custom tool Bar on the Top of Detail Page. I'm able to hide the existing Tool Bar, but the Tab Page is not allowing me to create any Content above it.

1
xamarinxamarin.formsxamarin.android
Could you elaborate a bit more. Which kind of content do want to display instead of the default navigation bar? – EvZ
This is confusing. So, you have a masterDetail Page and one of the Detail pages is a tabbed page.This is fine and doable. What do you mean by create content above the Tabbed page? you can always use pushModelAsync if you want a page over all pages – Ali123
I don't think this is actually possible, a workaround: create two views one on top of each other. Put your 'custom' toolbar in the top view, then add the tabbed page in the bottom view. – Muhammad Khan
@EvZ: Actually i need a Custom Tool Bar to show some animated gif's, which i think is not possible in Default toolBar – Raunak
@MuhammadKhan: Sure will try that and update, that's the only possible workaround i guess. – Raunak

1 Answers

0
votes

I did some research about custom toolbars, and apparently its possible to implement a view and customise it.

This answer shows how it can be done in iOS, but does not show how to render it in android.

When dealing with the navigation bar in Xamarin Forms, is pretty limited what we can do related to customization. So when this is needed there are generally two approaches people follow:

  1. Hide the Xamarin Forms navigation bar and implementing a custom one using any forms layout. The problem with this approach might be
    handling the glitches caused by navigation transitions especially on Android when using the forms navigation bar on some pages and in
    other's not.

  2. Implement customization on each platform by using custom renderers.

This blog walks through implementing customization using custom renderers. For the full code, and extended example of a custom render for the navigation bar, look at CrossGeeks sample. The advantage of using a custom renderer that inherits from the Navigation Page is that you won't lose features like that native back button and the animation of the master-detail page.

Some screenshots of their examples below:

img1 img2