how to move from one page to another from button click in Xamarin.forms

Question

I just wanted to know that how to move from one Content Page to another Content Page..Please review the elseif() code ..What I have to write in that block so that I could move to another Content Page(named as MainView.cs)..

 button.Clicked += (sender, e) =>
        {
            if (String.IsNullOrEmpty(username.Text) || String.IsNullOrEmpty(password.Text))
            {
                DisplayAlert("Oops!!Validation Error", "Username and Password are required", "Re-try");
            }

            else if (username.Text == "kanak" && password.Text == "1234")
            {
               // your code here                   
            }
            else
            {
                DisplayAlert("Failed", "Invalid User", "Login Again");
            }
        };

Any help is appreciated..

Solution 1

First wrap you main contentPage in a NavigationPage. From there you will use Navigation by PushAsync(new SomeNewPage());.

In your case it should be....

 else if (username.Text == "kanak" && password.Text == "1234")
            {
                Navigation.PushAsync(new <App-Root-name>.<folder-name>.<Class-Name>());
            }

Sample Example (Taken From GitHub)...

using System;
using Xamarin.Forms;

namespace FormsGallery
{
    class TableViewMenuDemoPage : ContentPage
    {
        public TableViewMenuDemoPage()
        {
            Label header = new Label
            {
                Text = "TableView for a menu",
                Font = Font.SystemFontOfSize(30, FontAttributes.Bold),
                HorizontalOptions = LayoutOptions.Center
            };
            TableView tableView = new TableView
                {
                    Intent = TableIntent.Menu,
                    Root = new TableRoot
                    {
                        new TableSection("Views for Presentation")
                        {
                            new TextCell
                            {
                                Text = "Label",
                                Command = new Command(async () => 
                                    await Navigation.PushAsync(new LabelDemoPage()))
                            },
                            new TextCell
                            {
                                Text = "Image",
                                Command = new Command(async () => 
                                    await Navigation.PushAsync(new ImageDemoPage()))
                            },
                            new TextCell
                            {
                                Text = "BoxView",
                                Command = new Command(async () => 
                                    await Navigation.PushAsync(new BoxViewDemoPage()))
                            },
                            new TextCell
                            {
                                Text = "WebView",
                                Command = new Command(async () => 
                                    await Navigation.PushAsync(new WebViewDemoPage()))
                            },
                        }
                    }
                };

            // Build the page.
            this.Content = new StackLayout
            {
                Children = 
                {
                    header,
                    tableView
                }
            };
        }
    }
}

Solution 2

else if (username.Text == "kanak" && password.Text == "1234")
        {
            Navigation.PushAsync(new <App-Root-name>.<folder-name>.<Class-Name>());
        }

In the code . What is meant by <App-Root-name> and <folder-name> and <Class-Name> ???

Comments

[Curiousity]

<App-Root-name> and <folder-name> are the namespace of the class. In the able answer, it is FormsGallery. And <Class-Name> is the name of the content page, whereas in this case it is TableViewMenuDemoPage. So for the above answer, it should be as follows. Navigation.PushAsync(new FormsGallery.TableViewMenuDemoPage());