Why does my modal page have a back button?

Question

Project and problem explanation

In my case I have a page which instructs the user how to move a certain machine. This page is supposed to be a modal page since the page should not be navigated away from without performing or completely canceling the action.

I have a mainpage with a listview which opens the details page of any of the items contained in the listview on click through the onSelect method:

Navigation.PushAsync(new FooPage(string Name)); /* gets called in the 
onSelect method if selection is not null*/

The model is retrieved within the details page's viewmodel after passing the name to it and then using a model manager injected into the viewmodel with Unity to retrieve it.

-- we now both have a mainpage and detailspage on the stack which of only the detailspage has a backbutton --

On the detailspage we have a button called "Teach" with a x,y,z field next to it after clicking it this method gets called:

private async Task Button_Clicked(object sender, EventArgs e)
        {
            await Navigation.PushModalAsync(new ManualTeachPage());
        }

which then, as it should, creates the page but then for some reason decides to add a back button to it:

Debugging and Research

This behavior is not visible on Android which does not have a visible back button or navigation bar on this page but does have a backbutton on the Details-page as well.

I have used modal pages before but I have never seen this kind of behavior, I have tried using the Navigation property of the Application.Mainpage itself which resulted in the exact same result except for one case.

I thought it might have something to do with me switching out the Application.Mainpage at one point(there is a stack of tutorial pages the user has to go through), seems like calling the pushModalAsync one line AFTER setting the new mainpage then it DOES push the page as a modal page and performs like one (without a back button) but does not do so after this point.

No bug reports on Bugzilla about this either as far as I have seen, neither have I found anything on the internet about this particular problem.

Note that when clicking the back button on the teachPage it returns to the detailspage. When the teachPage gets pushed it does actually get pushed onto the ModalStack.

update 1

Checked again if the modal page which I was talking about was the only modal page on the modal Stack, it was. NavigationPage.SetHasBackButton(this, false); does not seem to work either as suggested by Diego Rafael Souza.

update 2

I thought I would temporarily disable the backbutton by using the onBackButtonPressed within the teachpage until I had found a solution. Turns out this doesn't work for UWP anymore, this method does not get called anymore on this page or any page for that matter. It does work for the Android Hardware button though.

update 3

I tried using:

SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
AppViewBackButtonVisibility.Collapsed;

This does hide the backbutton on UWP but for some reason #if WINDOWS_UWP doesn't work at all. If I do this without the #if the program won't build for Android. No solution yet, not only this but when using this fix the other pages still had the onBackButtonPressed method disabled.

update 4

after updating to the newest version of xamarin forms the OnBackButtonPressed started working again. The backbutton still appears on the page but I now have disabled it.

Recreating the problem

I recreated the problem in this small test project: https://www.dropbox.com/sh/6btsud3uvw503ee/AAAiaGb3TwhMrZMJb2j-rd36a?dl=0

Answer 1

In your function Button_Clicked() in your example, in page DetailPage, where you call your Modal, right after calling PushModalAsync(new TeachPage());, use:

NavigationPage.SetHasNavigationBar(this, false);
NavigationPage.SetHasBackButton(this, false);

My guess is when you tried using the above SetHasBackButton, you were doing it on the Modal itself, but the back button you were actually seeing came from your DetailPage.

Once you add this, the modal pops up, and the back button disappears. If you set a "Back" button on your modal in order to close it, you can easily get your NavBar and BackButton back in your DetailPage by adding in an OnAppearing() Function in your DetailPage code-behind like so:

protected override void OnAppearing()
{
    base.OnAppearing(); // do the usual stuff OnAppearing does
    NavigationPage.SetHasNavigationBar(this, true); //get your navbar back
    NavigationPage.SetHasBackButton(this, true); //get your back button back
}