Passing data between screens on iOS with Xamarin

In this tutorial you will learn how to create an iOS app that can pass data from one screen to another. This will be demonstrated in an example app that will ask the user for their age and will then convert their age to into animal years (of different types of animals). The user will select an animal by tapping a button and then the result will be displayed on the same screen. Tapping a button will take the user to another screen that grabs information from the first screen and displays a fact. The app will look like this…

Step 1

Open Xamarin and click File > New Solution to get started. Give your app a name (the app is called AnimalAgeCalculatorIOS in this example). Select a target iOS version and click Next.

Step 2

Confirm the project and solution name as well as the project location. Click Create.

Step 3

Open the Main.storyboard file in the Resources folder and drag a Label on to the screen. The label in this example app is given the Text value Enter your age in years.

Then drag a Text Field element on to the screen with the placeholder text Age. Give this Text Field the Name ageTextField.

Step 4

Add another label with the text value Convert to… and then four buttons with the following names:

dogButton
catButton
goatButton
hamsterButton

Then add another label with the text value Your result and a button with the text value Find out more and the Name detailsButton – as shown below.

Step 5

Now open the ViewController.cs file and add a TouchUpInside+= event for the dogButton element inside the ViewDidLoad() method. As you type in the line dogButton.TouchUpInside+= and press the spacebar on your keyboard you will be presented with some options. Double-click on DogButton_TouchUpInside to create a new method of the same name. If you don’t see the option immediately, start typing it in until it shows up in the list and then double-click it to add the new method for the touch event.

Step 6

Now repeat the last step for each of the buttons (adding a new method for the TouchUpInside events for each of the four animal buttons).

Step 7

Add the following variables to the ViewController : UIViewController class:

float age; (stores the user’s age)
float animalAge; (stores the age of the user in selected animal years)
string animal; (stores the name of the animal the user selected)

Step 8

Now add the following highlighted code in the methods for the button touch events. This will get the user’s age from the text field and store it in the age variable as a float value. The animal’s age will also be calculated (based on which animal button the user pressed) and stored in the animalAge variable as a float value. The selected animal’s name will be stored in the animal variable as a string value. The label displaying the result will also be updated.

Step 9

Now drag a Navigation Controller from the toolbox onto the screen in the Main.storyboard file.

Step 10

Right-click and delete the Root View Controller screen on the left (may have to do this twice).

Step 11

Hold down the Control (Ctrl) key while clicking and dragging from the Navigation Controller screen (on the left) to the main screen (on the right). You’ll see a blue line appear connecting the two screens together and a menu will also appear.

When the menu appears make sure you select Root.

Step 12

Now drag a View Controller from the toolbox on to the screen and place it on the right side of the main screen. This will be the second screen in the app.

Step 13

Drag a Label on to the screen. Give it a name and you will notice that a warning icon appears. Clicking on the warning icon will reveal the warning message.

The warning message tells us that there is no codebehind for this screen so we will need to create one. This will create a second ViewController.cs file for this screen. Give it the name ResultViewController and press the Enter key.

In the solution panel you should now see the ResultViewController.cs file in the list. This file is where we add the code for the second screen.

Step 14

Now Control (Ctrl) click the Find out more button on the main screen and while holding down the mouse key, drag on to the second screen and release. A small menu will appear. Select Show (this means when the button is pressed, it will show the second screen).

Step 15

Now go back to ViewController.cs and add a new method. Start typing public override PrepareForSegue and then double-click the method shown in the list to create it.

ipd21 — Click the image for a larger version.

Add the following highlighted code to the new PrepareForSegue method. This will create a variable for the second screen/view controller and the two variables that will have their values passed to the second screen are also specified here.

ipd22 — Click the image for a larger version.

Step 16

Now go to the ResultViewController.cs file (for the second screen) and add the following highlighted code in the ResultViewController : UIViewController class. This will declare the animalAge and animal variables with initial values of 0f for animalAge and an empty string for animal.

ipd23 — Click the image for a larger version.

Step 17

Now drag a Text View element on to the second screen with the Name resultLabel and the Text value of Your result. Resize it so it has plenty of room for text.

Step 18

Go back to the ResultViewController.cs file and add the ViewDidLoad method.

ipd25 — Click the image for a larger version.

Inside the ViewDidLoad method, add the following highlighted code. This will display the result to the user based on their animal age and selected animal.

ipd26 — Click the image for a larger version.

Step 19

Now drag a Button element from the toolbox on to the second screen in the Main.storyboard file and give it the Name value backButton and the Text value Back.

Step 20

Now Control (Ctrl) click and drag from the Back button on the second screen to the main screen and click Show when the menu appears after releasing the mouse button. This will make the app take the user back to the main screen when they press the Back button.

Step 21

The final step is to allow the user to dismiss the keyboard on the main screen when the keyboard is no longer required. Go back to the ViewController.cs file and add an override TouchesBegan method as shown below.

ipd29 — Click the image for a larger version.

Inside the new override method, add the following highlighted line of code which will end editing and dismiss the keyboard when the user no longer requires it.

ipd30 — Click the image for a larger version.

That’s it! Now go and save all your files and test your app.