Silverlight Beta RC 1.0 sample - drag and drop and more

This all started off when I was trying to work out a way to use the MSDN Silverlight drag and drop example to implement drop targets in order to create a drag and drop quiz sample. Couldn’t find and good examples in Silverlight so once I had the basics figured out then decided to try something fun.

This may be elementary for most of you but has been fun learning for me. I wanted to show some of the basic precepts of Silverlight all in one spot:

-> View the Toucan Silverlight sample (Note - I've updated to RC code and fixed a few items . Also had to re-add the xaml mime extension back on the hosting control panel [.xaml application/xaml+xml]. Another issue remains: the video cuts off after a few seconds and then will not restart. Will work on that as time allows and get back to you. Again - the video issue was with the file somehow, not Silverlight. Reloaded original video and it is working)

-> Download the sample package TBD

silverlight sample

Everything was done using the Microsoft Expression Blend May Preview (except the video from YouTube and the vinyage background :)). The Toucan was made in Expression Design and used the nifty Edit > Copy XMAL feature to paste into the Blend XAML window. Oh, the HTML BG is from a quickstart sample.

Some Buggy stuff...


The XAML follows but first a look at the Canvas in Blend. The elements set to hidden are not shown but this screenshot shows an animation object (the sheet) waiting offstage for a user triggered event.

UI from Blend

The JavaScript

First off I’m not a programmer so there has to be a lot of room for improvement in the JavaScript but it still seems to work well enough. What I would do probably  as a start (besides having a programmer completely rewrite the code and add slews of comments : )) is to draw the actual targets on the canvas and use a little routine to do the math of the target area and position instead of hard coding in the coordinates. Then one could drag the targets around during design time without worrying about having to hand change them in the code.

Here's the humble code.