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:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myctrl="clr-namespace:SilverlightDemoClasslib;
assembly=ClientBin/SilverlightDemoClasslib.dll"
...
>
Now you can add the button by including the namespace prefix:
<Canvas x:Name="buttonCanvas" Canvas.Left="15" Canvas.Top="55">
<myctrl:SilverPlayButton x:Name="PlayButton"></myctrl:SilverPlayButton>
</Canvas>
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;
public SilverPlayButton()
{
System.IO.Stream s = this.GetType().Assembly
.GetManifestResourceStream("SilverlightDemoClasslib.SilverPlayButton.xaml");
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
.MouseEventHandler(_arcButton_MouseLeftButtonDown);
}
void _arcButton_MouseLeftButtonDown(object sender, System.Windows.Input.MouseEventArgs e)
{
// Start animation
this._mouseDown.Begin();
}
}
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)
{
InitializeComponent();
PlayButton.MouseLeftButtonDown += new MouseEventHandler(PlayButton_MouseLeftButtonDown);
}
void PlayButton_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
popupImageAnimation.Begin();
}
}
Running Silverlight in dasBlog
That is not a real problem because, from a server point of view, Silverlight is just a bunch of javascript code. To get it running you copy the ClientBin folder (including the dll's), page.xaml file and the javascript files (Silverlight.js and TestPage.html.js) to the root of your web folder. However, because I didn't want the root of my web server to be filled with these kind of files I created a separate ClientScripts folder for the xaml and js files. When you do so you have to make a change in the TestPage.html.js, which has a reference to the page.xaml:
function createSilverlight()
{
Sys.Silverlight.createObjectEx({
source: "ClientScripts/Page.xaml",
...
}
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):
<script src="ClientScripts/Silverlight.js" type="text/javascript">
</script>
<script src="ClientScripts/TestPage.html.js" type="text/javascript">
</script>
<div id="SilverlightControlHost">
<script type="text/javascript">createSilverlight();</script>
</div>
And it should work...
Update: Removed the demo from this post because it doesn't work anymore with the new SL versions.