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.

Going Universal - Lifelines

Over the last month I have been writing a Windows 8.1/Windows Phone 8.1 App.  I am a lazy programmer by nature... aren't we all?  And my preference is to stick with what I know.  However, sometimes something else comes along that you just have to try out.  The benefits of write once (mostly) and deploy to multiple platforms (mostly) was too tempting to pass up.  I also decided that writing using the MVVM pattern only made sense as the whole Universal App concept works much better with the full separation of View and Model.  For the most part, historically I have stuck with more of a traditional programming model having come from a VB background.  As recently as 2011 I simply loaded a bunch of controls that didn't quite do what I wanted on a form and then wrote a bunch of code behind those controls to make them bend to my will.  But this is not the way to go in the modern world of mobile apps for the Windows Platform.  Most developers need some help to start with in the new world and want to gather all necessary information sources and resources into one place so they can really go to town.  Fortunately Microsoft has provided lots of help here, some directly and some indirectly by supporting those that can help you.  So here are my suggestions on where to start.

Phone a Friend (MVP and Ambassadors)

The plan is to start out with "How to Begin".  This was no easy task as beginning is always the most difficult part.  When I first start something new that I have not done before I go to my friend and mentor Jan Hannemann, your friendly neighbourhood Nokia Developer Ambassador and fellow Microsoft MVP.  One of the topics he is VERY strong on is the MVVM pattern  he is definitely a go-to guy in that area.  I've done it before haven't really focused on it until now.  You should visit his blog (http://janhannemann.wordpress.com/) if you want some detailed info yourself or just contact him.  He's always happy to help.  That goes for pretty much any Microsoft MVP I've ever met.

Ask the Audience (Microsoft and it's forums)

While there are many similarities to developing for Windows Phone with Silverlight there are differences.   This old dog is constantly learning new tricks.  On the Windows 8.1 side of the equation it actually works out pretty similarly.  However Microsoft has introduced quite a number of new features into the Universal App model, most of which are huge time savers for developers like me.  I used to have to either use 3rd party controls or brute force my own solution.  Microsoft has provided lots of samples to help you out.  Information in places like Stack Overflow is still pretty thin as the platform is still fairly new.  It will grow.  The sample pack currently contains at least 65 different Universal App samples covering everything from File Access to Geolocation to some Direct 3D gaming stuff.  Something for everybody.

Microsoft's Universal App Samples: http://code.msdn.microsoft.com/windowsapps/Universal-Windows-app-cb3248c3

You can also ask the audience by visiting Microsoft's developer forums.  They have endless answers to questions and the nice part is many experts are constantly monitoring the forums and will find you the answer you need if nobody else has asked it before.  I found more than a few answers in there.

50/50 (Visual Studio/Blend)

Do you use Blend?  Do you even know it's included in Visual Studio?  I must confess at first I didn't use it much purely from an ignorance point of view.  But PLEASE PLEASE PLEASE learn what it can do and get on with it.  It will make  you better, it will make your apps better and it will make you

happier (really).  If nothing else, Blend's abilities to edit templates to make XAML controls do almost anything and look almost any way you want them to is gold.  For example, I had a customer that wanted a toggle switch on their app.   Normally a toggle switch looks like this picture.  But Blend lets you do more.  If you haven't used Blend just load it up and right click and select select Edit Template or Edit other Template and you can do almost anything with it.  Basically what it does is make a copy of the underlying XAML that makes the control hum

and you can change anything.  You can then take that template pack it up and re-use it anywhere you like.  In my case I like psychedelic pink white and green.  But you can change all the little things, remove stuff you don't want and reposition things around.  Don't be intimidated by the pages of XAML created.  Just start with small things and you will learn so much in a short time.  Before you know it you'll be going after animations and other fun stuff.

Because Universal Apps are so knew there aren't the myriad of 3rd party controls so you need to make the ones provided work for you.  There are lots of really cool controls that do amazing things.  You don't need  that pesky Windows Phone Toolkit anymore.  It's all mostly included now. 

Next Up

So, what's next...  That's right, time to write some code.  Now that I have all my advisers handy, it's time to use it.  Write my first Universal App!

Moving from Windows Phone to Windows 8 Apps (The Silverlight Story)

So we begin the journey.  Last night I started investigating what I could and could not do with Windows 8.  I have a number of Windows Phone games that I was thinking to port to Windows 8.  The problem?  They use graphics in Silverlight libraries.

After much searching and gnashing of teeth I found an MSDN article that explains things far better than I ever could.

http://msdn.microsoft.com/en-us/library/windows/apps/hh465136.aspx

If you wrote your Windows Phone app using Silverlight (pretty much all WP7 was Silverlight) you CAN port it to Windows 8.  This article gives you the "search and replace" pieces you need so you don't have to pick stuff off one at a time.  Change this reference to that and so.  Read the article, life will be good.

Unless...

There is one bit of code I used from a gentleman in England by the name of Ed Smale that wrote a really slick Silverlight 3D dice simulator.  I used it (with his permission of course) in several games for Windows Phone 8.  They turned out pretty good and looked VERY good.  Ed does good work but he doesn't do Windows 8 (yet?).

Pig: http://www.windowsphone.com/s?appid=74821196-a8da-49f7-b589-e4c854ad8ee9
Two Pigs: http://www.windowsphone.com/s?appid=39018e3c-7d83-44cf-90ed-9da44fd9e95b
Stuck in the Mud: http://www.windowsphone.com/s?appid=aaabb666-17f2-4a44-b322-04b5722bf32f
Chicago: http://www.windowsphone.com/s?appid=bd300290-6d60-4d5c-9dc5-b5bae6c5ffdf

So I tried doing the conversion thing according to the library above.  Until I got to his Silverlight3D.dll library.  I just couldn't convert that.  The general rules seems to be Silverlight that looks like normal XAML will work fine.  Silverlight that looks like XNA (animation and games) will not.  You need to learn DirectX and rewrite things.

So, at least for me, that was a dead end.  I'm now faced with either doing something else (I rarely give up that easy) or doing differently.

I found on Codeplex a 3D dice simulator that I'm looking at but haven't decided on yet.  You may want to have a look.  Its DirectX and gives source code for both Windows 8 and Windows Phone 8 with a common library.

http://diceroller3d.codeplex.com/

It's pretty primitive and probably would need a lot of polishing to be used in an app but we will see where it goes.

What I think is the #1 preventable cause of WP App Cert Failure

The Disease - Certification Failure.

I am an experienced developer.  I have been writing code for more than a quarter of a century.  Let me pause for a moment... HOLY CRAP!!!  Now back to our regular programming.  As I said, I've been writing code a long time.  Mostly the final arbiter on whether I wrote good code or bad was if a customer called me up to complain or give me their visa card #.  Things are a bit different now.  Now I write awesome, fabulous code and instead of getting a customer to check it, Microsoft kindly does it for the customer in their store certification process (well, at least as a first pass).  That's really nice of them.  Well, it is until they decide my app is NOT wonderful and awesome.  I have published over 25 apps to the Windows Phone store and I STILL fail certification occasionally and there usually is no excuse except plain and simple laziness.  At least in my case, the certification failure is almost always because I forgot one of the steps in my checklist because I was in a stupid hurry to get the App in the store.  For me, at least, the #1 cause of certification failure is that stupid "light theme" on the Windows Phone.  I don't know anybody who uses the light theme but they can and sometimes I forget to check my App.

The Symptoms

Microsoft's Store certification report is quite useful.  It shows what went wrong and specifically what rule it breaks.  They then give you good steps to reproduce the problem.  If you, as the developer, have set up proper unit and functional testing before submission, you rarely should find surprises.  Out of the 26 apps I have submitted to Windows Phone I have probably had about 5 or 6 failures.  Of those 5 or 6, 90% are light theme.  You'd think I would learn my lesson.  But I don't.  Things that they note are buttons that disappear with a light theme, missing text, and entire chunks of UI that simply become essentially invisible.  Quite honestly it's embarrassing when it happens.  I should know better.  It's really easy to catch these things if you bother to check.  However to assist, I'm going to cover some stuff you can do to reduce the possibilities of it happening to you.  If you don't mind the ten to fourteen day turn around to fix that stuff and resubmit, but by all means use Microsoft as your QA department.  No need to read further.  I prefer to pass the first time in so I can start racking up those downloads.

The Medicine

First, the obvious.  Test your application.  Run through every function in BOTH themes, light and dark.  If you, like I, re-use components, build them to handle the different situations you might run into.  Most controls when dropped into your XAML designer don't need the "Foreground" and "Background" property assigned as they just default to the standard theme.  But what if your app has a background image that is pretty dark?  When a light theme is applied all the standard textblock or button will automatically switch to using "Black" for their colors.  Well, that won't be too visible on your fancy background you, no doubt, spent hours designing and creating.  So you set the foreground and background to White ensure it visible.  This code you wrote is pretty slick so you use it on another app, but that app has no background.  So when the phone user switches to "light" your text disappear.

One way to deal with this is assign "StaticResource" names using standard values.  MSDN provides a menu of theme resources from colors to fonts on this page: http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx.  You can set resources at the top of your XAML page that you can then use globally throughout your page.  In this example I'm setting the Foreground to the standard PhoneForegroundBrush which will automatically flip between black and white based on the theme.  You could just as easily put in "White" for the value of foreground.

<phone:PhoneApplicationPage.Resources>
   <Style x:Key="LabelStyle" TargetType="TextBlock">
     <Setter Property="HorizontalAlignment" Value="Right"/>
     <Setter Property="Margin" Value="15,5" />
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraLarge}" />
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
   </Style>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
    <TextBlock Style="{StaticResource LabelStyle}"
       Grid.Row="0"
       VerticalAlignment="Center"
       HorizontalAlignment="Center"
       Text="Hello World"/>
</Grid>
 

 For me, anyway, I like to make sure I have assigned values that I can then fix in just one place.

A fellow by the name of Jeff Wilcox came up with something called the Windows Phone Theme Manager which lets you globally set the theme in your app.  It's available through Nuget and lets you force your app into a particular theme.  This is for you to decide but it can let you control the effects of a user changing the theme.  Much like the Mail App is always "light" them (although this is changing) you can do the same thing to your app for either light or dark.  Read his warnings about battery consumption and overriding a users wishes.  I know that I always select dark on my phone and get annoyed with I get blasted by a bright white interface so change at your own risk.

http://www.jeff.wilcox.name/2012/01/phonethememanager/

It always comes down to testing, testing, testing...  Try all your apps functions in all the themes. If you use the Accent Brush, test against the colors available.  If you use a blue background with the accent brush used for text because you use a red accent color and think it looks cool (hey... it could happen) but somebody else prefers a blue accent color, the text is going to disappear.  But that is for another conversation!