Wednesday, March 17, 2010

Let it ring - WriteableBitmapEx for Windows Phone

Actually I never heard a Windows Phone prototype ringing yet, but that's not the point of this blog post.

On Monday, March 15, 2010 Microsoft not only released the Silverlight 4 Release Candidate at MIX, they also made the first CTP of the Windows Phone Developer Tools available. The best news is, Silverlight is THE technology for Windows Phone 7 series development and the SDK doesn't cost $ 100, no, it's completely free!
 Of course I downloaded and installed the CTP right away and played around with it. First I was a bit disappointed after I realized that custom pixel shaders are not supported (at the moment) and, correct me if I'm wrong, real time camera access is not built in either, which is essential for a nice SLARToolkit Windows Phone version. BUT, it's only the first CTP and at least we have the WriteableBitmap at hand for some procedural graphics fun.

A while ago I started the WriteableBitmapEx project to make the life a bit easier when working with the WriteableBitmap. And now what would be more natural than porting it to the Windows Phone platform.
So I fired up Visual Studio 2010 for Windows Phone and set up the first real Windows Phone Silverlight project pretty quickly. After I included the original WriteableBitmapEx source code files I started the build. And it just worked, without any errors. Wow, that was an easy port.
Sure, Scott Guthrie mentioned in his keynote that the Windows Phone fully supports Silverlight, but there are actually some differences to the desktop version. Nevertheless the first developer experience was just impressive and WriteableBitmapEx for Windows Phone is actually just another build target and not a real port of the original Silverlight library.

Sample
Unfortunately the current CTP is a bit slow when it comes to real time graphics, but there is hope and the Release Notes say:
"Per frame callbacks (i.e. handling the CompositionTarget.Rendering event) should be used sparingly in this release due to less than optimal performance."
That's why I used the interactive parts of the latest WriteableBitmapEx curve sample to make a Windows Phone sample. All this was done in less than hour and most of the time was spent to arrange the controls and play with the great Windows Phone emulator.
Below is a video that shows the demo running in the emulator. Please note how the phone's back button is used to remove the last control point from the list.


Background music is Loell by mosaik.

How it works
As I mentioned above parts of the code from the latest WriteableBitmapEx curve sample were simply re-used. Furthermore I rearranged the controls for the phone's landscape mode.
The functionality of the phone's back button is implemented by adding an event handler to the Page's BackKeyPress event. The used event handler:
void PhoneApplicationPage_BackKeyPress(object sender, CancelEventArgs e)
{
    // Remove last control point from the list
    if (points != null && points.Count > 0)
    {
        points.RemoveAt(points.Count - 1);
    }

    // Refresh image
    Draw();

    // Back is handled here. Prevent that the phone returns to the home screen
    e.Cancel = true;
}

Source code
From now on you will find a Visual Studio solution and a project file for the Windows Phone version in the WriteableBitmapEx' source code repository. Starting with the next release I will also provide a ready to use Windows Phone build.

Woo Hoo!
Silverlight is becoming more and more a full multi platform technology and all Silverlight developers are now Windows Phone developers too. It's an exciting time to be a .Net developer. Awesome!

Update 03-18-2010
I changed the size of the control points to the appropriate minimum touch target size as required in the Windows Phone UI guidelines. According to it the minimum touch target size has to be 9 mm / 34 pixel and the visual size 60-100% of the touch target size.

8 comments:

  1. Hi, great post. But for a new coding for fun article, just take your writeablebitmap solution and combine it with the accelerometer of the phone!

    So by moving your arms in the air you can draw. Wouldn't that be fun?

    ReplyDelete
  2. Thanks.
    I had a similar idea, but we have to wait until we get real physical devices to use the sensors. After it's available I will surely do something with it.

    ReplyDelete
  3. Interesting, I am not an expert but I really like to read things about this topics. I've been spending a lot of time in this kind of blogs and this'll be one of the best at the list. Absolutely.

    ReplyDelete
  4. It's great to see a blog of this quality. I learned a lot of new things and I'm looking forward to see more like this. Thank you.

    ReplyDelete
  5. You please post more article on such topic ? I really appreciate it. Thanks man!

    ReplyDelete
  6. Awesome information shared about amazing technology. hope I'll see some more blogs on related topic.
    Smead office products

    ReplyDelete
  7. You made some good points there. I did a search on the topic and found most people will agree with your blog.

    ReplyDelete
  8. May I have this sample code.
    thanks.

    ReplyDelete