Saturday, January 24, 2015

Layouts in Xamarin Forms

I recently gave a presentation at the second Xamarin Hack Day in Sydney. While I spoke about iBeacons at the first hack day, this time around I spoke about the various options for laying out UI's in Xamarin Forms. For those of you that don't know, Forms is a cross platform UI abstraction from Xamarin, which translates the Forms controls and layouts into the native UI appropriate for each platform. A ListView in iOS translates to a UITableView for example. It doesn't cover all scenarios, but for the common tasks it can save a lot of time, and you can break in and out of the abstraction whenever you like.

With any new UI abstraction comes new things to learn, new quirks and tricks. Much like HTML and CSS, if you are just starting out your options for laying out your web pages are limited by how much you know. As a result, your UI's don't look as nice as they do once you learn more about the box model etc. I've noticed a similar thing happens to developers starting out with Xamarin Forms. As the documentation is still a bit of a work in progress, there can be a temptation to stick to UI's that are easy to layout, but I found once I took the time to dig in and learn more about the various controls and layouts, I was able to create much nicer interfaces.

There's no video online of this one, however you can view the slides, and the accompanying GitHub examples. I also thoroughly recommend reading the preview of Petzold's Xamarin Forms book, as it's the best Xamarin Forms UI documentation.