Click “New Solution”

Choose Xamarin.Forms App and click Next

Name Your App, Check Shared Library, then click Next

Name Your Project, Choose a location, and click Create

This is what your solution should look like. A Shared Folder and one for Droid and IOS

Right Click on the Shared Project and choose Add->New File

Choose Forms ContentPage and call it Home.cs, then click New

This is what Your New Home page should look like.

Open the <NameofYourProject>.cs file and remove the highlighted code

Replace it with this

• public App (){// The root page of your applicationMainPage = new Home();

}

Navigate back to the Home.cs file and remove the code shown here.

Replace it with this which creates a StackLayout to hold our content and adds padding for IOS

StackLayout stack = new StackLayout {Children = {}

};this.Content = stack;this.Padding = new Thickness (0, Device.OnPlatform (20, 0

, 0), 0, 0);

Add a Title Label as shown above, then include it in the Children of the StackLayout.

var title = new Label {Text = "Chuck Norris App",HorizontalOptions = LayoutOptions.Center,VerticalOptions = LayoutOptions.StartAndExpand

};

StackLayout stack = new StackLayout {Children = {title}

};

Create two more Labels, subtitle and jokeText, and add them to the Children of the StackLayout

var title = new Label {Text = "Chuck Norris App",HorizontalOptions = LayoutOptions.Center,VerticalOptions = LayoutOptions.StartAndExpand

};var subtitle = new Label {

Text = "Click below to get a hilarious joke",HorizontalOptions = LayoutOptions.Center,VerticalOptions = LayoutOptions.StartAndExpand

StackLayout stack = new StackLayout {Children = {title, subtitle, jokeText}

};

Should end up like this

Click the Run Button (looks like a play button) to open the emulator and start your app

Your app should look like this for now

Now let’s add a jokeButton and it’s “Click Handler” The click handler is where we tell the app what to do when the buton

is clicked.

Add a new file to our Shared Project.

Button jokeButton = new Button {Text = "Get Joke",HorizontalOptions = LayoutOptions.Center,VerticalOptions = LayoutOptions.StartAndExpand

};//This is what will happen when the jokeButton is clickedjokeButton.Clicked+= async (sender, e) => {

};

Click “New Solution”

Replace the code in that file with the code above.

namespace ChuckNorris{

public class Joke{

public string type { get; set; }public Value value { get; set; }

}

public class Value{

public int id { get; set; }public string joke { get; set; }public List<object> categories { get; set; }

}}

Right Click on “List” and choose Resolve-> using System.Collections.Generic

Now add the above lines in the Click Handler for the jokeButon which will attempt to retrieve a joke from the

Web

jokeButton.Clicked+= async (sender, e) => {//Attempt to retrieve joke from the webHttpClient client = new HttpClient();Uri uri = new Uri("http://api.icndb.com/jokes/random?li

mitTo=[nerdy]&firstName="+ firstNameEntry.Text+"&lastName="+ lastNameEntry.

Text);string obstring = await client.GetStringAsync (uri);

};

Right Click on “HttpClient” and choose Resolve->using System.Net.Http

Right Click on Package in the Android Project and Choose Add Packages

Search Json.net and click Add Package

Right Click on Package in the IOS Project and Choose Add Packages

Search Json.net and click Add Package

Joke joke = JsonConvert.DeserializeObject<Joke> (obstring);jokeText.Text = joke.value.joke;

Right Click JsonConvert and choose Resolve->using Newtonsoft.Json

Run the app again and click the Get Joke button

You should see a joke appear

Add two Entries, firstNameEntry and lastNameEntry as above

Entry firstNameEntry = new Entry {Text = "First Name",HorizontalOptions = LayoutOptions.CenterAndExpand,VerticalOptions = LayoutOptions.StartAndExpand,

};

Entry lastNameEntry = new Entry {Text = "Last Name",HorizontalOptions = LayoutOptions.CenterAndExpand,VerticalOptions = LayoutOptions.StartAndExpand,

};

Add them to the Children of the StackLayout

Update the uri variable to include the two entry fields as above

Uri uri = new Uri("http://api.icndb.com/jokes/random?limitTo=[nerdy]&firstName="

+ firstNameEntry.Text+"&lastName="+ lastNameEntry.Text);

Rerun the solution. Enter your name into the two entries

You should get back a personalized joke as Above