Software solutions for a mobile world

Xamarin Forms is a great development tool for developers doing cross platform development. Windows Phone devs can use the C# the know and love, and xaml to design their forms - so they can feel completely at home. 

But, as devs using Xamarin Forms will be well aware, there is no designer for Xamarin Forms. I have no doubt there is one in the pipeline (no inside knowledge though - just a hunch), but in the meantime we have to code the forms by hand, in code behind or in Xaml.

We are just about to embark on a large Xamarin forms project, and have a bid in for another, and obviously a forms designer would be a help. 

I thought about this for a while, and decided to try and write a conversion tool from Windows Phone forms Xaml to Xamarin forms Xaml. I did something similar when .Net first came out, writing a successful tool to convert eVB forms to .Net forms

Xamarin forms has its own controls (known as Views) with most of them having Windows Phone equivalents. TextBlock is Label, TextBox is Entry and so on. Obviously the views have different properties to the controls Margin becomes Padding, HorizontalAlignment becomes HorizontalOptions etc. Xamarin forms also has its different types of Pages and Layouts

I decided that there needed to options for the user to decide how they wanted to convert various items, such as alignments, but my code would take care of some elements automatically.

Based on this, I came up with a 'functional' screen design, which would allow (optional) entry of a namespace, choice of a Xaml form, and choice of an output Xaml form (which would default to the input + Xform.


As you can see, you can decide on a type of form, type of layout, and decide how to layout elements. Select your input form, optionally enter a namespace (defaults to the namespace in the source form) and click on 'Generate'. You can then add your newly created form and code behind to your project. 

After a couple of friends tried it against their projects (thanks Peter Foot and Steve Robbins), and based on their input I have added a 'settings' screen. 
Ignore List will 'comment out' anything in your list. They need to have a start and end so <Maps> and </Maps> for example. The code will remain in your target screen, but commented out. 
Remove List will remove any literals in the list, along with their contents, so Height will remove Height="120" for example.
Replace List will replace the item on the left with the item on the right. The current list contains the controls currently supported. If you want to add to this list, use the format 'TextBox,Entry'

All the lists can be added to and deleted from so you can fine tune the conversion. This should help cater for 'unforseen' circumstances.


As a sample, we have the original Windows Phone form, and a Xamarin form running on an Android.



Sure, not perfect, but better than writing it from scratch yourself - and the idea is that the program will be 'tweaked' as time passes. 

The original Xaml for the Windows Forms is:-


and the corresponding Xaml for Xamarin Forms:-


You can see the translation of the controls and properties. Some was 'hand crafted' such as the image source (Android doesn't allow _ in the name)


The code behind is minimal - just empty event handlers for the events we have identified. 

This is a first attempt and will be released as a free community tool. If you would like a 'beta' copy to try out, please drop me an email. It will be buggy, but I am sure we can all make it better. 

The 'beta' is now available here

Jonathan Yates has done a review of the application, which is available here. Based on feedback from Jonathan, I have fixed some bugs, and added some more functionality. Check out the new version  here. Thanks to Jonathan for the review, the kind words, and the feedback which will hopefully improve the application.

Contact

M: +44 (0)7860 907493
B:  +44 (0)1204 657497

pete@gui-innovations.com

More

Connections

   

Twitter Feed