This blog post is about how to develop a small Silverlight (the new MS plug-in for Rich Interactive Applications (RIAs) on the web) application and get it running inside this post. The demo app is quite simple, it has a button that pop ups the Silverlight logo when it is pushed.
Install development environment
For development of Silverlight apps the Orcas edition of VS is required plus some additional Silverlight packages, which can be downloaded from the Silverlight web site: the runtime 1.1 alpha, development tools for VS Orcas and the SDK for the necessary documentation and samples.
Using one of the Expression designer tools is optional but if you want to some fancy design stuff a designer is really a must. For this project I used Expression Blend 2 May Preview as the older version doesn't support Silverlight.
Design with Expression Blend
To get to know a bit about Silverlight and the graphical design possibilities using Expression Blend I used the great tutorials of nibbles tutorials. Playing with these tutorials gives you a great insight in using Blend to create graphical assets and use them in you app.
For this applications I've created the round button as a user control in a separate assembly. By adding some animations the button changes color when the mouse enters, and transforms a little smaller when you click it to create a button down effect. The rest of the app, including an animation to pop up the picture, is designed on the page.xaml, which is generated when you create a Silverlight app in Visual Studio. To use the button (from the separate assembly) on the page you have to define a namespace in the main canvas of the page.xaml to include the dll:
Now you can add the button by including the namespace prefix:
<Canvas x:Name="buttonCanvas" Canvas.Left="15" Canvas.Top="55">
Unfortunately there is a little problem now, the page.xaml doesn't open in Blend anymore because it cannot find the button. At this moment I don't know how to fix this yet. I worked around it by adding the button at the last moment, when I didn't need Blend anymore.
Animations and Events
The timelines that were recorded in Blend (see the XAML file) have to be connected to the mouse events of the Canvas object. The MouseEnter and MouseLeave events are left out of the code below because it is pretty much the same.
public class SilverPlayButton : Control
private FrameworkElement implementationRoot;
private Canvas _button;
private Storyboard _mouseDown;
System.IO.Stream s = this.GetType().Assembly
implementationRoot = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());
// Assign private variables
_button = implementationRoot.FindName("button") as Canvas;
_mouseDown = implementationRoot.FindName("mouseDown") as Storyboard;
// Add eventhandlers
_button.MouseLeftButtonDown += new System.Windows.Input
void _arcButton_MouseLeftButtonDown(object sender, System.Windows.Input.MouseEventArgs e)
// Start animation
The last thing to do is to add an eventhandler for the button click in the page.xaml to start the animation of the picture.
public partial class Page : Canvas
public void Page_Loaded(object o, EventArgs e)
PlayButton.MouseLeftButtonDown += new MouseEventHandler(PlayButton_MouseLeftButtonDown);
void PlayButton_MouseLeftButtonDown(object sender, MouseEventArgs e)
Running Silverlight in dasBlog
Now you can add a div to your blog post that acts as the host of the Silverlight app (note that you add the path to the js files):
And it should work...
Update: Removed the demo from this post because it doesn't work anymore with the new SL versions.