A Silverlight Project Template
A 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.
-
<!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" >
-
<!– saved from url=(0014)about:internet –>
-
<head>
-
-
<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.
-
// JScript source code
-
-
//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
-
<canvas x:Name="parentCanvas"
-
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).
Recent Comments