While never a UI programmer or UX/UI designer, I’ve used or been exposed to several UI/layout/formatting systems over the years: LATEX, Tkinter, MFC, Scaleform, HTML/stylesheets, several in-house systems, EZGUI and uGUI in Unity, etc. And no matter what, it seems like the UI of every project ends up horribly out of control. Occasionally (often?) no attempt is made to embrace a sensible workflow or sanely design/organise the UI. But, even when MVC or some other established design pattern is attempted it usually fails.

More often than not it’s due to lack of really understanding the model, developers taking shortcuts to "save time" (this is really a production failure), or a disconnect with the pattern in the heat of implementation. But, I think a framework or environment (i.e. lack of process) that permits such transgressions is just as much to blame.

One of the things that initially attracted me to Xamarin was the ability to develop multi-platform native apps in a language we were already using for other things- C#. Additionally, via Xamarin Forms their embrace of MVVM (wikipedia) similar to WPF. While I don't believe in silver bullets, I do like investigating the approaches taken by different frameworks.

Invariably, any UI-oriented project needs superfluous animation to give it flair. Spurned by this post I decided this was a good opportunity to investigate ways of translating design requirements into concrete implementation using Xamarin’s framework targeting MVVM. Particularly looking at how it enables for creating a mostly data-driven UI, and permitting UI prototyping or UX/UI iteration de-coupled from writing code (an insurmountable obstacle to most non-programmers for some reason- although that’s a post for another day).

There’s lots of basic tutorials on getting a button on screen etc. so I’m not really covering that and assume you already have a basic understanding of Xamarin Forms. I want to reference some of the various other sources I’ve looked at, how and why I was trying to compose things, and the problems I ran into. For reference, this is all in the context of a companion app prototype I'm writing for our in-development PC/XboxOne MMOFPS. Because it's still under-wraps I obviously can't post screenshots, but I'll try to present (carefully scrubbed) code.

This series is broken into three parts: basics, intermediate, and finally visual aspects where I tie everything together for my fabulous programmer UX.