The familiar ASP.NET Silverlight control, which you might recognize by the syntax <asp:Silverlight>, is no longer part of Silverlight:
In the Silverlight 2 SDK and the Silverlight 3 beta, we had two ASP.NET server controls: asp:Silverlight and asp:Media. These were both controls that served as wrappers to emitting the <object> tag or other JavaScript to instantiate a Silverlight object. The <object> method is more flexible for developers on various platforms and we have decided not to include updates to these controls for Silverlight 3 SDK.
Fortunately, Microsoft has made the source available for both controls if you want to continue using them. However, if you're ready to embrace the <object> tag, read on.
Converting <asp:Silverlight> to <object>
I'll start with one of my own usages of the <asp:Silverlight> tag and demonstrate how to convert it over to the <object> tag.
Here's the <asp:Silverlight> snippet:
1: <asp:Silverlight ID="silverlightTagCloud" runat="server" Source="ClientBin/TagCloudControl.xap"
2: MinimumVersion="2.0.31005.0" />
As part of this conversion, I'll also look at setting initial parameters, which I do, in this case, in the codebehind (more generic example below):
1: silverlightTagCloud.InitParameters = "BaseUrl=" + baseUrl + ",ClientId="
2: + silverlightTagCloud.ClientID + ",TagThreshold=0,FontFamily=Arial,MinimumFontSize=13";
First, the control declaration…
If you create a new Silverlight 3 control you'll get the following default object declaration:
1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
2: width="100%" height="100%">
3: <param name="source" value="ClientBin/SilverlightApplication1.xap"/>
4: <param name="onError" value="onSilverlightError" />
5: <param name="background" value="white" />
6: <param name="minRuntimeVersion" value="3.0.40624.0" />
7: <param name="autoUpgrade" value="true" />
8: <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
9: style="text-decoration:none">
10: <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
11: style="border-style:none"/>
12: </a>
13: </object>
14: <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px">
15: </iframe>
It's a lot of lines; more than a simple <asp:Silverlight> tag, but it's the wave of the future…
One thing you'll notice is that there is no InitParams param tag. We'll take care of that in a moment. For now, though, copy the whole mess and paste into your ASP page such that you have the following (I left the ASP control at the top for reference):
1: <!--<asp:Silverlight ID="silverlightTagCloud" runat="server"
2: Source="ClientBin/TagCloudControl.xap" MinimumVersion="2.0.31005.0" />-->
3:
4: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
5: width="100%" height="100%">
6: <param name="source" value="ClientBin/SilverlightApplication1.xap"/>
7: <param name="onError" value="onSilverlightError" />
8: <param name="background" value="white" />
9: <param name="minRuntimeVersion" value="3.0.40624.0" />
10: <param name="autoUpgrade" value="true" />
11: <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
12: style="text-decoration:none">
13: <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
14: style="border-style:none"/>
15: </a>
16: </object>
17: <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px">
18: </iframe>
There's some accompanying JavaScript you get when a new Silverlight project is created, namely the onSilverlightError function and a reference to the silverlight.js file. Here it is for reference:
1: <script type="text/javascript" src="Silverlight.js"></script>
2: <script type="text/javascript">
3: function onSilverlightError(sender, args) {
4: var appSource = "";
5: if (sender != null && sender != 0) {
6: appSource = sender.getHost().Source;
7: }
8:
9: var errorType = args.ErrorType;
10: var iErrorCode = args.ErrorCode;
11:
12: if (errorType == "ImageError" || errorType == "MediaError") {
13: return;
14: }
15:
16: var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
17:
18: errMsg += "Code: "+ iErrorCode + " \n";
19: errMsg += "Category: " + errorType + " \n";
20: errMsg += "Message: " + args.ErrorMessage + " \n";
21:
22: if (errorType == "ParserError") {
23: errMsg += "File: " + args.xamlFile + " \n";
24: errMsg += "Line: " + args.lineNumber + " \n";
25: errMsg += "Position: " + args.charPosition + " \n";
26: }
27: else if (errorType == "RuntimeError") {
28: if (args.lineNumber != 0) {
29: errMsg += "Line: " + args.lineNumber + " \n";
30: errMsg += "Position: " + args.charPosition + " \n";
31: }
32: errMsg += "MethodName: " + args.methodName + " \n";
33: }
34:
35: throw new Error(errMsg);
36: }
Copy that code into your ASP.NET page's <head> section.
Next, back at the <object> tag, add a new id attribute and replace the generic "SilverlightApplication1.xap" source with the name of your Silverlight control. Also, add the new InitParams param tag as shown:
1: <object id="silverlightTagCloud" data="data:application/x-silverlight-2,"
2: type="application/x-silverlight-2" width="100%" height="100%">
3: <param name="source" value="ClientBin/TagCloudControl.xap"/>
4: <param name="onError" value="onSilverlightError" />
5: <param name="background" value="white" />
6: <param name="minRuntimeVersion" value="3.0.40624.0" />
7: <param name="autoUpgrade" value="true" />
8: <param name="InitParams" value="<%=InitParams %>" />
9: <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
10: style="text-decoration:none">
11: <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
12: alt="Get Microsoft Silverlight" style="border-style:none"/>
13: </a>
14: </object>
15: <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px">
16: </iframe>
Now, open up the ASPX codebehind file and add a definition for InitParams as well as initialization code in the Page_Load event:
1: protected string InitParams { get; private set; }
2:
3: protected void Page_Load (object sender, EventArgs e)
4: {
5: if (Page.IsPostBack) return;
6:
7: InitParams = string.Format ("Param1={0},Param2={1}", "param1", "param2");
8: }
Note that you can use this methodology to set any <param> with custom values.
Last, we no longer need a reference to the System.Web.Silverlight.dll, nor do we need the <%@ Register at the top of the aspx page.
Conclusion
It's not too difficult to switch from using the ASP.NET Silverlight control to the <object> tag. Given that Microsoft has dropped the control from Silveright, now might be the time to make the switch as part of your Silverlight 3 upgrade. Hopefully this guide will help in that process.