I am working on a Xamarin.Forms project, and in my PCL i created startup page called "Login.xaml". On this page a user has to fill in their credentials and sends it to an WebAPI. When the API returns "1"/true it opens a new page called "Home.xaml".
How can i prevent the user from returning to the login page when pressing on the back button on the phone? ie: The user logs in on the first page, webapi validates it and returns a "1" so the new page ("Home") gets opened, but when the user presses the Back button it returns to the login screen. This should not be possible until the app gets closed down.
You can remove the login page from the navigation stack when you're pushing your Home.xaml:
await Navigation.PushAsync(new Home()); // or whatever your page is called
Navigation.RemovePage(this);
This way there's nothing to go back to after your user gets to the homepage.
For this to work, your login page needs to be a NavigationPage. For this, you'll have to wrap it with the NavigationPage ctor:
// this goes into your App.cs where you enter your app:
public App()
{
MainPage = new NavigationPage(new Login()); // or whatever your login page is called
}
I suggest you have a look at the documentation: Introduction to Xamarin Forms - Navigation
As for me, calling RemovePage() was giving me all sorts of problems.
What I had to do is shift my thinking. If you do Pop instead of Push, you're actually removing the page for good. So what do you need to do in order to be able to do Pop instead of Push? Insert the next page before the current page first, and then Pop:
var newRootPage = new NewRootPage();
this.Navigation.InsertPageBefore(newRootPage, this);
await this.Navigation.PopAsync();
Note: for this to work you will also need to do wrap your initial root page in a NavigationPage like #germi says in the last part of his answer:
// this goes into your App.cs where you enter your app:
public App()
{
// or whatever your login page is called
MainPage = new NavigationPage(new Login());
}
PS: FWIW this was my fix in my F# open source project.
Related
The root of a .NET MAUI application is the class App : Application.
This class has a property Page? MainPage that contains the current root page.
I try to use this property for navigation. I wrote a method App.ShowPage(Page page) that sets the property MainPage to the given page.
This works like a charm! I start my application and show a login page - works.
When the user clicks login on my login page I show the main view (a TabbedPage) - works.
When the user clicks on an item on that main view a details view gets shown - works.
Now when the user clicks cancel on that detail view, I try to navigate back to the main view. As always with my method App.ShowPage(Page page). Now I get an exception:
IllegalStateException; The specified child already has a parent. You
must call removeView() on the child's parent first.
So the error message tries to tell me what to do. And I do find properties like Element Parent or Element RealParent on the Page page I try to open - but they are all null. So how do I remove the page from that parent? What is the removeView() method in the .NET MAUI world?
Thanks in advance for any help!
I working on an Android App using Xamarin.Forms. I have a few problems with the navigation.
When I use Navigation.PushAsync(new ContentPage()); my navigation flow creates bucles. When I press go back, I revisit pages that sould be inaccesables. For example I push this pages:
Login (go)> Menu (go)> CloseSession (go)> Login
When I click the go back button of Android, the flow is this:
Login (go)> Menu (go)> CloseSession (go)> Login (goback)> CloseSession (goback)> Menu (goback)> Login
insted of going out of the App:
Login (go)> Menu (go)> CloseSession (go)> Login (goback)> App close
I know if I use Navigation.PopAsync(); the last push page is remove from the navigetion stack but it look tricky for me. Is it there an alternative to Navigation for Xamarin? Some way to create navigate pages avoiding adding them into the stack?
I believe what you are trying to do is "manipulating the navigation stack".
If you don't want a page to be on the navigation stack you can remove it as soon as you navigate away from it using Navigation.RemovePage(page).
You can pass a saved reference of that page, or look it up in the Navigation.NavigationStack, if it's a known scenario (known navigation stack index of the page you want to remove) you can do:
Navigation.RemovePage(Navigation.NavigationStack[index]);
Or you can use InsertPageBefore() followed by a PopAsync() as shown in the navigation docs example:
These methods enable a custom navigation experience, such as replacing a login page with a new page, following a successful login. The following code example demonstrates this scenario:
async void OnLoginButtonClicked(object sender, EventArgs e)
{
if (IsValid)
{
Navigation.InsertPageBefore(new MainPage (), this);
await Navigation.PopAsync();
}
else
{
// Login failed
}
}
You shouldn't use navigation like this. Some forms (especially login), should be popped when completed.
Push login form
User Completes login
Pop login form
Decide which form should be pushed next.
In your scenario I suggest you use Modal Pages to present the login page .
It will create an extra modal stack which will not affect the original stack.
When user complete login , then pop the login page .
The flow
Set NavigationPage(root page : Main) as MainPage in App.
Show login page using PushModalAsync .
Complete login
Close login page using PopModalAsync.
I am building a Xamarin app, where in my portable logic, I have my app.cs file, launching a HomePage. At the moment this is done ith the following code:
public App ()
{
MainPage = new NavigationPage (new HomePage (Adapter, IsLoggedIn));
}
However, I don't want the "title" bar to show at the top of this page, so would like to launch this page with a PushModalAsync command, so that HomePage is a Modal Page. However, the following line doesn't work, as in app.cs, Navigation is not recognised.
Navigation.PushModalAsync(new HomePage());
Is this possible and if so, how do I get around this?
Thanks.
I don't believe you can set the root page of your App to be a modal. However, if you just want to hide the navigation bar, you can do this in the page you want it hidden on:
NavigationPage.SetHasNavigationBar(this, false);
Since it's your main page you can just set the page itself. Say "HomePage" inherits from "ContentPage":
MainPage = new HomePage (Adapter, IsLoggedIn);
I need to ask for a passcode every time the app was suspended (and resumed), so I have to show a corresponding page, and after the user enters the pin proceed the app resuming to the page which was shown before suspending. How can I get the page to which I have to proceed? The App.Resume event provides 2 parameters, but both of them are objects. To which type I need to cast these objects to get the proper page's type? Can I get from these parameters the proper page type at all?
I mean
private void OnResuming(object sender, object e)
{
//get the suspended page's type here
}
Thanks :)
I recommend the following:
In OnResuming simply Navigate to the passcode page, but remember the current page before.
OnResuming should look like this:
//...
// the following line returns something like e.g. "MainPage"
var pageTypeName = ((Frame)Window.Current.Content).SourcePageType.Name;
// store pageTypeName in app scope
// Navigate to passcode page ...
When passcode was entered correctly navigate to the previous page.
Second Option:
You can also try to navigate to the passcode page during "OnSuspending". The user will see the passcode page after a resume. After entering the code you can redirect the user to the previous page. Of course you also have to store the type of the current page during OnSuspending accordingly.
The code shown works fine if you have an "easy" interface without e.g. a SplitView. You probably have to tweak it a little if you are working with nested Frames etc.
I'm trying to create an App with a Login Page as the first page.
Once the user logs in, the pages that come after will be in a standard page stack organisation so I can easily use the build in Navigation object and wrap everything in Navigation pages.
e.g.
Login Page -> MainAppPage |-> Category1Page -> Cat1SubPage
|-> Category2Page -> Cat2SubPage
My understanding is that I should wrap MainAppPage with new NavigationPage(), and then I'll have access to the Navigation object allowing me to do things like this:
await this.Navigation.PushAsync(new Category1Page());
And the various platforms will give me automatic back button support to go back to the previous page.
But I don't want a user to navigate from LoginPage -> MainAppPage in this manner, because I don't want the backbutton to take them back to Login, without them explicitly hitting the logout button.
So how should I handle that first Page Transition from LoginPage -> MainApp Page.
Is there an alternative way to have 2 Primary pages and swap between them? Or is there a way to intercept the back button requests on MainAppPage and discard them?
Not finding an awful lot of info in the documentation regarding this, but it seems like a fairly standard requirement so possibly PEBKAC
I just posted a quick sample on Github for this scenario. The idea is that you want to initially navigate to your NavigationPage, then if necessary (meaning the user isn't already logged in), push the LoginPage modally. Then, on successful Login, simply pop the LoginPage from the stack. You can check out the sample here, https://github.com/jamesqquick/Xamarin-Forms-Login-Navigation/blob/master/ReadMe.MD
I can think of at least two solutions.
One way is to create a MainAppPage first and within that page show Login Page as Modal.
Other would be to create a platform specific page, load Login Page and only upon successful login navigate to MainPage using platform specific navigation (LoginPage should be NoHistory or something like that to avoid going back) not Forms navigation (i.e. in Android both pages should be separate activities). This involves a bit more work since you have to deal with the three platforms but it shouldn't be much overhead.
That said there is a better navigation supposedly coming with, hopefully, 1.3.0.
As Miha Markic said, a Modal window is a good option. One other thing you can also consider, especially if you want the login page to have the same Navigation Bar as your other pages, would be the same thing that I already posted about in the question URL below.
Basically, you would keep a reference to your NavigationPage in the App class (lets call it AppNavPage), then, when showing your login page, you put your login page within a separate NavigationPage and do a PushAsync() with your new NavigationPage and login page.
Once the user logs in successfully, you just replace the current MainPage with your old NavigationPage using this code:
Application.Current.MainPage = App.AppNavPage
Check out the link below for better code examples.
https://stackoverflow.com/a/32382852/3850012
This is what I have working on Android:
protected override void OnCreate (Bundle bundle){
base.OnCreate (bundle);
string start = "new";
Bundle extras = Intent.Extras;
if (extras != null) {
start = extras.GetString ("start");
}
if(start == "new"){
SetPage (App.GetLoginPage (OnLoginCompleted));
} else if (start == "login") {
SetPage (App.GetMainPage (OnSignOutCompleted));
}
}
void OnLoginCompleted(){
// ...
var refresh = new Intent (this, typeof(MainActivity));
refresh.PutExtra ("start", "login");
StartActivity (refresh);
Finish ();
}
void OnSignOutCompleted(){/* mirrors OnLoginCompleted */ }
This is effectively an activity with a configurable landing page. In order to change to it we restart with a different setting. It's a tiny bit slower than navigating on my phone but only just noticeable.
I think the best way would be to Remove the LoginPage from the stack once you verify login, then it's not available any longer.
async void OnLoginButtonClicked (object sender, EventArgs e)
{
...
var isValid = AreCredentialsCorrect (user);
if (isValid) {
App.IsUserLoggedIn = true;
Navigation.InsertPageBefore (new MainPage (), this);
await Navigation.PopAsync ();
} else {
// Login failed
}
}
Provided that the user's credentials are correct, the MainPage
instance is inserted into the navigation stack before the current
page. The PopAsync method then removes the current page from the
navigation stack, with the MainPage instance becoming the active page.
See full description here