I am having this little drawer menu in my master detail page. I have a list with clickable options there and some navigate you to another screen:
Application.Current.MainPage = new NavigationPage(new Screen_Profile("", true));
But this results in the loss of the navigation arrow to go back. If you click back on android, the app just closes afterwards.
How can I navigate away from the master detail page and still have the arrow to just come back to the main page?
Thank you!
you only want to update the Detail page, your the entire MainPage
var mdPage = (MasterDetailPage)Application.Current.MainPage;
mdPage.Detail = new NavigationPage(new Screen_Profile("", true));
this will leave the Master portion of the page with it's menu active as you Navigate
Related
I am trying to create a Master Detail page with inner Navigation. So if you go to DetailPage 1, for example, you will see a list of size n. Ideally, when you press a list item, you get taken to a new page. However, on this new page, I have no way to go back to the Master Detail Page. Pressing the Back button on my Android phone minimizes the app, and the Master Detail view is gone.
I searched around a while, but couldn't find any posts resolving this specific issue. I've tried creating a new DetailPage, and having the user navigated there. That worked, but it looks ugly and user unfriendly.
My code follows this Microsoft tutorial: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/master-detail-page
If needed, I can post some examples but I don't think that would be necessary.
Expected result, navigation shown from top to bottom:
Master-Detail Page
Detail (NavigationPage)
NavigationPage.PushAsync(newPage)
just wrap your detailpage in navigation page and add a toolbaritem and your problem is solved!
like this :
var detailpage = new NavigationPage(new YourDetailPageName());
What is the difference between these two Navigation paradigms in Xamarin.Forms?
await Navigation.PushModalAsync(new Dashboard());
await Navigation.PushModalAsync(new NavigationPage(new Dashboard()));
What is a Modal Page
Navigation.PushModalAsync will cause the new Xamarin.Forms.Page to appear Modally, meaning its animation will start from the bottom of the screen, covering the previous current page and it will not contain a back-button.
On iOS, a user will not be able to swipe-left to return to the previous page.
Android users are able to use the hardware back button to dismiss a modal page.
Modal pages are useful when you want the user to make a conscious decision to dismiss the page.
Example
When an iOS user is filling out a form and they swipe left to go back, does it save the form or discard the form? It is unclear to the user. To make the UX more intuitive, you should display the form modally
UI Differences
Using await Navigation.PushModalAsync(new Dashboard()); will display the Dashboard Page Modally, but the new Page will not have a NavigationBar.
Using await Navigation.PushModalAsync(new NavigationPage(new Dashboard())); will also display the Dashboard Page Modally, but the new Page will have a NavigationBar.
Sample App Source Code: https://github.com/brminnick/XamList
Edit
#AlessandroCaliaro and I had a good discussion in the comments of his answer, below:
It's important to note that Xamarin.Forms.INavigation uses two different stacks, ModalStack and NavigationStack. Navigation.PushModalAsync adds a Page to the ModalStack and Navigation.PushAsync adds a Page to the NavigationStack.
And to pop a Page from the ModalStack, you need to use Navigation.PopModalAsync(), whereas you would use Navigation.PopAsync() to remove a Page from the NavigationStack.
The first, push a page in a "modal" way (without navigation bar on the top)
the second... is an error because you try to add a navigationpage to a navigationstack, but I think it is not possible....
In my root view model I call something like
await _navigationService.NavigateAsync(
"/NavigationPage/Page1of2",
useModalNavigation: true
);
Sure enough it loads both view models in a modal navigation just fine. In Page1of2ViewModel I do another
await _navigationService.NavigateAsync(
"Page2of2",
useModalNavigation: false
);
Which view model now should dismiss that modal and how?
Using GoBackAsync() or GoBackAsync(useModalNavigation: true) neither of the 3 view model seem to be able to dismiss the modal flow back to my root view model.
When you place a "/" in you are signifying an absolute navigation. This is resetting the navigation stack completely. It's the same as MainPage = new MyPage(). So there is no modal navigation occurring here. The only way to pop a page off the stack is to use the NavigationService.GoBackAsync, or use the built-in software/hardware buttons to go back.
In my Xamarin Forms iOS application the previous page name is also appearing with the back button in all pages. Is there any way to hide the title of the previous page?
If you use Navigation Page, you can use an empty string for the Back button title:
NavigationPage.SetBackButtonTitle(this, ""); //Empty string as title
As far as I remember, it will affect the next page on the navigation stack (the page after 'this' will have an empty Back button title). Don't quote me on this.
You can completely hide the Back button with:
NavigationPage.SetHasBackButton(this, false);
Another option is to use a Modal page by replacing Navigation.PushAsync(yourPage) with Navigation.PushModalAsync(yourPage) which will present the page modally.
FYI, the back button is automatically populated with the Title property of the previous page (or it will default to Back if the Title was not set).
There is also one workaround to hide back button title globally in whole application.
Add in your AppDelegate.cs in FinishedLaunching method:
UIBarButtonItem.Appearance.SetBackButtonTitlePositionAdjustment (new UIOffset (-100, -60), UIBarMetrics.Default);
Adding to Cuckooshka answer, back button title gets hidden in landscape mode as
UIBarButtonItem.Appearance.SetBackButtonTitlePositionAdjustment (new UIOffset (-100, -60), UIBarMetrics.LandscapePhone);
If you navigate from Page1 to Page2, then in Page1:
public Page1()
{
NavigationPage.SetBackButtonTitle(this, "");
InitializeComponent();
}
If everything is correct, in Page2 you will not see the title of navigation bar.
In my application, I have list of news... When user click on some item, I navigate him to page with detail:
NavigationService.Navigate(new Uri("/Detail.xaml?ID=" + listbox.SelectedIndex, UriKind.Relative));
On this detail page are also button prev and next, which navigate to next and previous items (also to Detail.xaml, just ID is increased or decreased by 1). However, if user go through some news and want to return to "homepage", he needs to push Back button many times. Is there any way, how can I just close this Detail.xaml? Open it modal or something? I don't want to use "go home" button, which just navigate user to main page because of loop when he tries to exit application...
When the next or previous buttons are clicked try calling NavigationService.RemoveBackEntry() in the OnNavigatedTo method. This will remove the page from the back stack, thus ensuring that when they hit the back button they return to the index page.