This is my first try of using Silverlight and it is based on the Silverlight v1.0 Beta and the first of the Silverlight Quickstarts: lesson 01. My aim is to reuse this project and use it as a scratch project for my next articles.
You will need to install the Silverlight v1.0 Beta plugin on your computer.
There are going to be only 3 files in the same folder:
- An html files that will run in the browser called index.htm.
- A javascript file which handles all the plumbing, Silverlight.js
- A xaml file called myxaml.xaml containing the content will be displayed inside the silverlight.
My Xaml called myxaml.xaml file displaying the content looks like this:
<Canvas Width="800" Height="800" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="VideoLayer">
<MediaElement x:Name="VideoElement" Canvas.Top="0" Canvas.Left="0" Stretch="Uniform" AutoPlay="True" Source="butterfly.wmv" />
</Canvas>
</Canvas>
You can play around with the xaml file and changing the different attributes of the ellipse, reload the html file to see the changes.
My HTML file (index.htm) looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SilverLight - First Try</title>
<script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
<!-- Where the Silverlight control will go-->
<div id="mySilverlightControlHost">
</div>
<script type="text/javascript">
function createMySilverlightControl()
{
Sys.Silverlight.createObject(
"myxaml.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightControl", // Unique control ID value.
{ // Control properties.
width:'300', // Width of rectangular region of
// control in pixels.
height:'300', // Height of rectangular region of
// control in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // Background color of control.
isWindowless:'false', // Determines whether to display control
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'0.9' // Control version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightControlHost");
// This function creates the Silverlight control.
createMySilverlightControl();
</script>
</body>
</html>
Once you have these files in the same folder, then launch the index.htm and if everything works ok then you should see a nice big blue circle on the page displayed.