Skip to content

Tag: xaml

Xamarin.Forms, MVVM, and Navigation

Coming from a Xamarin native background, I was not entirely familiar with the MVVM pattern prior to switching to Xamarin.Forms. The native designs for iOS and Android typically follow the MVC pattern. MVVM was designed by Microsoft specifically for applications that utilize XAML to design their UIs. If you are familiar with MVC, MVVM is not wildly different. MVVM stands for Model-View-ViewModel.

MVVM Pattern
Source: Microsoft.com

A very rudimentary way to describe MVVM is that you have your typical data models which make up the Model part of the acronym. These data models represent the objects and business logic within your application. Next, we have the View; this is exactly what it sounds like, essentially everything that is rendered on the screen is part of the View.  The ViewModel is the unique (or not so unique) aspect of the pattern. This is where all of your view logic and states are handled. Additionally, the ViewModels act as the middleman between the Views and the Models.

The main objective to using the MVVM pattern is to create loosely coupled code between the Views and the ViewModels. In other words, the Views know about the ViewModels; however, the ViewModels should not know about the Views. Additionally, the Views should not know about the (data) Models and the Models should not know about the Views, or the ViewModels. The purpose behind such a design allows developers to quickly and easily swap out Views with other Views without having to change the business and application logical. Furthermore, this design allows separate teams to work on different components of the project. For example, on a large team, designers could work on the Views of the application (in XAML without any other programming knowledge), while developers could handle the ViewModels, and Models.

Xamarin.Forms was designed with MVVM in mind due to the adoption of XAML. Most of the framework has implemented the tools necessary to utilize the MVVM pattern. However, in my opinion (and the opinion of others) one aspect of the framework design completely breaks the MVVM pattern, and that is navigation.

Xamarin.Forms handles navigation using the INavigation interface available on any Page type (aka the Views). INavigation acts as a globally available navigation stack for your entire application. You might be thinking, that’s great, what’s the problem? The main problem, is that the Views are in charge of handling navigation, not the ViewModels. This technically breaks the MVVM pattern because the Views are dictating how your application operates, not the ViewModels. Under this design, it becomes very difficult to replace a particular View without fixing the logical structure of your application.

So what’s the solution? The solution is to move all of your navigation logic into your ViewModels. In my next post, I will go into detail of how to do this using a framework called MVVM Light.

Custom App Header in Forms

iOS Navigation Bar NestedIt is safe to assume that any business with a customer facing application will want to brand their application with at least their logo. From the very onset of using Xamarin.Forms, I found myself annoyed with the lack of customizability of the navigation bar for iOS. To be fair, it is a pain to customize on the native side; however, the Forms’ abstraction removes most of your options.

NOTE: the navigation bar shows up when a Page is nested within a NavigationPage; this creates a navigation stack.

The equivalent implementation for Android is a toolbar or action bar. Within the Android project, you can customize the toolbar using the native Toolbar.axml layout file. Unfortunately, in order to customize the iOS navigation bar to the same extent as Android requires a custom renderer and a fair amount of hacking. Even with the ability to manipulate the look of the iOS navigation bar using a custom renderer, both platforms are now diverging from each other (not to mention if you support Windows). This messy solution wasn’t going to work for me. Two simple features resolved this dilemma.

I came to the realization that I could not use the navigation bar (iOS) or toolbar (Android) and maintain a unified solution between platforms. Simply put, I wanted the platform specific bars to disappear. Thankfully, Xamarin provides a simple way to turn them off. Using the static reference to NavigationPage provides the method SetHasNavigationBar. This method takes two parameters, the page the setting applies to and the boolean value.

At this point my navigation stack no longer has a header. This allows me to add a completely custom implementation that will work for all platforms. An easy way to create such a header is with the combination of a boxview, a back button, and a logo. The specifics are not important because it will vary greatly between applications. An example could look like the following:

But how do I apply this XAML to each of my pages?! This can be accomplished with a ControlTemplate. A ControlTemplate is a UI template that can be applied to any XAML page. You’ll define the template in the ResourceDictionary located in the App.xaml file. You will also include a ContentPresenter within the template. A ContentPresenter is the content area or body of the pages the template is being applied to. The ControlTemplate Key will be used to reference the template in your pages.

Once the ControlTemplate is created, we need to apply it to our Pages. This is accomplished by adding a StaticResource reference of the template Key inside our pages’ ControlTemplate property in the XAML.

iOS Custom App HeaderYou now have a fully customizable header for your application. You can add EventHandlers, Commands, or GestureRecognizers to interact with your header as needed. You will have to implement the back button logic as well.

Xamarin.Forms Structure

In the previous blog post, we created a Xamarin.Forms Portable Class Library (PCL) solution. In this blog post, we will discuss the actual file structure of that same solution and deploy it to an actual simulator.

Hello Forms Root Solution StructureAfter creating the solution, you will notice three separate projects (i.e. HelloForms, HelloForms.Droid, and HelloForms.iOS). If you are at all familiar with Xamarin native projects, the structure of the Android and iOS Forms projects are virtually identical to the native. Adversely, you will notice an additional project named HelloForms; this is the PCL.

HelloForms iOS ProjectThe PCL acts as the core of your application and will contain a majority of your code (if this is not the case, you should probably stick with Xamarin native).

Contained within the iOS project, is a file named Main.cs. This file acts as the main entry into your iOS application. Main.cs will simply instantiate our AppDelegate.cs file.

Inside our AppDelegate.cs file is where the Forms magic begins. Forms is first initialized and a new instance of the PCL’s App.cs class is loaded.

HelloForms Android ProjectBefore we discuss the PCL App.cs class, let’s switch over to see how Android launches. Inside the Android project, you will find the MainActivity.cs file. Android simplifies the process by combining the entire launch process into this one file. The MainActivity.cs file both acts as the main entry into the application and also initializes Forms and instantiates the PCL’s App.cs class. Android does not use the MainActivity.cs file as the entry point due to the name, it is used because it contains the “MainLauncher = true” attribute.

HelloForms PCL ProjectBoth platforms have now entered PCL land. If we open the PCL project, we can now look inside the App.cs file… However, an App.cs class does not seem to exist. If you recall from the last blog post, we opted to use XAML to build our UI. Therefore, App.cs is actually called, App.xaml. You will notice that there is an expandable indicator next to the App.xaml file. Once you expand the file, you will see an App.xaml.cs file nested below the App.xaml file. App.xaml.cs is the C# code behind our XAML file. Inside our code behind file, we have a constructor which sets the first page for our application, and the self explanatory OnStart(), OnSleep(), and OnResume() methods. We will use the App.xaml.cs class in later blog posts to accomplish more advanced functionality.

From the App.xaml.cs code behind, we discover that HelloFormsPage() is set as our MainPage. This is simply a template page that was created when we created the solution. We can change this later; however, let’s use it for this example. In Xamarin.Forms, pages are views that occupy the entire screen. This page is essentially the equivalent to a UIViewController’s UIView in iOS or an Activity’s View in Android. Similar to the App.cs file, the HelloFormsPage is made up of both a XAML file and a C# code behind file.

We will go much deeper into XAML in later blog posts; however, just so you can get a taste for it, open the HelloFormsPage.xaml file. You will notice on line 3 that there is a Label. Update the text from “Welcome to Xamarin Forms!” to “Hello Xamarin.Forms” (be careful, the text for this label must be encapsulated in double quotes). Save your changes.

Xamarin Studio Set As Startup ProjectWe are now ready to build and launch our application. Right click on the iOS project, and select “Set As Startup Project”. Xamarin Studio Start Debugging IconYou can now select the build and deploy icon (looks like the play icon you would find on a tv remote).  This will build the application and deploy it to an iOS simulator on your Mac. To stop the application, you can hit the stop icon in Xamarin Studio (same button location as the play icon).

To launch the Android application, right click on the Android project, and select “Set As Startup Project”. Click the play icon (aka Build and Deploy). A default Android emulator should launch.

Android HelloForms App iOS HelloForms App

Congrats on building your first Xamarin.Forms app!

Creating Xamarin.Forms Solution

In this post, we will see how to create a simple Xamarin.Forms application. We will be using Xamarin Studio as our IDE of choice; the initial setup is almost identical using Visual Studio. There is one cavate when determining your developer environment, Mac OS X is required to compile iOS applications and Windows is required to compile Windows applications (thanks Google for playing nice). In a later blog post, I will cover how to add a Windows application to an existing project created on Mac OS X using a Windows virtual machine.

To get started, first open Xamarin Studio on a Mac. From the menu bar, select File > New > Solution. The following dialog will appear. This dialog will allow you to select which project template to use for your solution. Select Multiplatform > App > Forms App and then click Next.

Xamarin Studio New Solution Choose A Template

You will then see another dialog to configure the main settings for your Forms App.

In the App Name textfield, put the name of your application. If the name of the application is more than one word,  Xamarin Studio will add dashes to the complete package name. This can have unintended consequences later on when using advanced features such as intent filtering. My recommendation is to not add any spaces using this dialog and we will fix the display name after the solution has been created (iOS: Open Info.plist > Update Application Name textfield to the desired display name | Android: Right Click on Android Project > Select Android Application > Update Application Name textfield to the desired display name).

In the next textfield, type your organization’s identifier such as a company name. It is customary to prefix the name of your organization with “com.”; the organization identifier and app name will be concatenated to make your applications’ package name (e.g. com.MyCompany.HelloForms).

Next, select which platforms you intend to target. Notice that only Android and iOS are available, this is due to the fact that we are using a Mac. We will add Windows to the solution in a later blog post.

Under the Shared Code section you have the option between using a Portable Class Library (PCL) or a Shared Library. There are pros and cons to using either option. For this example, we will use a PCL since it is the simplest of the two and is the preferred method.

Lastly, you will have the option to use XAML for building your User Interface (UI). This option does not prevent you from using C# to create some or even all your views, it simply indicates your preference. If you are not familiar with XAML, it stands for Extensible Application Markup Language and is an XML based language used to create UIs. XAML is not unique to Xamarin; Microsoft actually developed it and is used with a multitude of technologies such as SilverLight and WPF. For this demo, leave XAML left checked. Then click Next.

Xamarin Studio New Solution Configure Your Forms App

In the final dialog, you will configure your main project settings.

In the Project Name textfield, put the name of your application. This will be used as the name of your PCL project and the prefix to your Android and iOS projects (e.g. HelloForms.Droid and HelloForms.iOS).

In the Solution Name textfield, put the name of your solution. This does not have to match your project name.

Location indicates where on the file system your new solution will be located.

Version Control instantiates a local git repository inside the solution directory. We will not be using git for this demo.

Leave Xamarin Test Cloud unchecked for this demo. Click Next.

Xamarin Studio New Solution Configure Project

We now have a fully functioning application. In the next blog post, we will go over the structure of the solution in detail.