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:
Multimedia
Events
Animation
etc.
-> 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
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...
Sometimes, if you trigger the "movie" before it finishes loading (I think this is it) then the audio plays but the video stops playing after a few seconds. [edit: the wmv works now for me once re-uploaded it to the domain server.]
Sometimes the movie's audio continues to play even though a stop event should have triggered and it keeps playing even if you close the browser window with the Silverlight app (another browser window also has to be open). So if the video is running and you refresh the page in the browser it keeps playing sometimes (since the Stop was never issued?).
The XAML
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.
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.