A Silverlight Project Template
Saturday, September 29th, 2007A full description of what you need to do to add Silverlight to a web page is described in the Silverlight QuickStart Guide at
http://silverlight.net/quickstarts/silverlight10/FileSetup.aspx
I used the default Silverlight Project item in Visual Studio (Visual Studio 2008 beta 2 and Silverlight 1.1 Alpha Refresh) to generate the following example files which I’m calling a Silverlight Template.
TestPage.html is the main entry point for the web page.
<html xmlns=“http://www.w3.org/1999/xhtml” >
<!– saved from url=(0014)about:internet –>
<head>
<title>Silverlight Project Test Page </title>
<script type=“text/javascript” src=“Silverlight.js”></script>
<script type=“text/javascript” src=“TestPage.html.js”></script>
<style type=“text/css”>
.silverlightHost { width: 640px; height: 480px; }
</style>
</head>
<body>
<div id=“SilverlightControlHost” class=“silverlightHost” >
<script type=“text/javascript”>
createSilverlight();
</script>
</div>
</body>
</html>
It references Silverlight.js and TestPage.html.js and embeds the Silverlight control on the page.
Silverlight.js is a Javascript helper file that enables Silverlight content to be viewed on multiple platforms and handles everything from checking if the correct version of Silverlight is installed to ensuring that the control is inserted correctly. It is available from the Silverlight Software Development Kit (SDK) and copied into the project location when using Visual Studio.
TestPage.html.js is an auto-generated Javascript file which contains the function createSilverlight.
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
Silverlight.createObjectEx({
source: “Page.xaml”,
parentElement: document.getElementById(“SilverlightControlHost”),
id: “SilverlightControl”,
properties: {
width: “100%”,
height: “100%”,
version: “1.1″,
enableHtmlAccess: “true”
},
events: {}
});
// Give the keyboard focus to the Silverlight control by default
document.body.onload = function() {
var silverlightControl = document.getElementById(‘SilverlightControl’);
if (silverlightControl)
silverlightControl.focus();
}
}
The createSilverlight method is called to insert the Silverlight control onto the web page. If you want to insert more than one Silverlight control onto a web page there are instructions in the Silverlight QuickStart guide mentioned above or there is another approach described at
http://blog.paranoidferret.com/index.php/…/how-to-embed-silverlight-into-a-webpage/
And last, but not least, we have the XAML file which describes the content of the Silverlight control
xmlns=“http://schemas.microsoft.com/client/2007″
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”
Loaded=“Page_Loaded”
x:Class=“Silverlight_Template.Page;assembly=ClientBin/Silverlight_Template.dll”
Width=“640″
Height=“480″
Background=“Black”
>
</canvas>
This sample is using C# for the code behind so there is an associated DLL (created by building the project) which is located in the ClientBin sub-directory (relative the the HTML file not the XAML file).
Start Slide Show with PicLens Lite
