Confused about how Silverlight gets onto the page
I have spent a while going over all of the examples on http://www.silverlight.net/learn/quickstarts/
And I'm still pretty lost about Silverlight. I'm not understanding exactly how it gets 'on' to the website. Like... is there any kind of tutorial that shows how you make an HTML webpage that retrieves a silverlight page and displays it, so you can work with it?
All I've had to work with s开发者_开发百科o far are the default generated .aspx files, which don't really tell me much. And even using the default 'MVC Application' generator from Visual Studio is kind of cloudy and fuddled up.
I've done some google searches and glanced around at references, but maybe I'm just kind of dumb. I'm just not getting where it all 'comes together', so to speak. Any hints? Or am I just beyond learning?
The short answer is that you include Silverlight applications in a web page by using an object tag in HTML. The web browser is then responsible for loading the silverlight application similar to the way it loads Flash applications. Check out these quickstarts for a more detailed explanation. Don't be discouraged, this is a new concept to a lot of developers :).
Here is an example of a Silverlight application being embedded in a web page:
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="HelloWorld.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"
style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376"
alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px">
</iframe>
</div>
</form>
</body>
Here is the Microsoft tutorial on Embedding Silverlight into HTML. The .xap is the equivalent to Jnlp for modern applets and .swf for Flash. The parameters can control the code and can also be updated via Javascript. The silverlight plugin within the browser executes the application code. HTML just holds it in place.
Just create a Silverlight Application and choose for it to create aHost the Silverlight Application in a Web site.
It will create a project that generates the page that contains silverlight object that loads the xap file on the client.
The xap file is located in the ClientBin, the xap file is the Silverlight application.
As long as you point the object source <param> to the path of the xap file, it should load the respective Silverlight App.
The project it creates:
Example aspx page:
<%@ Page Language="C#" AutoEventWireup="true" %>
<!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 runat="server">
<title>SilverlightApplication1</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication1.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论