Hello, iOS

Introduction to iOS Development with Xamarin

[Link] Quickstart
In this walkthrough well create an application that translates an alphanumeric phone number entered by the user
into a numeric phone number, and then calls that number. The final application looks like this:

Lets get started!

Requirements
iOS development with Xamarin requires:
A Mac running OS X Yosemite (10.10) or above.
Latest version of Xcode and iOS SDK installed from the App Store .
[Link] works with any of the following setups:
Latest version of Xamarin Studio on a Mac that fits the above specifications.
Latest version of Visual Studio Professional or higher on Windows 7 or above, paired with a Mac build host

that fits the above specifications. This setup requires a Xamarin Business License or trial.
The [Link] OS X Installation guide is available for step-by-step installation instructions
Note: [Link] is not available for Xamarin Studio on Windows.
Before we get started, please download the Xamarin App Icons and Launch Screens set.

Xamarin Studio Walkthrough

In this walkthrough well create an application called Phoneword that translates an alphanumeric phone number
into a numeric phone number.
1. Lets launch Xamarin Studio from the Applications folder or Spotlight to bring up the Launch screen:

In the top left, lets click New Solution... to create a new [Link] solution:

2. From the New Solution dialog, well choose the iOS > App > Single View Application template, ensuring
that C# is selected. Click Next:

.
3. Let's configure the app. Give it the Name Phoneword_iOS, and leave Identifiers, Devices, and Target as
default. Click Next:

4. Let's leave the Project and Solution Name as is. We can choose the location of our project here, or keep it
as the default:

5. Make sure to uncheck the checkboxes for Xamarin Insights and Xamarin Test Cloudand click Create to
make the Solution.
6. Next, well open the [Link] file by double-clicking on it in the Solution Pad. This will allow us to
create our UI:

Note that size classes are enabled by default. You can read more about them here.
7. In the Designer Toolbar, click on View As and change it from Generic to iPhone 6:

8. From the Toolbox (the area on the right), lets type "label" into the search bar and drag a Label onto the
design surface (the area in the center):

9. Next, grab the handles of the Dragging Controls (the circles around the control) and make the label wider:

10. With the Label selected on the design surface, use the Properties Pad to change the Text property of the
Label to "Enter a Phoneword:"

Note: You can bring up the Properties Pad or Toolbox at any time by navigating to View > Pads.
11. Next, lets search for "text field inside the Toolbox and drag a Text Field from the Toolbox onto the design
surface and place it under the Label. Adjust the width until the Text Field is the same width as the Label:

12. With the Text Field selected on the design surface, change the Text Fields Name property in the Identity
section of the Properties Pad to PhoneNumberText, and change the Title property to "1-855-XAMARIN":

13. Next, drag a Button from the Toolbox onto the design surface and place it under the Text Field. Adjust the
width so the Button is as wide as the Text Field and Label:

14. With the Button selected on the design surface, change the Name property in the Identity section of the
Properties Pad to TranslateButton. Change the Title property to "Translate":

15. Lets repeat the two steps above and drag a Button from the Toolbox onto the design surface and place it
under the first Button. Adjust the width so the Button is as wide as the first Button:

16. With the second Button selected on the design surface, well change the Name property in the Identity
section of the Properties Pad to CallButton. Well change the Title property to "Call":

Lets save our work by navigating to File > Save or by pressing + s.

17. Now, lets add some code to translate phone numbers from alphanumeric to numeric. Well add a new file
to the Project by clicking on the gray gear icon next to the Phoneword_iOS Project in the Solution Pad and
choosing Add > New File... or pressing + n:

18. In the New File dialog, select General > Empty Class and name the new file PhoneTranslator:

19. This creates a new, empty C# class for us. Remove all the template code and replace it with the following
code:
using [Link];
using System;
namespace Phoneword_iOS
{
public static class PhoneTranslator
{
public static string ToNumber(string raw)
{
if ([Link](raw))
return "";
else
raw = [Link]();
var newNumber = new StringBuilder();
foreach (var c in raw)
{
if (" -0123456789".Contains(c))
[Link](c);

else {
var result = TranslateToNumber(c);
if (result != null)
[Link](result);
}
// otherwise we've skipped a non-numeric char
}
return [Link]();
}
static bool Contains (this string keyString, char c)
{
return [Link](c) >= 0;
}
static int? TranslateToNumber(char c)
{
if ("ABC".Contains(c))
return 2;
else if ("DEF".Contains(c))
return 3;
else if ("GHI".Contains(c))
return 4;
else if ("JKL".Contains(c))
return 5;
else if ("MNO".Contains(c))
return 6;
else if ("PQRS".Contains(c))
return 7;
else if ("TUV".Contains(c))
return 8;
else if ("WXYZ".Contains(c))
return 9;
return null;
}
}
}
Save the [Link] file and close it.

20. Next were going to add code to wire up the user interface. Lets add the code to power the user interface
into the ViewController class. Double-click on [Link] in the Solution Pad to open it:

21. Lets begin by wiring up the TranslateButton. In the ViewController class, find the ViewDidLoad
method. We will add our button code inside ViewDidLoad, below the [Link]() call:
public override void ViewDidLoad ()
{
[Link] ();
// code goes here
}
22. Lets add code to respond to the user pressing the first button, which weve named TranslateButton.
Populate ViewDidLoad with the following code:
string translatedNumber = "";
[Link] += (object sender, EventArgs e) => {
// Convert the phone number with text to a number
// using [Link]
translatedNumber = [Link](
[Link]);
// Dismiss the keyboard if text field was tapped

[Link] ();
if (translatedNumber == "") {
[Link] ("Call ", [Link]);
[Link] = false;
} else {
[Link] ("Call " + translatedNumber,
[Link]);
[Link] = true;
}
};
23. Next lets add code to respond to the user pressing the second button, which weve named CallButton.
Place the following code below the code for the TranslateButton and add using Foundation; to the
top of the file:
[Link] += (object sender, EventArgs e) => {
// Use URL handler with tel: prefix to invoke Apple's Phone app...
var url = new NSUrl ("[Link] + translatedNumber);

// ...otherwise show an alert dialog

if (![Link] (url)) {
var alert = [Link] ("Not supported", "Scheme '[Link]
is not supported on this device", [Link]);
[Link] ([Link] ("Ok",
[Link], null));
PresentViewController (alert, true, null);
}
};
24. Lets save our work, and then build the application by choosing Build > Build All or pressing + B. If our
application compiles, we will get a success message at the top of the IDE:

If there are errors, we can go through the previous steps and correct any mistakes until the application
builds successfully.
25. We now have a working application and its time to add the finishing touches! We can edit the application

name and icons in the [Link] file. Lets open [Link] by double-clicking on it in the Solution Pad:

26. In the iOS Application Target section, lets change the Application Name to "Phoneword":

27. Next, lets set the launch images. Well assign [Link] to the standard resolution (320x480)
placeholder, Default@[Link] to the Retina (3.5-inch) placeholder, and finally Default-568h@[Link] to the
Retina (4-inch) placeholder:

The image names follow iOS naming conventions for images of different densities.
28. To set application icons and launch images, first download the Xamarin App Icons & Launch Screens set.
As we are using Asset Catalog to manage our icons, navigate to Resources > [Link] >
[Link] in our Solution Pad, and the open [Link] file. In the iPhone Icons section,
click directly on the (57x57) icon placeholder and select the matching icon from the Xamarin App Icons &
Launch Images directory:

Lets continue filling in all icons. Xamarin Studio will replace the placeholders with our icons:

29. Finally, lets test our application in the iOS Simulator. In the top left of the IDE, choose Debug from the first
dropdown, and iPhone 6 iOS x.x from the second dropdown, and press Start (the triangular button that
resembles a Play button):

30. This will launch our application inside the iOS Simulator:

Phone calls are not supported in the iOS Simulator; instead, well see our alert dialog when we try to place
a call:

Visual Studio Walkthrough

In this walkthrough well create an application called Phoneword that translates an alphanumeric phone number
into a numeric phone number.
Note that for this walkthrough we are using Visual Studio 2015 on a Windows 10 Virtual Machine. Your set up
can differ from this, as long as it meets the requirements above, but be aware that some screenshots may look

different to your set up.

1. Lets launch Visual Studio from the Start menu:

In the top left, lets click New Solution... to create a new [Link] solution.

2. From the New Project dialog, well choose the Visual C# > iOS > iPhone > Single View Application
template. We'll name the Project Phoneword_iOS and the new Solution Phoneword, as illustrated below:

3. Press OK to create the new Project

4. Once the Project is created, the Xamarin Mac Agent dialog will appear. This controls the connection
between Visual Studio, and the Mac build host. Provided that the Mac has been Configured correctly, you
should see you Mac appear in the list, as illustrated below:

5. Select your Mac from the list, and press the Connect... button. This is extremely important! If we aren't
connected to the Mac host, we will be unable to launch the iOS Designer, or deploy our app to the
simulator.
6. Next, well open the [Link] file by double-clicking on it in the Solution Explorer:

7. In the Designer Toolbar, click on View As and change it from Generic to iPhone 6:

8. From the Toolbox tab, lets type "label into the search bar and drag a Label onto the design surface (the
area in the center):

9. Next, grab the handles of the Dragging Controls (the circles around the control make sure they are circles
they don't look like 'bones') and make the label wider:

10. With the Label selected on the design surface, use the Properties Windows to change the Text property of
the Label to "Enter a Phoneword:"

Note: You can bring up the Properties or Toolbox at any time by navigating to the View menu.
11. Next, lets search for "text field inside the Toolbox and drag a Text Field from the Toolbox onto the design

surface and place it under the Label. Adjust the width until the Text Field is the same width as the Label:

12. With the Text Field selected on the design surface, change the Text Fields Name property in the Identity
section of the Properties to PhoneNumberText, and change the Text property to "1-855-XAMARIN":

13. Next, drag a Button from the Toolbox onto the design surface and place it under the Text Field. Adjust the
width so the Button is as wide as the Text Field and Label:

14. With the Button selected on the design surface, change the Name property in the Identity section of the
Properties to TranslateButton. Change the Title property to "Translate":

15. Lets repeat the previous two steps and drag a Button from the Toolbox onto the design surface and place
it under the first Button. Adjust the width so the Button is as wide as the first Button:

16. With the second Button selected on the design surface, well change the Name property in the Identity
section of the Properties to CallButton. Well change the Title property to "Call":

Lets save our work by navigating to File > Save or by pressing Ctrl + s.
17. Now, lets add some code to translate phone numbers from alphanumeric to numeric. Well add a new file
to the Project by right-clicking on the Phoneword_iOS Project in the Solution Explorer and choosing Add >
New Item... or pressing Ctrl + Shift + A:

18. In the New File dialog, select iOS > Class and name the new file PhoneTranslator:

19. This creates a new C# class for us. Remove all the template code and replace it with the following code:
using [Link];
using System;
namespace Phoneword_iOS
{
public static class PhonewordTranslator
{
public static string ToNumber(string raw)
{
if ([Link](raw))
return "";
else
raw = [Link]();

var newNumber = new StringBuilder();

foreach (var c in raw)
{
if (" -0123456789".Contains(c))
[Link](c);
else {
var result = TranslateToNumber(c);
if (result != null)
[Link](result);
}
// otherwise we've skipped a non-numeric char
}
return [Link]();
}
static bool Contains (this string keyString, char c)
{
return [Link](c) >= 0;
}
static int? TranslateToNumber(char c)
{
if ("ABC".Contains(c))
return 2;
else if ("DEF".Contains(c))
return 3;
else if ("GHI".Contains(c))
return 4;
else if ("JKL".Contains(c))
return 5;
else if ("MNO".Contains(c))
return 6;
else if ("PQRS".Contains(c))
return 7;
else if ("TUV".Contains(c))
return 8;
else if ("WXYZ".Contains(c))
return 9;
return null;

}
}
}
Save the [Link] file and close it.
20. Next were going to add code to wire up the user interface. Lets add the backing code into the
ViewController class. Double-click on [Link] in the Solution Explorer to open it:

21. Lets begin by wiring up the TranslateButton. In the ViewController class, find the ViewDidLoad
method. We will add our button code inside ViewDidLoad, below the [Link]() call:
public override void ViewDidLoad ()
{
[Link] ();
// code goes here
}
22. Lets add code to respond to the user pressing the first button, which weve named TranslateButton.
Populate ViewDidLoad with the following code:
string translatedNumber = "";
[Link] += (object sender, EventArgs e) => {

// Convert the phone number with text to a number

// using [Link]
translatedNumber = [Link](
[Link]);
// Dismiss the keyboard if text field was tapped
[Link] ();
if (translatedNumber == "") {
[Link] ("Call", [Link]);
[Link] = false;
}
else {
[Link] ("Call " + translatedNumber, [Link]);
[Link] = true;
}
};
23. Next lets add code to respond to the user pressing the second button, which weve named CallButton.
Place the following code below the code for the TranslateButton and add using Foundation; to the
top of the file:
[Link] += (object sender, EventArgs e) => {
var url = new NSUrl ("[Link] + translatedNumber);
// Use URL handler with tel: prefix to invoke Apple's Phone app,
// otherwise show an alert dialog
if (![Link] (url)) {
var alert = [Link] ("Not supported",
"Scheme '[Link] is not supported on this device", [Link]);
[Link] ([Link] ("Ok",
[Link], null));
PresentViewController (alert, true, null);
}
};
24. Lets save our work, and then build the application by choosing Build > Build Solution or pressing Ctrl +
Shift + B. If our application compiles, we will get a success message at the bottom of the IDE:

If there are errors, we can go through the previous steps and correct any mistakes until the application
builds successfully.
25. We now have a working application and its time to add the finishing touches! We can edit the application
name and icons in the [Link] file. Lets open [Link] by double-clicking on it in the Solution Explorer:

26. In the iOS Application Target section, lets change the Application Name to "Phoneword":

27. To set application icons and launch images, we need to create an Asset Catalog that will hold all of our
images. Let's right-click on Asset Catalogs in the Solution Explorer and select Add Asset Catalog:

Name the Asset Catalog Media and press Add:

28. We now need to get some images to to our Asset Catalog, so download the Xamarin App Icons & Launch
Screens set. To start adding the icons, click directly on the (58x58) icon placeholder and browse to your
folder location. Select the matching icon from the Xamarin App Icons & Launch Images directory:

Lets continue filling in all the icons and the Launch Screen images. Visual Studio will replace the
placeholders with our icons:

29. Next lets go to our Project options to tell our application to use the Asset Catalog for app icons and launch
screen images. Let's right-click on the Project name and browse to Properties. Then locate the iOS
Application section. Under App, Spotlight and Settings, set the Asset Catalogs dropdown to Media > App
Icons:

Do the same for Launch Images but set the Asset Catalogs dropdown to Media > Launch Screen.
30. Finally, lets test our application in the iOS Simulator. In the IDE toolbar, choose Debug and iPhone 6 iOS
x.x from the drop down menus, and press Start (the green triangle that resembles a Play button):

31. This will launch our application inside the iOS Simulator:

Phone calls are not supported in the iOS Simulator; instead, well see our alert dialog when we try to place
a call:

Congratulations on completing your first [Link] application! Now its time to dissect the tools and skills we
just learned in the Hello, iOS Deep Dive.