Creating a Xamarin Forms App Using Visual Studio

Mosh Hamedani
A free video tutorial from Mosh Hamedani
Passionate Software Engineer and Best-selling Author
4.5 instructor rating • 20 courses • 569,575 students

Learn more from the full course

Xamarin Forms: Build Native Cross-platform Apps with C#

Learn to build native mobile apps for Android, iOS and Windows using your existing C# skills

07:25:54 of on-demand video • Updated April 2018

  • Build native mobile apps for Android, iOS and Windows using C#
  • Understand the fundamentals of Xamarin Forms and its architecture
  • Build user-interfaces with XAML and code
  • Work with images
  • Present data in beautiful, interactive lists
  • Implement multi-page apps with navigation, tabs, master/detail pages
  • Build forms and setting pages
  • Store and retrieve data from a variety of sources (file system, SQLite database and RESTful services)
  • Implement Model-View-ViewModel (MVVM) architectural pattern
English In this video, I'm gonna show you how to create a Xamarin Forms app in Visual Studio. Whether you're a Windows or a Mac user, watch this video thoroughly. So here I'm using Visual Studio 2015. Let's create a new project. Under Visual C# Templates, select Cross-Platform. For Xamarin Forms apps, we have two options here: portable class library or shared assets. The preferred way and the best practice recommended by Xamarin is a portable class library. If you want to understand the differences between these two project types, I've attached a PDF for you for further reading, but read it after watching this video. So let's go ahead with this portable class library. I'm gonna call our application "HelloWorld." OK. Now this process is gonna take a few seconds so I'm gonna pause the recording. OK, next we're gonna see this dialogue where we select the target and minimum version for Universal Windows apps. A Universal Windows app can run under Windows 10 or Windows 10 Mobile without the need to be rewritten for each. I'm gonna accept the default here. OK, our solution is ready. Now before looking at the structure of this solution, as a best practice, whenever you create a new Xamarin Forms app, right-click the Solution and go to Manage NuGet Packages for Solution. Then go to the Updates tab and make sure to select all packages and update them because Xamarin frequently releases new libraries. OK, as part of this update process, one of the older packages is going to be uninstalled, and for that you need to restart Visual Studio. So, you restart. Yes. OK, all the packages are updated properly. Now let's see what we got here. So in this solution, we have six projects. The first one is our portable class library, and this is where we're going to do most of the work. So all the code that should be shared across different platforms should be written here. And if you look inside, we only have one class: App, which is the starting point of our application. Next, we have five platform-specific projects: one for Android, one for iOS, one for Universal Windows apps which can run on Windows 10 or Windows 10 mobile, and one for Windows 8.1, and the last one for Windows Phone 8.1. So any time you want to write platform-specific code, we'll write it in these projects. Now as I explained before, the whole idea about Xamarin Forms is about code reuse. You want to write code that can run across different platforms. That's why we do most of our work in the portable class library. All these projects you see here have a reference to this class library. Now if you don't have a Mac, you're not going to see this iOS project here. Also, let's say you only want to build an app for Android and don't care about other platforms. We can simply delete these projects here, and if in the future you decide to support them, we can simply right-click the Solution, add a new project. Let's say you want to target iOS. Then under iOS, expand it, Universal, and here is the blank App template. So you just add a project to your solution and you're good to go. OK, now let's run this app. We can see that, currently, HelloWorld.Droid is set as the startup project. So if I press control and F5, it's going to be loaded in an Android emulator. Here on the toolbar, we can see the list of emulators installed on my machine. These emulators come as part of installing Xamarin. So if everything goes well during the installation, you should see quite a few emulators here. But in my case, because I'm running Windows in a virtual machine on a Mac, I had to manually install Android emulators. If you want to deploy and debug your application on a real device, you need to set it up for development first and then you can see it listed here. So you simply select it and then press control F5 to deploy and run the app on your device or F5 to debug it, and these are the shortcuts that we always use in C# development. I've attached a PDF to this lecture with additional details about setting up your Android or iOS device for development. Now let's run this app, Control F5. Now the first time you launch Android emulator, you're gonna wait quite a few minutes, even up to 10 or 15 minutes depending on your hardware. So please be patient. And here is my Android emulator, and we can see our first Xamarin Forms app is running successfully. So this app is just a single page with a label in the middle of the screen. Now your emulator may look different in terms of its size and the controls you have here, but all these are settings that can be changed when creating an emulator manually. Now let's say we want to run this app in an iOS simulator. So we right-click the iOS project and set it as a startup project. Then on the toolbar, I can either deploy it to my device because I have an iPhone or use one of the simulators, iPhone 4, 5, 6, iPad, and so on. Now this simulator actually runs on my Mac, not on the Windows, and here on the toolbar we have this icon Xamarin Mac Agent. If you don't see this toolbar, go to the View menu. Under Toolbars, select iOS. We also have a toolbar for Android but I have disabled it for now. So, with this Xamarin Mac Agent, we can select the Mac on our network that is responsible for launching the simulator. So Visual Studio talks to a Xamarin agent on a Mac in order to launch a simulator. In most cases, your Mac should be automatically detected. But if not, we can simply click add a Mac, add the IP address here, and you're good to go. Just remember, you need to install Xamarin both on your Windows and on your Mac machine. Now I can press Control F5 and this will launch my iPhone simulator on my Mac. OK, and here's the same app running in an iOS simulator. Next, I'm gonna show you how to create a Xamarin Forms app using Xamarin Studio.