Today I have come up with simple post on Silverlight on integrating silverlight contents in html page and html contents in Silverlight.

The following image was the preview of our sample integration code.

• Step 1:Create a Silverlight Application Project ,
• Step 2:In the Xaml file, Add the following controls ,
<TextBlock x:Name=”SL_txtBlock” TextWrapping=”Wrap” Margin=”167,133,62,0″ Height=”45″ VerticalAlignment=”Top” d:LayoutOverrides=”HorizontalAlignment” FontFamily=”Georgia” FontSize=”13.333″ Foreground=”White” />

<Button x:Name=”SL_btn” Content=”Add Text to HTML” Margin=”129,81,0,85″ Click=”SL_btn_Click” HorizontalAlignment=”Left” Width=”144″ />

<TextBox x:Name=”SL_txtbx” Height=”29″ Margin=”167,37,62,0″ VerticalAlignment=”Top” TextWrapping=”Wrap” d:LayoutOverrides=”HorizontalAlignment” FontFamily=”Georgia” FontSize=”13.333″/>

The TextBlock control used to display the contents coming from the HTML,
Button event will updates the contents in html page
The TextBox text is sent to the html page using Button OnClick event.

• Step 3: Find the html page will Silverlight by default and then add the following html lines below the <div id=”silverlightControlHost”> … </div> tag
• Step 4:
  <input type=”text” id=”htxtbx” /><br />
  <input id=”hbtn” type=”button” value=”Add text to Silverlight” onclick=”hbtn_click()” /><br />
  <div id=”slcontent”></div>

• Step 5: First of all, we can see how we send the values from Silverlight to Html page.
  Before going to coding, we have to add System.Windows.Browser namespace as reference to the project.
• Step 6: And then add the following snippet within Button Click event in Silverlight code file,

  using System.Windows.Browser;

  private void SL_btn_Click(object sender, System.Windows.RoutedEventArgs e)
  {
  //Represents the HTML document in the browser
  HtmlDocument doc = HtmlPage.Document;
  //Add the Silverlight textbox content to the HTML page.
  doc.GetElementById(”slcontent”).SetAttribute(”innerHTML”, SL_txtbx.Text);
  }

  Adding the Silverlight textbox value to the html page within the div tag (which has the id as slcontent)…

• Step 7: Now we will see how to send the data to silverlight from html,
  At First check whether the Silverlight Object tag has the id attribute, if not add the attribute as id=”silverlightControl”
• Step 8: And the add the following javascript to the head section of the html page.
  <script>
  function hbtn_click(sender,e)
  {
  var sl_control = document.getElementById(”SilverlightControl”);
  var text = sl_control.content.findName(”SL_txtBlock”);
  text["Text"] = document.getElementById(”htxtbx”).value;
  }
  </script>

   

The hbtn_click function will be invoked when ever the button click occurs,

The first line within the function get the Silverlight control using id,_

control.content.findName(”SL_txtBlock”); used to the get the control with in the Silverlight by using controlname,

text["Text"] = document.getElementById(”htxtbx”).value, which assign the value of textbox in html page to Silverlight TextBox Control.

 For that, we need to combine all required java script and Xaml files (used to display the Silverlight content) in to single assembly without any dependent files. It makes sense to embed the Xaml and java script file as a resource and reference it in programming using the WebResource.axd handler mechanism for extracting embedded resources.

I list out the following steps to add the Silverlight Content to SharePoint WebPart,

1.      Create a Webpart project and create or add the required java script and Xaml files to the project.

I used three files, are Silverlight.js, Scene.js and Scene.xaml

2.      Set the BuildAction property to “Embedded Resource” in properties window for each java script and Xaml.

This will use to include the files as Resources in an assembly.

3.      Add the assembly-level attribute System.Web.UI.WebResource to grant permission for these resources to be served by WebResource.axd and to associate MIME type for the response.

 [assembly: WebResource("Ktskumar.SLContent.Silverlight.js", "text/javascript" )]

[assembly: WebResource("Ktskumar.SLContent.Scene.js", "text/javascript")]

[assembly: WebResource("Ktskumar.SLContent.Scene.xaml", "text/xml")]

Ktskumar.SLContent represents the namespace, Now JavaScript and Xaml files are compiled into my assembly as embedded resources.

4.      Now, we can use the RegisterClientScriptresource() method of the Page.ClientScriptManagerclass to rendered the page with the referenced files.

 this.Page.ClientScript.RegisterClientScriptResource(GetType(), “Ktskumar.SLContent.Silverlight.js”);

this.Page.ClientScript.RegisterClientScriptResource(GetType(), “Ktskumar.SLContent.Scene.js”);</span

Include the above lines in the PreRender method to register the javascript files for the webpart.

5.      Add the following lines to the RenderWebPart method to host the <div> tag and call the Silverlight content to the webpart,

 string strLoad = “Silverlight.createDelegate(scene, scene.handleLoad)”;

output.WriteLine(“<div id=’” + this.ClientID + “‘ Style=”Width:500px;Height:200px”>”); 

output.WriteLine(“<script type=’text/javascript’>”);          

output.WriteLine(“if (!window.Silverlight)”);

output.WriteLine(“window.Silverlight = {};”);

output.WriteLine(“Silverlight.createDelegate = function(instance, method) {”);

output.WriteLine(“return function() {”);

output.WriteLine(“return method.apply(instance, arguments);”);

output.WriteLine(“}}”);

output.WriteLine(“var scene = new Scene();”); 

output.WriteLine(“Silverlight.createObjectEx({”); 

output.WriteLine(“source: ‘” + this.Page.ClientScript.GetWebResourceUrl(GetType(), “Ktskumar.SLContent.Scene.xaml”) + “‘,”); 

output.WriteLine(“parentElement: document.getElementById(’” + this.ClientID+“‘),”);

output.WriteLine(“id: ‘” + this.ClientID + “_ctrl’” + “,”);

output.WriteLine(“properties: {width:’100%’, height:’100%’, version:’1.0′ },”);

output.WriteLine(“events:{ onLoad: “+strLoad+“, onError: null  },”);

output.WriteLine(“context: null”);

output.WriteLine(“});”); 

output.WriteLine(“</script></div>”);

 Now you can install webpart to the SharePoint and see the Silverlight contents present in the SharePoint WebPart.

Coming soon, I will upload the source code for this webpart and more activities to come on Integrating the Silverlight with SharePoint. So always tuneup this blog.

Click here to download the source code for the above example.