How To: Integrate HTML Page in Silverlight Application

Integrating Html page in silver light application is little tricky at first. In this tutorial we will learn how to display html page in silver light application step by step.

Add following code in silver light  html page immediate before </form> tag.

<div id="BrowserDiv">
<div style="vertical-align:middle">
<img alt="Close" align="right" src="Images/Close.png" onclick="HideBrowser();" style="cursor:pointer;" />              
</div>
<div id="BrowserDiv_IFrame_Container" style="height:95%;width:100%;margin-top:37px;"></div>
</div>


Add following css code in page.

<style type="text/css">

#BrowserDiv
{
position:absolute;
background-color:#484848;
overflow:hidden;
left:0;
top:0;
height:100%;
width:100%;
display:none;
}

</style>


We need following javascript code to show and hide htm page.

<script type="text/javascript">

var slHost = null;
var BrowserDivContainer = null;
var BrowserDivIFrameContainer = null;
var jobPlanIFrameID = 'JobPlan_IFrame';

$(document).ready(function () {
slHost = $('#silverlightControlHost');
BrowserDivContainer = $('#BrowserDiv');
BrowserDivIFrameContainer = $('#BrowserDiv_IFrame_Container');
});

function ShowBrowserIFrame(url) {
BrowserDivContainer.css('display', 'block');
$('<iframe id="' + jobPlanIFrameID + '" src="' + url + '" style="height:100%;width:100%;" />')
.appendTo(BrowserDivIFrameContainer);
slHost.css('width', '0%');
}

function HideBrowser() {
BrowserDivContainer.css('display', 'none');
$('#' + jobPlanIFrameID).remove();
slHost.css('width', '100%');
}

</script>

Add reference to following jquery file.

<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

We have done with html page. Now we will move to silver light user control and open html page on button click.

Add following code in user control (main.xaml).

<Button Content="Show Html Page" HorizontalAlignment="Left" Margin="164,140,0,0" VerticalAlignment="Top" Width="117" Click="Button_Click"/>

Now add following button click handler and a helper function in main.xaml.cs to open html page.

private void Button_Click(object sender, RoutedEventArgs e)

{

ShowBrowser();

}




public void ShowBrowser()

{

try

{

string url = "http://webdesignpluscode.blogspot.com/";

HtmlPage.Window.Invoke("ShowBrowserIFrame", url);

}

catch (Exception ex)

{

throw ex;

}

}

This is all, We have done with code. Now create new folder 'Images' and place an image there 'Close.png' for close button.

Now build project and view in browser.

See Also