Creating a Xamarin Forms App Part 2: Getting Started

  • Part 1 : Introduction
  • Part 2 : Getting Started
  • Part 3 : How to use Xamarin Forms with Visual Studio without the Business Edition
  • Part 4 : Application Resources
  • Part 5 : Dependency Injection
  • Part 6 : View Model First Navigation
  • Part 7 : Unit Testing
  • Part 8 : Consuming a RESTful Web Service
  • Part 9 : Working with Alerts and Dialogs
  • Part 10 : Designing and Developing the User Interface
  • Part 11 : Updating to Xamarin Forms 1.3
  • Part 12 : Extending the User Interface

This is the second post in my series ‘Creating a Xamarin Forms App’ where I share with you my journey as I create a real end-to-end cross-platform Mobile application using Xamarin Forms. I will be using Xamarin Studio on OSX as my IDE rather than Visual Studio as outlined in my previous post Xamarin Studio vs Visual Studio.

(Note: In my next post I will show you how to use Visual Studio to develop Xamarin Forms Applications without the Business Edition.)

So, let’s get started.

With Xamarin Studio create a new solution from File > New > Solution, then select Mobile Apps on the left and choose Blank App (Xamarin Forms Portable).

Naming is important. I like to follow the correct namespace conventions so we will adopt this. My company is called Silkweb, we are targeting Mobile platforms and this is a Mountain Forecast App, so my solution name is Silkweb.Mobile.MountainForecast.

part 2.1

Next I’m going to create another PCL class library where I can place all the common classes that I intent to use on other projects. This also keeps our application projects nice and clean. Right click the solution and select Add > New Project, then select Mobile Apps and choose Class Library (Xamarin.Forms Portable). As this is a project that is going to contain all the core classes be used for all my Xamarin Forms apps I’m going to call this project Silkweb.Mobile.Core. The Solution should now look like this.

part 2.2

Now add a reference to the Core project from the applications shared PCL project so that we can use it in our application.

I prefer to arrange my projects into Solution folders to keep things tidier and collapse projects I’m not currently using. Create a solution folder called Platforms and drag the iOS and Android projects into it. Then create a solution folder called Core and move the core project into there. And finally create a folder called Shared and place the shared application PCL in that folder. Now my solution looks much nicer.

part 2.3

At this point make sure you update packages from the solution to ensure all the Xamarin NuGet packages are up to date.

Now lets create some folders in the portable application library, Silkweb.Mobile.MountainForecast. We are going to be using MVVM (Model-View-View Model) so create folders called Models, Views and ViewModels. This should look like this.

part 2.4

The App class currently contains code that creates a simple label in code in the GetMainPage method. Lets create a View to replace this. From the Views folder select Add > New File and from ‘Forms’ choose ‘Forms ContentPage Xaml’ and call it ‘MainPage’. Now change the App GetMainPage method to use our MainPage class.

    public class App
        public static Page GetMainPage()
            return new NavigationPage(new MainPage());

This application is going to require page navigation so we are creating a NaviationPage and setting its root the MainPage we just created.

I will be creating all my views in Xaml rather than in code. I highly recommend that you do the same and avoid creating your views in code where possible. This will make your application development much easier and lend itself more naturally to the binding mechanism and MVVM. Open up the MainPage.xaml and before you go any further build the solution to make sure everything builds ok.

The reason why I’m asking you to do this whilst the MainPage.xaml page is open is to show you that there is a very annoying bug currently in Xamarin Studio. If all went well there will be no compile errors at this point. Now go to the code behind of the MainPage and add a using statement to reference the Core project.

using Silkweb.Mobile.Core;

Now go back to the xaml add the following Label and Title to the xaml like this:

<?xml version="1.0" encoding="UTF-8"?>
    <Label Text="This is the Main Page" />

Now build the solution again. All is well. Now edit the xaml and change something. Let’s change the Label text to ‘Mountain Forecast’ and rebuild the solution again. Oops! 

part 2.5

What just happened here? We now get this error message:

The type or namespace name `Core’ does not exist in the namespace `Silkweb.Mobile’. Are you missing an assembly reference?

Oddly, looking at the build output it tells us that the build was successful and confirms this in the build summary.

part 2.6

And you will find that you should be able to run the application because this isn’t really an error at all.

When is an error not an error in Xamarin Studio?

When you reference another PCL library within your solution and then change some xaml. This is a known issue which has been raised on the Xamarin Forums here:

I really hope the Xamarin team will sort out soon because it’s really annoying to get these errors, especially when it places that awful error tag in your xaml. I have tried all sorts of things to figure out why this happens to avoid it but have been unable to resolve it. The only solution unfortunately is to close down the solution and reopen it, build it and the errors disappear. So go ahead and do that to get rid of these ghostly errors.

Now set the start up project to the iOS project and run up the application on the iOS simulator. We should now see our page in all its glory! 

part 2.7

This concludes this first part of this series. In my next post I will show you how to target Windows Phone using Visual Studio. I will also show you how to develop your applications using Visual Studio without purchasing the costly Business Edition of Xamarin.

3 thoughts on “Creating a Xamarin Forms App Part 2: Getting Started

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s