This blog post as with all my blog post not only tells a legitimate use case but it also provides training aid not only to myself but to all that visit my blog site. This post will look at Xamarin as a technology for Mobile App development as well as Xamarin.Forms which sits on top of the Xamarin platform, that will be the first part of the series. In this first part specifically we will look into the architecture of a Xamarin.Forms App originating from the Mac Side as the experience is different from a Xamarin.Forms solution originating from the Windows Side. We will go into details as to how Views (Controls), Layouts, and Pages are coded to present a usable Mobile App to the end user, specifically mixing an matching Navigation Pages, Master Detail Pages, Tabbed Pages and different controls, with Stack Layouts.
In the second part of the series we will take the skin/skeleton we create in the first part and tie in Windows Azure Mobile Services (WAMS) by way of adding Pages to consume the data coming from a WAMS database along with ViewModels with services to handle the connectivity and CRUD capabilities to the back end and Pages.
This series is “so far” split into two posts
Part 1: this post
You can get all the code that this series will highlight in my GitHub Repo here. I encourage you to fork, clone and extend this work and learn from it. You should be able to take the code “as is” and plug it into your environment and press “F5” and make it work, the only caveat is that I will more than likely replace my WAMS client id and client secret in my ViewModels with fictitious information so my Azure tenant does not get hit that much. All you will need to do is replace it with your own WAMS instance keys.
Create your Xamarin.Forms App
There are several guidance and help aids both from Xamarin website and out there on MSDN Channel 9 and YouTube that will get you all the foundation information you need about Xamarin and Xamarin.Forms, I will skip that in this post. Lets pick it up from the moment you open up Xamarin Studio and create a Xamarin.Forms App. Now, we should note that by doing a Xamarin.Forms App this is by definition a Cross Platform “NATIVE” application you are building and lets also qualify this as a Shared Project as opposed to a Portable Class Library Project (PCL), you will find that most of my examples uses Shared Project with compiler directives rather than PCLs, I prefer to use them and I have argued why a few times, we can discuss this in the comments section if you like.
What you see below by the numbers are
- A folder within the project that houses the Shared Code that the rest of the Platform Specific code will use
- A folder(s) within the project that hold the Platform specific code for both iOS and Android (the highlighted/bold folder is always the one that is set to Startup Project)
- Unit Test folder to validate the code written
You will also notice and as I have mentioned before that I use a Shared Project rather than a PCL, when you do that you get a folder structure as you see below. Take a look at the class defined as well, notice it is a public class of App. For all purposes, this is the starting point of your Mobile project and if you did this project in a Windows side via Visual Studio this file called XamarinPagesDemo.cs (which takes its name from the project name) is called App.cs This file as you can see calls on :
- Page – Content Page
- Layout – Stack Layout
- Controls (views) – Label
and what it does is launch a page that has 1 text in the center (left, top, right, down) that says “Welcome to Xamarin Forms!”
The amazing thing here is that the template and helper code that is provided with the project, allows you pretty much to press “Build/Run/F5” and have an App that will work right off the bat. Below you are seeing just as much from the iOS Simulator.
and with only changing the Startup Project to Android, we can run the app again and see what it looks like with the same code on an Android device as you see below.
So from all the above you can see how easy it is to spin up a cross platform mobile application with little or no effort that works “natively” on both iOS and Android. Lets take this and extend it.
Basics around Controls, Layouts and Pages
Well the first thing I want to do is take all that visual element code from out of the App.cs file and use that file as a pointer to a properly architected pattern, I use MVVM,
Model – where I keep my Data Object
View – where I have my Pages (Screens if you will that you will see on your Mobile Device)
ViewModel – where I keep my Data Services/ Data Layer Abstractions (Services so to speak)
and as you can see from the below screenshot under the XamarinPagesDemo folder where the App.cs file is, I have created a folder called Views (1) and I have created a class file that is called HomePage.cs
the first thing we do is add a reference to Xamarin.Forms via our using statement (1) and (2) we inherit from Content Page, in doing so, we can now have this as an available screen for our Cross Platform App.
As you will also see from other guidance from Xamarin, Channel 9, and YouTube you will have to learn and use some of the nuanced skills from Mobile App development to gain a better user experience, below
(1) I am adding padding and specifically Device Platform (3) directives specifically for iPhone since as in the case for that platform you need to adjust to accommodate the icons and items that are at the top of iPhones like the phone carrier info, and other things. By adding a padding for iOS of “20” we do just that. We are also adding a Title (2) as well, this will more come into play when we do a Master/Detail Navigation Page.
so now that we take care of that bit of scaffolding/wiring up, lets make it look somewhat pretty and functional. So, Im going to use a image from when I was in London speaking at the SharePoint Evolutions Conference from my hotel room, it’s the one picture I have using the Xamarin monkey… and we will use this as a splash image
and we will talk about these into detail in the below images by the numbers
- new-ing up a image and setting its location relative to the page and device its on, as well as the source of the image, notice here I am pulling the source straight from the internet, this is VERY IMPORTANT, remember I am in my shared code and this image is going to show up on each respective device but yet still I am setting the source in a shared medium. I will contrast this later when I have a tabbed page and I have icons for Tabbed Controls but that time I have the images local on the device even though I reference and new up the controls in Shared Code.. stay tuned
- new-ing up a label just to set a message underneath the image
- new-ing up a button with all those properties you see there
- adding all these controls (views) in a new StackLayout in the order you see them stacked.
Now every button needs to be clicked right, so I am wiring up a click event handler and I will take care of the logic after I build the page that I will be pushing to on the button click as you see below
but before we do that, lets pause to take a look at the work we have so far before we complicate it with more elements. To do that, lets look at the page and App class that is the main entry point of the mobile applications, notice below we comment out what was originally there and we replace the MainPage to call a newed up HomePage that we created earlier and above as seen in (1) below
below is what you get from the iOS Simulator when it is running, note the image, then the label test and then the button way at the bottom. Pretty cool huh? So far we have seen this as a Content Page, but we can do some real cool stuff now to make this more of a useful App
Now we will wrap the HomePage [Content Page] inside a Navigation Page which basically acts like a Master/Detail page where the secondary page will have a inherent link to take you back to the original master page. Notice a few things here in (1) I now have a call to NavigationPage object that takes as a parameter the Master Page it will load. Notice also in (2) the Title property of what was in Home Page above sits on top of the Screen.
Now what I have done and I will call it out below is I have now added a Navigation.PushAsync call against a new page I have called Master Page, this will be a Tabbed Page as you will see later. The point here being I have a Master/Detail (Navigation) page call a page that is going to call a Screen that will be a Tabbed Page
Below is the Master Page, and two other Pages called C# page and XAML Page, these will be the calling tabbed page that MasterPage.cs will have…
below is whats inside my XamlPage but the way all this magic happen stems from…
how MasterPage.cs is wired up. Look at (1) below and you will see that in this case Masterpage inherits from Tabbed Page and in the constructor, we have two children that calls those other two pages and sets…
- Title – Which will be noted under the Tabbed Icon
- Icon – Which references an image file included in each instance of a mobile platform as you will see later
Note below that this is the Android Project and inside the Resources folder under the Drawable sub folder we have two .png file
and note below in the iOS project we have under the Resources folder two files as well, the same files actually as in the Android project, so here as oppose to how we handled the Splash Image with the Xamarin Monkey, we are including these files locally.
This time lets look at the app working in an Android Emulator as seen below
and when you click on the Master Page button we we get pushed to the Tabbed Page and the page that is the active one has that turquois bar and also note at the top under the tool bar, you have a “Back Arrow” and…
clicking on the individual Tabs you can go back and forth between the two pages referenced in the Tabbed page.
Notice one thing to drive home that this is a truly native application, the Tabbed Controls in the iOS App is at the botton of the page, the Icon is present along with the Title, and in the Android, the Text is there but no Icon..
So in this post, you have seen how easy it is to spin up a Mobile Application that is Cross Platform in nature (in this case iOS and Android) and how we can customize all of this using C# instead of as in the case of iOS (SWIFT and Objective-C through XCode) and Android (Java via Eclipse or even Visual Studio). We learned how we can extend this to make it more useable by adding different type of Navigation such as Master Detail and Tabbed.
We will now add specific Pages (Screens) that will tie back to a backend WAMS solution doing CRUD operations to a SQL Azure database, we will also add ViewModels that will be the data services used to connect, authenticate, and do the communications at the data layer to the backend Database. All this will be using Models completing the MVVM pattern we will be employing in this Mobile App using Xamarin.Forms, the Model will have the Data Objects that are synonymous to the data schema of the tables in the SQL Azure Database.
Again all this code is available for you in my github repo here