TL;DR; I published my first Windows Phone application to get familiar with the tools. It is a visual Brainfuck interpreter. The code is published on GitHub. You can get the app from the Windows Phone marketplace. These series of articles detail my experience switching to the new development platform.

NOTE: THIS IS NOT A TUTORIAL. DO NOT COPY CODE BECAUSE IT IS LIKELY THAT IT DOES NOT FOLLOW BEST PRACTICES.


Part 0 - Visual Brainfuck for Windows Phone
Part 1 - The Interpreter
Part 2 – XAML and Tools
Part 3 - MVVM
Part 4 - Animations

The articles will not quote all the code they refer to. You can view the code directly on GitHub.

   The Windows Phone emulator is pretty cool. I do not have experience with other mobile platforms but I never had a bug reproduce on the device and not in the emulator and found all the features I needed and more. Debugging on the device was also seamless and easy.

   After years of writing HTML developing UI in XAML felt strange and liberating. Many things are different in XAML but what strikes me as most important is the lack of any semantics. I am nowhere near front-end web developer (just look at the design of this site!) but I always tried to write semantically correct HTML and use the correct elements. I never put buttons in place of links or use tables for layout. In XAML you can do what your heart desires. You do not need to worry how a mobile browser will display certain element or if the search engine will be able to extract the semantic information. Every list is a listbox and this is just fine.

   It was easier for me than I expected to control the UI with code. The fact that you can control it with C# and the familiar style of property names and documentation helped a lot. I always struggle with attribute names and JavaScript functions when developing for the Web because the terminology seems strange and the signatures unexpected. For example in .NET you will never see a method like JavaScript's Array.splice function both as name and as signature. Styles in XAML are not as powerful as CSS but there are some good surprises like the fact that the properties are strongly typed.

   At first I was trying to develop an UI that was resolution agnostic and used Grids with proportions but when it came to drawing and animating the tape I gave up and hardcoded some values. I do not know if it is possible to draw in a canvas using proportions in XAML. I felt like it is not worth researching for my first app and also felt that it was not worth writing the code to do it in C# for this particular app.

   There were some weird things I would like to mention. First of all the App Bar is declared in XAML but seems to live outside of the whole XAML framework. To begin with buttons on the app bar cannot be part of databinding scenarios. In addition the tooling does not create class fields corresponding to the buttons on the app bar. You need to get the buttons with code like this:

btnRun = (ApplicationBarIconButton)ApplicationBar.Buttons[0];

But probably the most annoying thing is the fact that pressing a button on the app bar does not seem to trigger the regular page events. For example when the run button on BF for WP is pressed while the user has focused a textbox the textbox does not receive proper notification that it has lost focus. This means that if it participates in databinding scenario the ViewModel does not receive notification that the text property has changed. To work around the problem I had to declare the databinding like this:

<TextBox Name="txtCode" Text="{Binding Source, Mode=TwoWay, UpdateSourceTrigger=Explicit}" AcceptsReturn="True" TextWrapping="Wrap"></TextBox>

and manually force the databinding when the button was pressed like this:

txtCode.GetBindingExpression(TextBox.TextProperty).UpdateSource();

However this means that I have to call this method in places where the databinding would normally work. I consider the App Bar a total failure of Silverlight for Windows Phone.

   Another issue with the development framework is that the selection of controls included is pretty small. In practice it is unlikely that you will be able to develop real world app without including the Silverlight Toolkit for Windows Phone. I do not understand why these controls are not included by default. While using the Context Menu control from the toolkit I encountered strange issue. I had by mistake typed a single letter in the SnippetsListPage like this:

<toolkit:ContextMenuService.ContextMenu>
   <toolkit:ContextMenu>M
       <toolkit:MenuItem Header="Delete" Click="MenuItemDelete_Click" Tag="{Binding}" />
   </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

This did not result in a compile time error or even a warning in the text editor. The application ran and crashed with an "Unspecified Error". The call stack lead to the bowels of the XAML engine. I believe the template for this control is somehow processed at runtime. I do not know why but it resulted in really brutal WTF moment for me.

   Even with Silverlight Toolkit there are still a lot of controls missing. While there is a popup control the developer needs to create a user control representing whatever is in the popup. There is no premade confirm popup or modal popup. Stranger controls are found in the Coding for Fun Toolkit but even this collection of controls does not contain a modal popup with a cancel option. I chose to build my own but I had to handle disabling the UI and the behavior of the back button and I was too lazy to dim the background.

   On the help page I had some issue with text being cut after certain length but at that point I was in the phase where I just applied dirty fix instead of researching the problem. I just split the text into multiple TextBlocks.

In part 3 of the series I will discuss my experience with the MVVM pattern.