Post
Ask Question

Navigation Between Content Pages In Xamarin.Forms Application For Android And UWP

After reading this article, you will know how to navigate between content pages in Xamarin.Forms Application for Android and Universal Windows Platform with XAML and Visual C# in cross platform Application development.

The following important tools are required for developing UWP.

  1. Windows 10 (Recommended).
  2. Visual Studio 2015 Community Edition (It is a free software available online).
  3. Using Visual studio 2015 Installer, Enable the Xamarin (Cross Platform Mobile development and C#/.NET while install/Modify Visual studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank app (Xamarin.Forms Portable)-> Give the suitable name for your app (XamFormNaviga) ->OK.



Step 2

Now, create project “XamFormNaviga_Droid”. Choose the Target and minimum platform version for your Universal Windows Project and create project “XamFormNaviga_UWP”.



Step 3

Afterwards, Visual Studio creates 6 projects and displays Getting Started.XamarinPage. Now, we have to update Xamarin.forms Reference Portable Project and XamFormNaviga _Droid project using Manage NUGet Packages.

Step 4

Add 2 images in drawable folder in XamFormNaviga _Droid project and XamFormNaviga_UWP project.

Please refer How To Add An Image In Xamarin.Forms Application For Android And UWP

Step 5

Add 2 XAML pages (FirstPage, Second Page) for Navigation Page Demo. Right click on XamFormNaviga(Portable) project, Select ADD-> NewItem and Select ->CrossPlatform-> FormXamlPage-> Give the relevant name.





Step 6

In FirstPage.Xaml page, add a button, label and an image for the navigation demo.

  1. <StackLayout Orientation="Vertical">  
  2.     <Label Text="Xamarin Forms Navigation between Pages - UWP and Android Demo " FontSize="20" VerticalOptions="Center" HorizontalOptions="Center" />  
  3.     <Image x:Name="Img1" Source="First.jpeg" />  
  4.     <Button Text="Next Page" Clicked="OnNextPage" BackgroundColor="Yellow" />   
  5. </StackLayout>  


In SecondPage.xaml, add the Label, Image and Button.
  1. <StackLayout Orientation="Vertical">  
  2.     <Label Text="SecondPage " FontSize="20" VerticalOptions="Center" HorizontalOptions="Center" />  
  3.     <Image x:Name="Img2" Source="Second.jpg" />  
  4.     <Button Text="Back" Clicked="OnBackPage" BackgroundColor="Yellow" />  
  5. </StackLayout>  


Step 7

Add the code given below in FirstPage.Xaml.cs.
  1. private async void OnNextPage(object sender, EventArgs e)  
  2. {  
  3.     await Navigation.PushAsync(new SecondPage());  
  4. }  


Add the code given below in SecondPage.Xaml.cs.
  1. private async void OnBackPage(object sender, EventArgs e) {  
  2.     await Navigation.PushAsync(new FirstPage());  
  3. }  


Step 8

Open (double click) the file App.cs in the Solution Explorer-> XamFormNaviga (portable) and set the root page.



Step 9

We will test Android and UWP. Thus, we can set the Multiple Startup Projects as XamFormNaviga.Droid and XamFormNaviga.UWP (Universal Windows).



Step 10

Change the Configuration Manager settings. Go to Build -> Configuration Manager.

Uncheck all the Build and deploy options to the iOS, Windows, WinPhone. Check the Droid and UWP.



Step 11

Deploy your app in  the local machine and the output of the XamFormNaviga app is given bellow.



After clicking the NextPage button, the screenshot is, as shown below. 



Summary

Now, you have successfully tested navigation between the content pages in Xamarin.Forms Application for cross platform Application development, using Visual C# and Xamarin.

 


Similar Articles