Xamarin: Skinning an app for different clients using Appearance and themes

In my app I need to have the ability to re-skin the entire UI based on the type of user who is logged in and the client they belong to.  I want the UI to be the same across the board and only a re-skin applied.

There are a variety of ways to achieve this which i will go through then tell you the one i chose using UIButton as an example.

Background image overwrite.

Create high quality background images for each item needed.  For a UIButton you would need both a ‘normal’ and a ‘pressed’ image.  Also add in @2x retina images. Some free UI packs are available online. Here

ButtonPack

This works well when you have a willing and skilled designer who can whip these up in Illustrator and slice them up.  You also need a set design that has been agreed upon.  This is more of a waterfall approach taken by some design houses.  The problem is these images are static and don’t allow easy customization, tweaking or experimentation especially when playing around trying to optimize a UI.

UIAppearance

In iOS 5 UIAppearance  was introduced that allowed the default look and feel of an item to be overwritten.  This meant you could create a new Appearance for a button and ALL buttons in your app would change to the new look.

blue_button

Here you see a normal button

Added UIAppearance code.

brown_button

New button look.  ALL buttons would now have a brown title.

This is currently how the Xamarin Theme Components implement their styling and there is also the AppearanceWhenContainedIn to specify a specific view to apply the styling to.

The problem with this is the styling information is held in a Theme.cs code file and you cannot easily create multiple button styles.

Essentially there is not enough separation between design information and Structure information for my liking.

What we want is a system like HTML (structure) and CSS (style). WPF did this well loading up different ResourceDictionaries and style attributes.  iOS doesn’t do this particularly well so i will need to use a third party library to do this.

Solutions

I have come across the following solutions to this problem that all allow styling of a UI based on stylesheets.

  • Pixate – Originally a kickstarter project to solve the design separation program in iOS.  Mature and simple.  Recently released free.
  • NUI – Open source.  Native iOS but no direct Xamarin support so require bindings.

In the end I chose Pixate as it seems to be the most mature and simplest to implement.  In my next post I will go through a basic tutorial of how i use the system.