Creating a Simple Volume Control
One of my customers asked me how to make a volume control for his custom media play in Silverlight 1.0. First I looked to the video gallery on Silverlight.net but I didn't find a sample so I created a simple demo in about 30 minutes that shows how to do it. Here's what I came up with. Source code is attached. I took an MP3 file and some images from a trip to Tanzania that I took in 2001. It was a recording of being encircled by Maasai villagers and being sung to. You can see more sketches, watercolors, collage, photographs and audio on the web site I made from the incredible journey.
Press the red play button and then control the volume with the slider on the left. My blog skin isn't wide enough to display the whole app, so you can view it in full size here, hosted on Silverlight Streaming.
I crafted this component in Expression Blend and packaged the xaml and JavaScript for it in a .zip archive (VolumeControl.zip). I did it like this so it could be easily reused and the initial page loads quicker (less initial XAML and JavaScript). The code to put it on a page and hook it up is here:
DownloadVolumeControl() would be called from the control's OnLoad() function:
Volume_Control.Page.prototype =
{
handleLoad: function(control, userContext, rootElement)
{
this.control = control;
rootElement.findName("Play").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.PlayMedia));
this.DownloadVolumeControl();
}
Volume_Control.Page.prototype.DownloadVolumeControl = function()
{
var downloader = this.control.createObject("downloader");
downloader.addEventListener("completed", Silverlight.createDelegate(this, this.OnVolumeControlDownloaded));
downloader.open("GET", "VolumeControl.zip");
downloader.send();
}
Volume_Control.Page.prototype.OnVolumeControlDownloaded = function(sender, eventArgs)
{
var xaml = sender.GetResponseText("VolumeControl.xaml");
var js = sender.GetResponseText("VolumeControl.js");
eval(js);
var control = sender.getHost().content.createFromXaml(xaml, true);
sender.findName("VolumeParent").children.add(control);
this.VolumeControl = new Synergist.VolumeControl(control, sender.findName("Media"));
}
11/26/2007: I updated the control to add a namespace (Synergist), a status readout of the volume level (as a percentage) and a gradient fill to the volume shuttle. The attached source code has been updated as well.