8

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...

Snostorp
  • 544
  • 1
  • 8
  • 14
gill23
  • 593
  • 1
  • 5
  • 19
  • 1
    If your design is in android/ios then your interaction with UI elements will e.g. Click events will be in android/ios only. You can put your business logic like some calculations or database or service in Xamarin Forms PCL or Shared. – Akash Amin May 19 '16 at 07:17
  • Thanks for the fast response, I think I will follow your suggestion – gill23 May 19 '16 at 07:21
  • 2
    I doubt you will get any info beyond https://forums.xamarin.com/discussion/19432/is-xamarin-forms-xaml-designer-supported-on-visual-studio. As for `help many new developers either to choose using xamarin or not`, it would probably be appropriate to quote [JulienRosen](https://forums.xamarin.com/profile/169828/JulienRosen): *If you have done any extensive XAML'ing in WPF, the designer becomes pretty useless*. – GSerg May 19 '16 at 07:21
  • Yes XAML is a pretty easy language if you know it well than you can create the design as fast as the designer. I don't think you will need one(designer). – Akash Amin May 19 '16 at 07:25

6 Answers6

13

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

enter image description here

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.

SushiHangover
  • 73,120
  • 10
  • 106
  • 165
  • Where do you get this from? – Michal Ciechan Jul 08 '16 at 16:02
  • @MichalCiechan Xamarin Studio, I just answered your question about it.... : http://stackoverflow.com/questions/38270983/preview-xamarin-form-pages/38271101 – SushiHangover Jul 08 '16 at 16:08
  • To summarize: if I am coding the UI programmatically (creating and filling the objects) instead of declarative XAML, the Previewer is of no use, am I right ? – Veverke Oct 09 '16 at 14:48
  • @Veverke Correct, the Form's XAML Previewer is strictly XAML-oriented. There are options such as `Continuous` that is a code-oriented interactive previewer: http://continuous.codes – SushiHangover Oct 09 '16 at 14:56
  • Thanks for the (quick) reply. Should be noted about *continuous.codes* that it is paid. – Veverke Oct 10 '16 at 08:00
  • this previewer or other tools are so useless when your application is complex and using DI or some 3rd party tools. only working extension is livexaml but it is not free. i dont get why microsoft cannot provide something similar to livexaml instead gives us useless tools. – Emil May 03 '18 at 10:10
2

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).

Enrico
  • 3,592
  • 6
  • 45
  • 102
1

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)
Bình Nguyễn Quang
  • 514
  • 4
  • 13
0

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.

Ignacio Lorenzo
  • 11
  • 1
0

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.

Diceble
  • 733
  • 1
  • 7
  • 27
0

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.

Nk54
  • 751
  • 7
  • 15