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.
Related
I'm trying to implement a login flow (firstly showing the LoginPage) and the Login Page has a Command that the user can click to create an account (this is a NavigationPage), so the flow is LoginPage -> NewAccountPage (with button bar to navigate back to LoginPage).
In App.xaml.cs I have:
NavigationService.NavigateASync("LoginPage"); //I'm not sure if the LoginPage should be in NavigationStack, maybe be presented in Modal way
In LoginPageViewModel, I have a Command that simply call
_navigationService.NavigateAsync("NewAccountPage");
When the user press this button to create an account, the NewAccountPage is properly called but I get an error when the code flow finish to call the NavigationAsync("NewAccountPage");
The error is something like this :
Unhandled Exception:System.InvalidOperationException: Sequence contains no elements ocurred
I have no idea how to handle with this, could someone review if I'm making any mistake?
NavigationService.NavigateAsync("/MasterDetailsPage/NavigationPage/MainPage");
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.
I am trying to implement login and logout in asp.net(web forms). In my web form I have two pages namely Default and Main. From Default page when I login with username and password it redirects to the Main page. When I press back button it directly redirects to the default page. For this I copied javascript code to my default page
<script type = "text/javascript" >
function preventBack() { window.history.forward(); }
setTimeout("preventBack()", 0);
window.onunload = function () { null };
source from stackoverflow question
After login when I click on back button in my browser(chrome) first it shows the Default page and then it shows the Main page. i.e page blinks when I click the back button.
It shows main page successfully with the issue.
What should I implement to stop showing the Default page when I click on back button
Update:
<script type = "text/javascript" >
history.pushState(null, null, 'Default.aspx');
window.addEventListener('popstate', function (event) {
history.pushState(null, null, 'Default.aspx');
});
</script>
I placed this code in default page
There is one important thing that you ought to know here.
One cannot disable the browser back button functionality only thing that can be done is prevent it.
You can't, in anyway diasble that button. What you can however do, is to put some logic and prevent that button from doing what it is meant to do.
Now for the script that you have shown, it should serve fine and the other thing to try here is to put a mediator page between your default and main page. So when you login, the control will flow to mediator page and it will then redirect to main page. Now when the user presses back button on the main page, the control will flow to mediator page which will again redirect the user to his main page.
The effect will be the same as your script, but putting a page can help you write Session handling code and some server side checks if you want.
But one thing is sure, the browser back button will be as it is.
Hope this helps.
As Matt said you can't disagree the back behaviour. However you can check if the user is logged in and redirect them to the main page easily.
All you need to do is, on the default page check if the user is logged in, if they are then redirect them to the main page, this way even if the user clicks back, they will be taken back to the main page. And also the can go to the Default page after logging out.
Another way could be using location.replace("...."), which replace the existing document and user can't "go back" using back button as the page doesn't exist in the url history.
Src: https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
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