Introduction

This article is useful for those beginning to develop a Silverlight site using Expression Blend. Here, I have developed one simple Silverlight site for beginners. Here one video is playing with play, pause and stop facility.

Background

Those working in Expression Blend can follow this article very easily.

Using the Code

Step 1

Create a new SilverLightsite project, named SilverlightSiteVideo.

In the Project window, you can see four files.

Default.html

Page.xaml

Page.xaml.js

Silverlight.js

In Page.xaml, we are going to put the controls and we write the JavaScript code in Page.xaml.js file.

Step 2

Place a MediaElement in Page.xaml [Click on the asset library and check the “Show All” and select MediaElement control and place in Page.xaml.]

Change the name to ‘Wave” in the properties window. [In XAML, x:Name=”Wave”]

Select the source of the MediaElement under Media to the WMA file.

Now that WMA file is copied into our project automatically, switch to XAML view of Page.xaml.

And in the MediaElement, add the attribute AutoPlay=”false”.

Now the page looks like this:

Step 3

Place two TextBlocks.

Click on the first textblock.

Take Properties.

At the top, type “Play” as the Name.

Under Common Properties. Change the Text to “Play”.

Do this for the next textblock. Name and Text will be “Stop”.

Now the page looks like this:

And the total view becomes:

Step 4

Write JavaScript code for Play and Stop button in Page.xaml.js:

Take Page.xaml.js. It will look like this:

Here rootElement is the canvas.

Next, we have to find the play and stop buttons. The code for this is:

Comments and Discussions

"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997-----"...the staggering layers of obscenity in your statement make it a work of art on so many levels." - Jason Jystad, 10/26/2001