Friday, May 1, 2009

Converting Silverlight Apps to WPF

Using Ariel's Simon design I built this game called Silverlight Simon. Jobi suggested making it a WPF app and then a surface version. I got it working and will do a post on it later but strictly speaking here this is how I overcame some of the issues going from a Silverlight user control to WPF.

The first thing I found out when I moved my code into Xaml was a number of things that WPF doesn't do that you can do in Silverlight.

1. there is NO VSM... at all.
2. there is no autoplay on media element.
3. no 2.5D (ie, all the plane projection stuff)
4. and all my animation calls to story boards didn't work.

When I first ported the code over I knew the VSM and 2.5d was not going to work so I started with ripping that out. the first thing that then poped up was all my animations calls. For example say I have a click event and I'm doing something like [animationname].Begin();

well that doesn't work as all my animations are 'resources' I played with this for a while and with some Dr. WPF medicine I found that I basically had to change all my animation issues to something like this:

Storyboard foobar = TopSimonGrid.FindResource("PrefsBtnPressedKey") as Storyboard;

from their I got my animations working. I then removed my auto play on the media element and it would compile. but as soon as an event tried to fire a sound I got another error. I ended up having to add

that way my sound method started working. At this point you could play the game if you could get past the fact that all the styles that used the VSM looked like crap. I know there was this codeplex project called WPF Toolkit ( ) which included a prototype VSM (Visual State Manager). I pulled it down and tried it out. The only hard part was figuring out the right name space to get my vsm: working. as it turns out it is where you would expect if it was part of WPF kind of:


With this mojo going on everything worked but my flip fx control. I couldn't find that any one get industrous enough to build the 2.5d stuff for WPF so I took the old animations from the SL2 fx control but put them in the vsm flip animations generic xaml so that it would use that instead of the 2.5d. I then had to change the content presentor to have the transforms needed and then poof like magic Silverlight simon worked like a champ.

For something extra I ripped out the WPF window chrome so Simon sits on the desktop and I found that my drop shadow on Simon was know on my desktop.

for those that are interested ripping out the chrome which is way easier then it used to be I had to add this to the window tag:

WindowStyle="None" ResizeMode="NoResize" AllowsTransparency="True" Background="Transparent"

from there you can pretty much do what you want.

ok ok ok, here is a little update. for Simon the above works fine... but for my uber tile project a few more issues came up... starting with dependency property registration sanity check....

So it is not so much a difference other then that the code that shouldn't work does in Silverlight 3 but blows up properly in WPF. take a look at this code:

public readonly DependencyProperty BackLink2TitleProperty = DependencyProperty.Register("BackLink2Title", typeof(string), typeof(MediaPlayer), new PropertyMetadata(new PropertyChangedCallback(OnBackLink2TitlePropertyChanged)));

in the named registration value you can't have two of these with the same value. Silverlight will currently over look that little indiscretion. WPF... not so much :)