Integrating Silverlight and HTML

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.

Html & Silverlight integration preview

  • 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.

Shantha Kumar
Shantha Kumar
Articles: 278