In this post, I’m going to show you how to navigate between two screens and how to pass data between screens. The same Xamarin Forms code will work fine for Android, iOS, and UWP Apps.

After setting up your project as shared in the previous post, you need to create a second screen or page, as it is called in Xamarin Forms, in your project. See the screenshot below on how to do that.

Once the second page is added, you need to make changes at three different places.

You have to change the App.xaml.cs class

You have to change the MainPage.xaml and MainPage.xaml.cs

You have to change the SecondPage.xaml and SecondPage.xaml.cs

First, let’s look at App.xaml.cs changes. In App class, you need to declare any variables which you’ll use to pass data across your screens. In our case, we have used a string variable MessageToPass. In the constructor, you have to add a new MainPage object inside a new NavigationPage object and assign it to MainPage. This will be our starting page to initialize our app with.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using Xamarin.Forms;

namespaceNavigateScreens

{

publicpartial classApp:Application

{

publicstaticstringMessageToPass="";

publicApp()

{

InitializeComponent();

MainPage=newNavigationPage(newMainPage());

}

protectedoverride voidOnStart()

{

// Handle when your app starts

}

protectedoverride voidOnSleep()

{

// Handle when your app sleeps

}

protectedoverride voidOnResume()

{

// Handle when your app resumes

}

}

}

Next, you need to make changes to MainPage, both in xaml and cs files. You need to add a button which when clicked will take you to the second screen. You can also add data to your shared variable i.e. MessageToPass. For the event behind the button, you need to decorate it with async and await attributes. You also need to add the SecondPage on to the Navigation stack by pushing PushAsync method. See the code below for both xaml and cs files.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<?xml version="1.0"encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:NavigateScreens"

x:Class="NavigateScreens.MainPage">

<ContentPage.Padding>

<OnPlatformx:TypeArguments="Thickness"

iOS="20, 40, 20, 20"

Android="20, 20, 20, 20"

WinPhone="20, 20, 20, 20"/>

</ContentPage.Padding>

<ContentPage.Content>

<StackLayout VerticalOptions="FillAndExpand"

HorizontalOptions="FillAndExpand"

Orientation="Vertical"

Spacing="15">

<Label Text="This is first screen."

VerticalOptions="Center"

HorizontalOptions="Center"/>

<Button Text="Go to Second Screen"x:Name="nextScreen"Clicked="OnNextScreen"/>

</StackLayout>

</ContentPage.Content>

</ContentPage>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespaceNavigateScreens

{

publicpartial classMainPage:ContentPage

{

publicMainPage()

{

InitializeComponent();

}

async voidOnNextScreen(objectsender,EventArgse)

{

App.MessageToPass="Hello from Main Screen!";

await Navigation.PushAsync(newSecondPage());

}

}

}

Now, for the SecondPage, you only need to add a Label on the UI in SecondPage.xaml file and read the shared variable for the passed data and then show it on the UI as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<?xml version="1.0"encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="NavigateScreens.SecondPage">

<ContentPage.Padding>

<OnPlatformx:TypeArguments="Thickness"

iOS="20, 40, 20, 20"

Android="20, 20, 20, 20"

WinPhone="20, 20, 20, 20"/>

</ContentPage.Padding>

<ContentPage.Content>

<StackLayout VerticalOptions="FillAndExpand"

HorizontalOptions="FillAndExpand"

Orientation="Vertical"

Spacing="15">

<Label Text=""x:Name="messageLabel"

VerticalOptions="Center"

HorizontalOptions="Center"/>

</StackLayout>

</ContentPage.Content>

</ContentPage>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespaceNavigateScreens

{

[XamlCompilation(XamlCompilationOptions.Compile)]

publicpartial classSecondPage:ContentPage

{

publicSecondPage()

{

InitializeComponent();

messageLabel.Text=App.MessageToPass;

}

}

}

When you run this app on Android, iOS, or UWP, you’ll see first screen with a label and a button. Once you click the button, it will take you to the second screen and display the passed data on the label. Try it out. The sample can be downloaded from the following repository.