Native Cross Platform UI Ideas for iOS, Android, Windows Phone with Xamarin

For many developers using C# and coming from the modern UI apps on Windows, developing cross-platform UI design with the best usability for Windows, iOS and Android presents an interesting challenge. First, they feel like they are coming to a more ‘traditional’ UI: let’s face it Microsoft team has created some very advanced and neat design concepts with the modern apps: with Modern design language, minimalism, panorama, motion animations and pivot. How do you translate that into iOS and Android?

Luckily, Xamarin team has done a lot of research porting and thinking through many of these ideas. Xamarin Forms are based on XAML and work on iOS, Android and Windows Phone natively. Here’s some interesting ideas to keep in mind building a cross platform app with Xamarin Forms:

Is cross-platform UI achievable and does it work fast and look native? Thanks to Xamarin team’s efforts the answer to this is yes! You can write UI code that will look and feel native with native speeds on iOS, Android and Windows Phone.

Things to remember: Forms markup uses XAML, but Xamarin team chose to use objects from iOS and Android stack. So instead of StackPanel you get StackLayout, TextBlock is Label. Attributes also resemble those of Android AXML: Visibility becomes IsVisible (we actually like that, it eliminates a converter which otherwise needs to be used on each boolean property). Background color property becomes BackgroundColor, Foreground property becomes TextColor, ForegroundColor etc depending on the context. In other words: instead of cut and paste from Windows Phone you need to really update your XAML. Which makes a lot of sense, Xamarin team chose to use Android/iOS UI elements in XAML.

Xamarin also figured out a very smart strategy wrapping native controls, while maximizing code re-use. On the screenshot below, Xamarin Forms maps control renders as a native Android, iOS and Windows Phone map on each platform.

 

Source: Xamarin: Controls Gallery

Leave a Reply

Your email address will not be published. Required fields are marked *