Can you create the UI in Xamarin Android / iOS and the code in Xamarin.Forms?

Question

I'm new to Xamarin development and feel a little bit strange about how to design the UI interface in Xamarin.Forms (portable/shared).

If I just design the Xamarin Android or the Xamarin iOS, I can get the GUI with drag and drop to finish my UI (like in Windows Forms application) and the code for the UI is automatically generated. But in Xamarin.Forms, this one is not supported (we must use code or xaml). I understand that if we use Xamarin.Forms, the same code apply for both Android or iOS.

However it's a long approach to create the UI. Is it possible in Xamarin to create the UI in Xamarin Android / iOS project and then only do the functionality code in Xamarin.Forms (portable or shared)?

I know this is a common question but it can help many new developers either to choose using Xamarin or not...

Answer 1

Even if a nice designor was available, I would still argue that coding by hand is much more efficient : no bad code generated (exemple with constraint : no padding /margin set at the wrong place. No hardcoded size when it's not required etc).

You will have a better understanding and the learning curve is fast.

Back in the days, I started XAML with Silverlight with the amazing Microsoft UI designor : Blend. After few months, I ended up with an architecture that broke the designor (because of dependencies injected in constructor or because the designor struggled to discover controls in external assemblies). It was really painful and I lost a lot of productivity. Few months later, I was fluent with XAML and was even more productive than with a designor.

Nowadays, Visual Studio is snippet friendly for XAML control. I've created a few of them (like a grid with several column row auto, a snippet to generate the ContentPage.Resource with a style, etc).

It's a pain that is worth it. Moreover you will learn a lot a things and will be more confident in your skills.

Give it a try for few months : you won't regret it !

Last but not least, as other suggest, when building a big app, even in iOS, most developpers I know don't use designor but code everything by hand because of snippet, helpers, extension methods etc.

Answer 2

You can think design Xamarin Forms UI like design Website.

Design website

1. You knowledge HTML
2. You need web browser to review

Design Xamarin Forms.

1. You knowledge XAML
2. You need Xamarin Previewer to review (Gorilla player, xamarin live player, LiveXaml)

Answer 3

I understand that you are new to Xamarin.Forms. What I did when I was new to the framework was following a few courses on https://www.xamarin.com/university it is free for 30 days if I'm right (that must be enough to understand the basics). About the previewers I don't have good expierence with them. They are often slow or not working. For me it was often faster to just debug on the phone. Hopefully this will help you a bit.

Answer 4

Xamarin.Forms is great, for better understanding of XAML I encourage you to take the time and watch this video (https://evolve.xamarin.com/session/56e201d2bad314273ca4d813) where Charles Petzold goes into detail of how XAML works. Before Xamarin Studio o Visual Studio had a XAML previewer for Xamarin.Forms I used GorillaPlayer (http://gorillaplayer.com/) is free and works well. Also take a look in the Xamarin University and Examples. James Montemagno is a name you must research when talking about Xamarin, he did some really cool and helpfull Xamarin Nuget Packages. Hope I had pointed you in the right direction.

Answer 5

I understood perfectly your situation. A good start is a Xamarin book that you can download for free for this page https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/

If you have been developed with WPF, in Xamarin you have the same concept. A good start is trying example in working apps to understand the structure and the app lifecycle. You can find a collection of examples and code at this link. You can create a form or with XAML or in the code. There are two ways. I advice you to start with XAML and C#.

I advice you to use Portable project and in this way you can share that not just across Xamarin project but with other kind of projects (such as a ASP.NET project).

Answer 6

There is the Xamarin.Forms XAML Preview for when you are coding in XAML:

But in the end, yes, you are coding events, and data converters, etc... and even with tools like the Interface Builder for iOS, you still have to do all the coding to tie the UI together.

On a personal note: Almost ALL the groups that I have worked with do not use the GUI design tools for any apps that are larger then a screen or two. On iOS we avoid .xib & .storyboard like they are the cause of the black plague.