Property Bindings in XAML

This was so easy that it’s quite embarrassing that I hadn’t figured it out earlier. To my defense, I’m still learning this stuff. 🙂

One thing that I have always liked about Qt Quick is how easy it is to make property bindings. Also the syntax is very simple, so doing bindings becomes a second nature.

Below you can see a very simple piece of QML code where the text property of text2 is bound to the text property of text1. If the text of text1 changes, so will the text of text2.

import QtQuick 1.0

Rectangle {
  Text {
    id: text1
    text: "hello world"
  }

  Text {
    id: text2
    text: text1.text
  }
}

Somehow I had missed that you can actually to exactly the same kind of control to control binding in XAML code. I have been binding data to e.g. lists from a datamodel, but the most basic use case had escaped me, until now.

...
  <TextBlock x:Name="text1" Text="hello world" />
  <TextBlock Text="{Binding ElementName=text1,
                            Path=Text}" />
...

Very simple once you know how.

Mixing Silverlight and XNA with some physics

I just hit the submit button for my second app to Windows Phone Marketplace. If I made EasyNote to learn the basics of Silverlight, the new app, Newton’s Gadget, was an attempt to dive into the world of XNA.

In Mango it became possible to mix Silverlight and XNA in the same scene, so of course I had to try it out. I had also been wanting to test out the C# port of Box2D physics engine, and implementing a simple Newton’s cradle app seemed like a nice opportunity to try that out as well.

Although Windows Phone now supports mixing Silverlight and XNA, the default Silverlight/XNA project template does not have them both in use on the same page. This is, however, possible through the use of UIElementRenderer class. Even if it is a bit complicated, everything that needs to be done to implement such a UI is fortunately explained in MSDN.

Lot's of XAML with some XNA in between - the settings panel of Newton's Gadget

 

While implementing the app one thing started to bug me a lot: The inconsistency between different Windows platforms on what you can do with XAML. For instance, I first tried implementing fading the settings panel in and out through the use of triggers on a Button. There’s lots of examples on attaching animations to triggers on controls (for example here). After banging my head on the wall for some time and doing a bit of googling it turned out that this approach does not work on WP. HNNNNNNNNNNGH. MSDN could use some improvements in how they document the compatibility of the articles on different platforms. I’m sure that this is something that will get better, but at the moment it is quite annoying.

(I eventually ended up implementing the animation in C# by creating a new Storyboard() and adding a new DoubleAnimation() to it.)

Cannot import wsdl:portType

Here’s something that took a lot longer than it should have. I wanted to try out the Bing Translator API in a Windows Phone application. Easy, yes? Well, quite easy actually after one thing that caused a huge amount of trouble.

So, to use the API in my WP application, I first need to add a service reference to the Bing Translator API. Adding a service reference is quite easy, just right-click on the project name and select “Add Service Reference…”. Set the address to http://api.microsofttranslator.com/V2/Soap.svc and press Go. Visual Studio will find the service and after specifying a namespace (TranslatorService in my case) and pressing OK the service reference will be added.

HOWEVER.

The problem

In my case what happened was that I started getting weird warnings and errors, like the ones below:


Custom tool warning: Cannot import wsdl:portType
Detail: An exception was thrown while running a WSDL import extension: System.ServiceModel.Description.DataContractSerializerMessageContractImporter
Error: Could not load type 'System.Runtime.Serialization.DataContractSet' from assembly 'System.Runtime.Serialization, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e'.
XPath to Error Source: //wsdl:definitions[@targetNamespace='http://api.microsofttranslator.com/V2']/wsdl:portType[@name='LanguageService']



Custom tool warning: Cannot import wsdl:binding
Detail: There was an error importing a wsdl:portType that the wsdl:binding is dependent on.
XPath to wsdl:portType: //wsdl:definitions[@targetNamespace='http://api.microsofttranslator.com/V2']/wsdl:portType[@name='LanguageService']
XPath to Error Source: //wsdl:definitions[@targetNamespace='http://tempuri.org/']/wsdl:binding[@name='BasicHttpBinding_LanguageService']


And finally compiling the project failed with the following error:

Custom tool error: Failed to generate code for the service reference 'TranslatorReference'. Please check other error and warning messages for details.


Great. The compiler output is not very helpful (at least for me), and for some reason Internet wasn’t very helpful either.

The solution

After a lot of head-scratching I stumbled upon popup menu entry “Update service reference”. After clicking on that Visual Studio did something and the errors disappeared. I still don’t really know what the problem was and how it got fixed, but at least everything works now. 🙂

Things worth knowing

As said in the previous post, the overall development experience on Windows Phone is quite good, but there are some things that didn’t work as I expected. When I started to develop what eventually became EasyNote I ran into couple of surprises that caused some head-scratching and furious googling. To save myself from having to search again for the same solutions in the future I’m listing them here, starting with the following 4 items.

As far as I know everything below is valid also in Mango.

Silverlight for Windows Phone Toolkit

The set of Silverlight controls included in Windows Phone SDK is missing some often used controls like date and time pickers, context menus, toggle switches and so on. Luckily Microsoft provides a free set controls in the form of Silverlight for Windows Phone Toolkit (WP Toolkit from now on)

Windowsphonegeek has nice set of articles describing how to use the controls: http://www.windowsphonegeek.com/articles/21-WP7-Toolkit-in-Depth-articles-covering-all-controls

Page transition animations

Ok, so you create a new application using the data bound application template. Once the project is created you run it in the emulator and click on an item on the list. Another page appears but there’s no animation, WTF? In my opinion having consistent transition animations is one of the most important things in making your application feel like part of the platform instead of a “second class citizen”.

WP Toolkit makes it relatively easy to enable the animations. To animate Page transitions, install WP Toolkit and follow the instructions on Windowsphonegeek: http://www.windowsphonegeek.com/articles/Windows-Phone-7-Navigation-Transitions-Step-By-Step-guide

Orientation change animations

Making the application support landscape orientation is very easy, just set SupportedOrientations="PortraitOrLandscape" in the XAML of each PhoneApplicationPage that you want to automatically switch between portrait and landscape. Unfortunately the change is not animated by default.

David Anson from Microsoft has created a couple of different orientation change animations, which are available in this blog post:
http://blogs.msdn.com/b/delay/archive/2010/09/28/this-one-s-for-you-gregor-mendel-code-to-animate-and-fade-windows-phone-orientation-changes-now-supports-a-new-mode-hybrid.aspx.

The solution above has one big problem, it conflicts with the page transition animations implemented by WP Toolkit. However, it is quite easy to modify the animations to work with WP toolkit as well, as described in this post: http://mobileworld.appamundi.com/blogs/andywigley/archive/2010/11/24/best-of-breed-page-rotation-animations.aspx.

Toolbar icons

EasyNote has a Toolbar on each Page, so the next problem was getting icons for the Toolbar buttons. I’m no artist so this was turning into an actual issue. Well, it turned out that the SDK already contains a set of most often used icons that can be used in the applications. The icons can be found from here:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons

If you use the icons from “dark” folder, Toolbar will even automatically colorize the icons in case the user switches to light style (making all UI elements white instead of the default black).

Getting started

As expected, Microsoft has quite excellent tools available for Windows Phone 7 development. So far I have been quite happy with the free Windows Phone SDK (download from here). Of course for more advanced use cases you may want one of the non-free Visual Studio editions, but for my needs the free tools have been more than enough. Also MSDN documentation is good, although I find mixing desktop and mobile documentation a bit confusing at times.

So the tools are great, but how about development experience in general? I must admit that I haven’t become a huge fan of XAML. It just does not feel intuitive or clean, unlike e.g. QML. That said, it’s quite bearable and gets the job done. And once I get over defining the UI and move on to programming application behavior, all is fine. I’m no expert but C# has been pretty sweet so far.

Hello world!

A new blog, amazing.

This blog is the sister of http://qtsource.wordpress.com/. With Nokia’s new smartphone strategy I have started to study also Windows Phone development, and as always it’s nice to vent your feelings or boast about new cool things somewhere. Since the qtsource blog concentrates on things related to Qt, I thought that creating a new blog for Windows Phone-related stuff is the best way to go.

Enjoy!