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 selling point of my application (although it is free) is the animated tape that visually displays the execution. The tape can have thousands of cells so databinding to the whole array is out of the question. Obviously I had to databind to a small subset of all cells (this is what VisibleCells is in the code). The basic concept is to create seven cells and display only five. The first and the last cell are hidden out of view. When the tape is moved the whole region of cells is moved via animation in the appropriate direction and the hidden cell comes into view. To prepare for the next instruction the tape is moved back instantly and it is databound to a new cell window. The user cannot see that.

   All this is easier said than done. The animation was the most complex thing in BF for WP. For starters I turned off animations for delays smaller than 33 ms because with 60 FPS at which Windows Phone runs such animations simply cannot be displayed.

   The most serious problem was synchronizing the backend thread that ran the interpreter with the animations. I knew animations were nondeterministic but I thought I could cheat by adding several milliseconds to the animation timing to let it finish. It turns out that such short animations can take two times the specified duration. I had to introduce some synchronization mechanism so I exposed the SignalStartAnimation and SignalEndAnimation methods on the ViewModel which acquire internal lock on the ViewModel which blocks the execution until the animation is complete. The lock is implemented via ManualResetEvent handle. When the animation ends it manually forces databinding via this line in the View:

itTape.DataContext = ViewModel.TapeCells;

Now when I write about it this seems so simple but I spent a lot of time trying different approaches and at every time something was wrong. From MVVM point of view this is still wrong because the code that forces databinding is in the View but I am so scared to touch this code that I will not attempt to fix it.

   I was experimenting with databining in the ViewModel but then I had to move the place where I call Thread.Sleep depending on the kind of instruction the interpreter is processing. This proved much more complex. Maybe I could add databinding in the SignalEndAnimation method.

   Another visualization I implemented was the source code pointer which highlights the symbol currently executing by the interpreter. At first I thought I would just disable the TextBox and find some way to change the color of a single character… not so fast. Turns out this cannot be done with the Windows Phone TextBox control so I ended up replacing the TextBox with TextBlock and manually creating text Runs in code. This is what the SetTextBlock method does. The first Run is the code before the current symbol, the second is the current symbol itself and the third is the code after the current symbol. The Run with the current symbol is formatted in a different way. This seems like overkill for such a simple task but I could not find easier solution.

   This is the last part of this post mortem. I hope you found it useful. Expect my new app soon (i.e. whenever it is done).