Last week at the Visual Studio Connect(); event, Microsoft announced availability of Visual Studio 2015 Preview, with support for creating native iOS, OS X, Android and Windows Phone apps in C# with Xamarin. This was just one of many announcements that made clear that Microsoft is going cross-platform, and open source, in a big way.
As a longtime Xamarin developer, it was good to see how much value and attention Microsoft gave to Xamarin in the Connect(); demos and presentations. The story is clear: use Visual Studio with Xamarin to create native apps in C# and native markup, or with Cordova to build hybrid apps in JavaScript, HTML and CSS.
In this post I will show how to get started building native apps with Visual Studio 2015 and Xamarin Forms, which is a powerful part of the Xamarin platform that was not shown at Connect();.
Here is some shared C# Xamarin Forms code for logic and UI in Visual Studio 2015, being debugged on Apple’s iPhone simulator and Xamarin’s Android Player:
But before I show how to do this, let’s talk a bit about the why.
Why Native, why Web?
As Microsoft explained quite well at Connect(), going native with Xamarin will give you apps with the best UX and it will allow you to leverage existing C# and .NET development skills. There are no technological barriers to achieving the maximum (meaning native) level of performance, stability and familiarity on each device. However, even if all your code is C#, you will have a learning curve for the native technology (mostly for UI coding/markup and UI design tools) for each platform.
Using web technology will allow you to target more platforms in addition to iOS, OS X, Android and Windows. Building hybrid applications with Cordova lets you leverage existing mobile web development skills, avoiding the learning curve for native UI technology. Web technology also makes it easier to create a UX that is consistent across platforms – meaning you may want a consistent, non-native UX – as opposed to a UX that looks and feels familiar for each OS. However, your apps will perform, look and feel suboptimal – often significantly so (for users). You may also encounter difficult challenges getting your app to work (well) on specific combinations of device, OS version and browser (component) version.
So far, my experience of the past two years has confirmed this; creating the Poollie app in classic Xamarin resulted in a good UX and grip on performance across 45000+ consumer devices running iOS, Android and Windows Phone. On the other hand, I’ve seen hybrid app teams struggling from up close, spending a LOT of time to get an app working on specific devices, where other devices with the same OS had no issue. Another big time eater is finding out which of the continuously rapidly changing multitude of JavaScript libraries work well on the mobile device mix out there, in the real world. The same JavaScript, HTML and CSS can behave very different on different browser components and devices, even if you use well known cross-platform mobile JavaScript libraries.
Enter Xamarin Forms?
I was puzzled as to why all the Connect(); demos and presentations only showed the ‘classic’ Xamarin development approach, which has existed for 2 years. Xamarin Forms was not mentioned at all, even though the Forms templates (Mobile Apps) were briefly visible in Visual Studio’s New Project dialog:
The reason I was puzzled is because Xamarin Forms makes a big difference for Native versus Web considerations, and because Xamarin Forms is particularly well suited to enterprise apps. Both excellent reasons for Microsoft to showcase this technology. Now I can think of several reasons why Microsoft chose not to do this, but I’m not going to waste your time speculating; instead I will introduce Xamarin Forms to present a more complete picture, show you how to get up and running, and let you make up your own mind J
Here is how Xamarin positions Xamarin Forms as part of the Xamarin platform:
“Use the same language, APIs and data structures to share an average of 75% of app code across all mobile development platforms. Build user interfaces with Xamarin.Forms and share nearly 100%.”
Classic Xamarin as Microsoft demonstrated it at Connect(); means that you create your client-side logic (e.g. models, services, viewmodels, navigation logic) in shared C# and you also create a separate, native UI for each platform (in C#, and/or platform specific markup: Storyboards or XIBS for iOS, AXML for Android, and XAML for Windows Phone).
Xamarin Forms was released in May 2014, six months before Connect(); as part of the Xamarin 3 announcement. Xamarin Forms adds the capability to create a shared UI – in C# or XAML. This UI is then mapped at runtime to the real native controls of each OS. Yes, that means that the same markup will result in a different (in a good way) look and feel on each OS. The UI will look, feel and perform as a native UI on each OS because it IS a native UI, like it is with classic Xamarin. Forms preserves the ability to make platform specific tweaks, such as using classic Xamarin for some (parts of) screens, wherever you want to. Forms is a non-blocking choice so it’s not a problem if it can’t do everything out of the box that you want it to.
So instead of learning and building two or three platform-specific UI technologies and markup types, you can create almost all of your UI in one UI technology. You can build an app including UI until it is almost complete, and then spend a bit of time (or let a specialist do that) to add platform specific tweaks where needed. You can imagine that from a skills perspective, this scales much better for a development company/department than classic Xamarin.
Having kicked the tires of Xamarin Forms for some time now, this technology feels capable and robust enough to be my default starting point for apps that let users view (or edit) structured data. This means enterprise apps but also a lot of consumer apps. If I had to start again today, I would build Poollie in Xamarin Forms.
So enough about the why, here is how to get started:
Basic cross-platform rig
If you want to target iOS or OS X with Xamarin, you need a Mac. This is not due to technical limitations, but due to licensing: Apple requires that you run OS X – which includes the iOS compilers and emulators that Xamarin integrates with – on Apple hardware.
As a Microsoft veteran I worked for a long time on a Windows laptop with Visual Studio and Xamarin, connected to a Xamarin Build Host on a Mac. The Mac I used for building, deploying and debugging in the iOS emulator or a physical device. However I found out that the most productive and robust setup for cross-platform app development is Visual Studio on Windows running in a virtual machine on a Mac. This is, in my experience, more productive than two non-virtual machines connected over a network.
So my basic setup is a MacBook Pro running OS X Yosemite, with a Windows 8.1 + Visual Studio 2013 + Xamarin for Visual Studio virtual machine which runs in Parallels 10 Desktop (On a Mac with 8 GB ram this works OK, but 16 GB is better). Parallels has support for nested virtualization so you can run the Windows Phone emulator (which is a HyperV virtual machine). The Coherence mode of Parallels gives each Windows app a separate Mac window and this works quite seamless and stable. You sometimes forget that you are working in two OS-es. In fact, I am writing this blog post in Microsoft Word 2013 for Windows – on my Mac.
I am also running Microsoft Office 365 for Mac and the latest Microsoft Outlook, Lync and OneDrive for Mac. Microsoft going cross-platform has made using a Mac for office work, in a Microsoft environment, a good solution.
Installing Visual Studio 2015 Preview
First, create a new virtual machine with Windows 8.1. I simply cloned my existing Windows 8.1 + Visual Studio + Xamarin for Visual Studio development virtual machine in Parallels.
Then download and install Visual Studio 2015 Preview in your new virtual machine.
Note that if you want to target Windows Phone with Xamarin Forms, you need to select the optional Windows Phone 8.0 SDK in the first Visual Studio installer. This is because Xamarin Forms currently only supports Windows Phone 8 Silverlight – the new Windows 8.1 Universal apps are not supported yet, although this is planned. For Windows Phone this is not a limitation since Windows Phone 8.1+ devices run Windows Phone 8 Silverlight apps just fine, but this does mean that you cannot target Windows Store apps with Xamarin Forms – yet.
After the first installer, you get the option to install some 3 GB of cross-platform mobile development tools with the secondary installer:
Now let’s see how Xamarin is integrated in Visual Studio 2015. This is what the C# iOS and Android project templates look like:
Notice how the name Xamarin is not mentioned? However, when you create a project using this template, you simply get a xambe page with a link to download the Xamarin for Visual Studio extension:
Installing Xamarin in Visual Studio 2015 Preview
When you follow the Download Xamarin link, you get the normal Xamarin Windows installer which installs the Visual Studio extension, as well as Xamarin Studio and all prerequisite software such as Android SDKs etc. However, when the Xamarin installer was completed, nothing had changed in my Visual Studio 2015. This had to do with the existing Visual Studio 2013 + Xamarin installation on the same machine.
If you encounter this, here is how to fix that: close all Visual Studio instances, then go to Add/Remove Programs and search for Xamarin, then run the installer from there. You can also navigate to the Xamarin.VisualStudio_3.9.41.msi located in the AppData\Local\Temp\Xamarin\downloads folder and run that.
Now choose to Change the installation:
Now make sure that Xamarin for Visual Studio 2015 is selected and finish the install:
Once this is done, start Visual Studio 2015 and presto: the Xamarin project templates are installed! Here are the templates for classic Xamarin Android:
And for classic Xamarin iPhone:
And here are the Xamarin Forms templates – the ones we are most interested in J:
Create a Xamarin Forms project
When you create a new Mobile Apps – Blank App (Xamarin.Forms Shared), you get a solution based on a Xamarin Forms Shared project:
Note that if you did not install the Windows Phone 8 SDK in Visual Studio (as I did), the solution will only contain iOS and Android client projects.
Update the Xamarin Forms NuGet packages
Even though you created your Forms project from a fresh installed project template, it is still out of date. Xamarin Forms is distributed as a set of NuGet packages. So the first thing you do after you have created a new Forms project, is to update the NuGet packages for the solution:
Now we are ready to build and run the app.
Debug the Xamarin Forms iOS project
To get the iOS project running you need to have Xamarin installed on the Mac as well, and the Xamarin Build Host must be started on the Mac, so you can connect to the build host from Visual Studio 2015. All this is the same as in Visual Studio 2013; you can read how to set this up here.
Once you have Xamarin on the Mac configured, set the iOS project as startup project, choose iPhoneSimulator as the target platform, and press Debug to build and deploy the iOS app. This is what you see when Visual Studio 2015 is debugging the default Xamarin Forms iOS project, running in the iPhone 4s simulator on the Mac:
The fact that you can see a Mac window overlapping a Windows window is a Parallels feature called Convergence.
Debug the Xamarin Forms Android project
Now, let’s get the Android Forms project running. First set the Android project as startup project.
I could not get the new Visual Studio 2015 Android Emulator running (it is a HyperV virtual machine, same as the Windows Phone emulator, so it should work in Parallels, however it started but never got to the Android home screen). Instead I chose to use the Xamarin Android Player on the Mac. This emulator, although currently in preview, was launched at Xamarin Evolve 2014 and runs natively in the Mac. It should offer better performance anyway, since it is running directly on the Mac, not as a nested virtual machine.
To connect Visual Studio 2015 to the Xamarin Android Player on the Mac, follow these instructions from Xamarin’s James Montemagno (watch him, he has lots of valuable Xamarin stuff to share). James explains how you get the emulator’s IP address from within the Android Player, and then launch the ADB command prompt from within visual studio to connect to the Android Player on that IP address. This is what it looks like:
Note that if the first connect gives an error, simply connect again. Second time works always (so far). The Nexus 4 (KitKat) device will appear in the target device list in Visual Studio; you can select it.
Now, let’s see if you can debug iOS and Android at the same time. This can come in handy when you want to debug interaction scenarios between multiple devices. In the solution properties, set Android and iOS both as startup project:
Now when you press Start, you will see:
So there you have it: Visual Studio 2015 on Windows debugging Xamarin Forms on Apple’s iPhone simulator and Xamarin’s Android Player – all running on a Mac. Cross-platform indeed.
Create a more complete Xamarin Forms example
Finally let’s modify our project to get a bit more fleshed out example. Let’s use the Xamarin Forms example from this Xamarin Sketches walkthrough (the example can be found near the bottom of the page, under the header Xamarin.Forms Sketches). Incidentally, this Xamarin Forms Sketches demo was also shown in the Xamarin Evolve 2014 keynote by Miguel de Icaza, CTO and co-founder of Xamarin.
If you look at the App.cs source in the default Forms project that we created, you see that the GetMainPage() method returns a new ContentPage:
return new ContentPage {
…
};
Now if you look at the code from the above Xamarin Sketches Forms example link, you see that it also ends by creating a ContentPage:
RootPage.Children.Add(new ContentPage {
…
});
So you can simply paste the example Forms Sketches code from the link above in the GetMainPage() method body, and instead of passing the ContentPage to RootPage.Children.Add(), return it as the method result.
You can run the example as-is or add some controls or list items. I added a Label control and a Tuple list item for myself as a developer, to show that we are doing something new here J. Here is what the modified example looks like, running:
You may notice that we build the Xamarin Forms UI in C#. Xamarin Forms also lets you create the UI in XAML, similar to Windows (Phone). However, since the Xamarin Forms XAML has neither a visual designer nor usable IntelliSense when editing the XAML XML yet, I recommend you use C# for now – it has good IntelliSense and catches errors at compile time instead of at runtime, and with the formatting as shown in the example the C# almost reads as markup.
This concludes this guide on getting started with Xamarin Forms in Visual Studio 2015. Getting your cross-platform development environment installed is quite a bit of work, but once you are past that, Xamarin and especially Xamarin Forms is a very productive way to build high-quality cross-platform apps.
If you want to kick the tires on Xamarin Forms a bit more, here are some useful links to continue:
Overview: http://xamarin.com/forms
Getting started: http://developer.xamarin.com/guides/cross-platform/xamarin-forms/introduction-to-xamarin-forms/
Free e-book by Charles Petzold: http://developer.xamarin.com/guides/cross-platform/xamarin-forms/creating-mobile-apps-xamarin-forms/
Happy App-ing!
