Feeds

Build a Silverlight media player

Going for gold

Combat fraud and increase customer satisfaction

Visual Studio shows the XAML that was generated by Blend. Whilst we could go in and start editing it directly - attaching event handlers for instance - I prefer to leave the XAML alone and do everything through script. The Page.xaml.js already defines a handleLoad function, which is the ideal place to set up the new functionality that we need to add.

The Silverlight control essentially extends the Document Object Model, so it's easy to find elements from within JavaScript:

this.playButton = rootElement.findName("playButton");
this.audio = rootElement.findName("audio");

Having found the play button, we can add an event handler:

this.playButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.play));    

The event handler instructs the audio element to begin playing.

play: function(sender, eventArgs) 
        {
                this.audio.Play();
        },

We can continue to wire up the stopButton and pauseButton in a similar way.

The play and pause buttons are mutually exclusive - having paused, you need to press play to continue - so we must swap the visibility of these two buttons at the appropriate times.

        play: function(sender, eventArgs) 
        {
                this.playButton.Visibility = "Collapsed";
                this.pauseButton.Visibility = "Visible";
                this.audio.Play();
        },
        
        pause: function(sender, eventArgs) 
        {
                this.pauseButton.Visibility = "Collapsed";
                this.playButton.Visibility = "Visible";
                this.audio.Pause();
        },

We now have a very basic player that can be run from within Visual Studio - press F5 or select Debug > Start Debugging.

Refine the design

Back in Expression Blend, let's create a storyboard that we can use to animate the artist photographs.

A storyboard describes the changes to the properties of an object over time. Here we'll hide and show the photographs by changing their opacity. This should give us a kind of slide show effect, with photographs appearing to stack on top of each other.

Click the Plus button on the Objects and Timeline window to create a Storyboard; call it doSlideShow.

Now create key frames at the points that you want to show photographs - say every eight seconds.

The first key frame at 0:00.000 should have all the photographs set to opacity zero, or hidden.

Select each of the images in turn and mark the key frame where the image opacity should be switched to 100 per cent.

The buttons above the timeline (see picture below) view allow you to test the animation - Blend automatically interpolates the opacity between key frames. You'll need to experiment, adding more key frames until you get the effect you want. I suggest adding key frames with opacity zero, one second before switch on to give a sequenced effect.

Silverlight timeline

The animation timeline in Expression Blend

Back to the developer

Storyboards can be accessed and controlled just like media elements. The animation can be stopped and started accordingly.

this.doSlideShow = rootElement.findName("doSlideShow");
this.doSlideShow.Begin()

The full code for this project is available for download here. With a few changes, though, the application can easily be hosted in the Silverlight Streaming Service.

3 Big data security analytics techniques

Next page: Wrapping it up

More from The Register

next story
This time it's 'Personal': new Office 365 sub covers just two devices
Redmond also brings Office into Google's back yard
Inside the Hekaton: SQL Server 2014's database engine deconstructed
Nadella's database sqares the circle of cheap memory vs speed
Oh no, Joe: WinPhone users already griping over 8.1 mega-update
Hang on. Which bit of Developer Preview don't you understand?
Microsoft lobs pre-release Windows Phone 8.1 at devs who dare
App makers can load it before anyone else, but if they do they're stuck with it
Half of Twitter's 'active users' are SILENT STALKERS
Nearly 50% have NEVER tweeted a word
Internet-of-stuff startup dumps NoSQL for ... SQL?
NoSQL taste great at first but lacks proper nutrients, says startup cloud whiz
IRS boss on XP migration: 'Classic fix the airplane while you're flying it attempt'
Plus: Condoleezza Rice at Dropbox 'maybe she can find ... weapons of mass destruction'
Ditch the sync, paddle in the Streem: Upstart offers syncless sharing
Upload, delete and carry on sharing afterwards?
New Facebook phone app allows you to stalk your mates
Nearby Friends feature goes live in a few weeks
prev story

Whitepapers

Top three mobile application threats
Learn about three of the top mobile application security threats facing businesses today and recommendations on how to mitigate the risk.
Combat fraud and increase customer satisfaction
Based on their experience using HP ArcSight Enterprise Security Manager for IT security operations, Finansbank moved to HP ArcSight ESM for fraud management.
The benefits of software based PBX
Why you should break free from your proprietary PBX and how to leverage your existing server hardware.
Five 3D headsets to be won!
We were so impressed by the Durovis Dive headset we’ve asked the company to give some away to Reg readers.
SANS - Survey on application security programs
In this whitepaper learn about the state of application security programs and practices of 488 surveyed respondents, and discover how mature and effective these programs are.