Pick a Platform, any Platform – The Prestige

The last stage of any magic trick is “The Prestige”.  In illusionist terms it means we make the rabbit reappear after making it disappear, or the tiger or the lovely assistant.  In our case we are going to take use Visual Studio to do more than just create an app or application for the Windows Platform.  We are going to do so much more.  We will take an existing Windows Phone 8.0 Silverlight app and convert it into a Xamarin App allowing us to publish not only a UWP app but also an Android one and an iOS app.  I must admit I don’t know where I’ll go with this as I have not tried this before.  What follows is what I did, how I did it, and where I messed up (fingers crossed).

Part 1: The Pledge

Part 2: The Turn

Create a new Application

Rather than take my existing project and try to change it, it made a lot more sense to start with a brand new Xamarin App and layer in the code.  To do this, I opened the old WP8.0 app in Visual Studio then opened a new instance of Visual Studio for my masterpiece.  To make my life simpler and to reduce the amount of the learning curve I’m going to start with a Xamarin Forms app.  This relieves me of the need to learn pretty much anything about Android and Apple UX development.  You may need to install the Xamarin Development Tools (They are typically not installed by default in VS2015).  If you use Windows 10, right click on the Start button and select “Programs and Features”.  Find Visual Studio 2015 and click “Change”.  Scroll down until you find “Cross Platform Mobile Development” and check the “C#/.NET Xamarin” one and click “Next”.  This will get you the tools you need.  You need a bit of disk space to make it happen and it will take a bit of time to install but it’s very easy to do.

To create a new Xamarin Forms application

1. open Visual Studio 2015
2. click “New Project” in the start page
3. Expand Templates/Visual C# and Click “Cross-Platform”
4. Select “Blank App (Xamarin.Forms Shared)” and Click OK

If you choose to create the UI part of your app in Native, simply select the (Native Portable/Shared) project templates.  For our purposes though we want to keep it as generic as possible with a single UI across all platforms so we will used Portable.

Making Our App

I’m not going to go too deep into this part of the process at this time.  There are some basic things you need to know about Xamarin Forms though.  First, always remember that Xamarin Forms are NOT UWP XAML in the traditional sense.  You need to substitute the new Xamarin Forms control for something you might use in UWP XAML.  For example instead of <TextBlock/> you might use <Label/>.  The properties will be subtly different too.  Instead of a Foreground property in Label you need to use the TextColor.

These small changes could be frustrating in the beginning but most things you do in XAML you can do in Xamarin Forms and the big win is that when the app is compiled for the various platforms the Xamarin Forms controls will be compiled into their equivalent native controls for that format.  So, you end up with native apps for all the platforms but only had to create one UI.  This is a big win in my mind.

To get in-depth knowledge on Xamarin Forms controls and just about everything else you can think of to do with Xamarin.Forms, download a free copy of Charles Petzold’s book “Creating Mobile Apps with Xamarin.Forms”.

Another gotcha I encountered was with images.  When binding or trying to reference images, you have to be very conscious of the different platforms and resolutions.  Furthermore, you need to put the images you will be using in each of the platform projects rather than the shared/portable project included.  Each platform has it’s idiosyncrasies and you need to account for those.  The Xamarin web site for developers very nicely describes the issues with images.   The code is fairly simple once you know.

One other item that I missed was that Radio Buttons are not a “thing” on all platforms.  You need to think of something else if you truly want this to be cross platform.  You COULD do it but then would not look “native” on at least one of the platforms.  I used a <Picker/> for my home page.  Below is what it looks like in UWP.  Please refrain from design commentary.  I didn’t do much of that here.  This is strictly a move from plain Windows Phone 8.0 to Xamarin UWP/iOS/Android and it turned out ok.

More to come

While this concludes the magic trick, it by no means is the end.  I plan on completing this app and testing on iOS and Android.  To this point, everything I’ve done works on all three major platforms.  I still have to build the game play and the “Help” pages.  I now know that it’s not as simple as copy and paste but far easier than a complete rewrite.  I, at least, have the framework of what and where everything should go.  I know which controls work and which do not.  I know what WP80 control translates to what Xamarin.Forms control.  The rest is a walk in the park.