How to Navigate Between Pages in a Xamarin Project

Does your app have several pages? Learn to navigate between pages by using event triggers.

Xamarin is a software platform used for cross-platform mobile development. You can use it to create apps on iOS, Android, Windows, and more. You can create a new Xamarin project using Visual Studio, and populate your app by adding content, widgets, and other functionalities.

When you create a new mobile app, your app may require several pages. If this is the case, the app will also need the required functionality for the users to navigate between these pages.

How to Set Up a Xamarin Project

To get started, create a new Xamarin project. When you create a new app, there will be a default main page called MainPage.xaml stored within the main Xamarin project folder. The MainPage.xaml page acts as your starting screen when you first launch the application.

The page also contains a MainPage.xaml.cs file, where you can write your programming logic using C#. Other platforms may use other mobile development game languages which may be useful for you to learn.

1. Navigate to MainPage.xaml and open it.

2. In the MainPage.xaml file, modify the default code. Replace the contents of the StackLayout UI element with a new label:

   <StackLayout Padding = "50">
   <Label Text = "My New Mobile Application"
   HorizontalOptions = "Center"
   VerticalOptions = "CenterAndExpand"
   FontAttributes = "Bold, Italic"
   FontSize = "24"
   TextColor = "Black" />
   </StackLayout>
   

3. At the top of the Visual Studio window, click on the green play button to run the application in the emulator.

4. Wait for the project to compile before the emulator launches.

How to Add a Second Page to the Xamarin Project

Currently, your Xamarin project has only one page. To create a new page, add a new xaml file and populate it with some content.

1. In Solution Explorer, right-click on the project. Select Add, and click on New Item.

2. Select Content Page from the Xamarin.Forms category. Name the new file SecondPage.xaml, and click on Add.

3. You will see the new page appear in the Solution Explorer, and will be made up of both a xaml file and a xaml.cs file. The xaml file will consist of UI elements and widgets, and the xaml.cs file will consist of other code logic and functionality.

4. Open the SecondPage.xaml file, which will already contain some default code. Within the StackLayout UI element, replace the current label with a label that says “Second Page”.

   <StackLayout>
   <Label Text="Second Page"
   FontSize="42"
   VerticalOptions="CenterAndExpand"
   HorizontalOptions="CenterAndExpand" />
   </StackLayout>

How to Navigate to the Second Page From the Main Page

To navigate to the second page, add a button that will trigger the app to navigate to it.

1. Open MainPage.xaml.
2. Add a button UI element. Add the new button underneath the label.

   <Button Text = "Navigate To Second Page"
   x:Name = "Button1"
   BackgroundColor = "#2196F3"
   TextColor = "WhiteSmoke"
   HeightRequest = "50" />

3. Open MainPage.xaml.cs, and create a function called NavigateTo(). Inside the function, use the Navigation.PushAsync function to navigate to the new page. You will need to add the new page object as an argument.

   async void NavigateTo(object sender, EventArgs e)
   {
   Navigation.PushAsync(new SecondPage());
   }

4. Go back to MainPage.xaml. Add the new NavigateTo() function in the Clicked attribute. This will trigger the function to run when the user presses the button.

   <Button Text = "Navigate To Second Page"
   x:Name = "Button1"
   Clicked = "NavigateTo"
   BackgroundColor = "#2196F3"
   TextColor = "WhiteSmoke"
   HeightRequest = "50" />

5. At the top of the Visual Studio window, click on the green play button to launch the app using the emulator.

6. Click on the button on the main page. You will see the app navigate to the second page.

Creating Mobile Applications Using Xamarin

Xamarin is an open-source tool that you can use to develop mobile applications on iOS, Android, Windows, and more. You can create a new Xamarin project using Visual Studio, populate the app, and add multiple pages.

To add multiple pages, create new content pages and populate them with content. You can also utilize on-click events or other events to trigger the app to navigate to the new page.

There is a lot that goes into building a mobile application, so it is important for you to understand the fundamentals while getting started. Explore some of the great courses that are available for you to learn from.