- Create one XAML page:
<UserControl x:Class="HtmlExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:HtmlExample="clr-namespace:HtmlExample" mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Style TargetType="TextBlock" x:Key="StyleText">
<Setter Property="FontFamily" Value="Lucida Sans Unicode"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="#800000FF"/>
<GradientStop Offset="1" Color="#80FFFFFF"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Style="{StaticResource StyleText}" Text="Url:" Grid.Column="0" Margin="5"/>
<TextBox TextAlignment="Left" VerticalAlignment="Center" Text="http://www.jeremylikness.com/" x:Name="txtUrl" HorizontalAlignment="Stretch" Margin="5" Grid.Column="1"/>
<Button Click="Button_Click" HorizontalAlignment="Center" Grid.Column="2" Margin="5">
<Button.Content>
<TextBlock Style="{StaticResource StyleText}" Text="Load" Margin="5"/>
</Button.Content>
</Button>
</Grid>
<Border CornerRadius="20" Margin="5" Grid.Row="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="1" Color="Blue"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<HtmlExample:HtmlHost Grid.Row="1"
x:Name="HtmlHostCtrl"
Margin="40"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HostDiv="htmlHost"
Url="http://localhost/TestWebApplication/default.aspx"/>
</Grid>
</UserControl>
- XAML page cs file:
namespace HtmlExample
{
public partial class MainPage
{
public MainPage()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
HtmlHostCtrl.Url = txtUrl.Text;
}
}
}
- 2nd XAML Page:
<UserControl x:Class="HtmlExample.HtmlHost"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border Grid.Row="0">
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Submit" Click="Button_Click" />
</Border>
<Border Grid.Row="1">
<Grid x:Name="LayoutRoot"
HorizontalAlignment="Stretch"
MinWidth="100"
MinHeight="100"
VerticalAlignment="Stretch"
Background="Aquamarine">
</Grid>
</Border>
</Grid>
</UserControl>
- 2nd XAML Page cs
namespace HtmlExample
{
public partial class HtmlHost
{
private const string IFRAME =
@"<iframe height=""100%"" width=""100%"" marginheight=""1"" marginwidth=""1"" src=""{0}""></iframe>";
private const string ATTR_INNER_HTML = "innerHTML";
private const string ATTR_LEFT = "left";
private const string ATTR_TOP = "top";
private const string ATTR_WIDTH = "width";
private const string ATTR_HEIGHT = "height";
private const string ATTR_VISIBILITY = "visibility";
private const string VISIBLE = "visible";
private const string HIDDEN = "hidden";
private const string PX = "{0}px";
private HtmlElement _div;
private double _width, _height;
public static DependencyProperty HostDivProperty = DependencyProperty.Register(
"HostDiv",
typeof(string),
typeof(HtmlHost),
null);
public string HostDiv
{
get { return GetValue(HostDivProperty).ToString(); }
set
{
SetValue(HostDivProperty, value);
if (!DesignerProperties.IsInDesignTool)
{
_div = HtmlPage.Document.GetElementById(value);
}
}
}
public static DependencyProperty UrlProperty = DependencyProperty.Register(
"Url",
typeof(string),
typeof(HtmlHost),
null);
public string Url
{
get { return GetValue(UrlProperty).ToString(); }
set
{
SetValue(UrlProperty, value);
if (!DesignerProperties.IsInDesignTool)
{
_div.SetProperty(ATTR_INNER_HTML, string.Format(IFRAME,value));
}
}
}
public void Show()
{
_div.RemoveStyleAttribute(ATTR_VISIBILITY);
_div.SetStyleAttribute(ATTR_VISIBILITY, VISIBLE);
Application.Current.Host.Content.Resized += Content_Resized;
LayoutRoot.SizeChanged += LayoutRoot_SizeChanged;
_Resize();
}
private void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
_width = e.NewSize.Width;
_height = e.NewSize.Height;
}
private void Content_Resized(object sender, System.EventArgs e)
{
_Resize();
}
public void Hide()
{
_div.RemoveStyleAttribute(ATTR_VISIBILITY);
_div.SetStyleAttribute(ATTR_VISIBILITY, HIDDEN);
Application.Current.Host.Content.Resized -= Content_Resized;
LayoutRoot.SizeChanged -= LayoutRoot_SizeChanged;
}
private void _Resize()
{
var gt = LayoutRoot.TransformToVisual(Application.Current.RootVisual);
var offset = gt.Transform(new Point(0, 0));
_div.RemoveStyleAttribute(ATTR_LEFT);
_div.RemoveStyleAttribute(ATTR_TOP);
_div.RemoveStyleAttribute(ATTR_WIDTH);
_div.RemoveStyleAttribute(ATTR_HEIGHT);
_div.SetStyleAttribute(ATTR_LEFT, string.Format(PX, offset.X));
_div.SetStyleAttribute(ATTR_TOP, string.Format(PX, offset.Y));
_div.SetStyleAttribute(ATTR_WIDTH, string.Format(PX, _width));
_div.SetStyleAttribute(ATTR_HEIGHT,
string.Format(PX, _height));
}
public HtmlHost()
{ HtmlPage.RegisterScriptableObject("mySLapp", this);
InitializeComponent();
if (DesignerProperties.IsInDesignTool)
{
return;
}
Loaded += (o, e) =>
{
_width = Width;
_height = Height;
if (_div != null)
{
Show();
}
};
}
[ScriptableMember]
public void Message(string eventData)
{
}
private void Button_Click(object sender, RoutedEventArgs e)
{ }
}
}
- 1 HTML page
<!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>
<title>HtmlExample</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);
}
var slCtl = null;
function pluginLoaded(sender, args) {
slCtl = sender.getHost();
}
</script>
</head>
<body>
<form id="form1" runat="server" style="height: 100%">
<div id="silverlightControlHost">
<div id="htmlHost" style="visibility: hidden; position: absolute;">
</div>
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/HtmlExample.xap" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<param name="onLoad" value="pluginLoaded" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.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>
- Another html page:
<!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>
<script src="../MessageComm.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<button id="btn1" onclick="Submit1('Hello');">
sdsdssd
</button>
</body>
</html>
- Message JS file
var slCtl = null;
function pluginLoaded(sender, args) {
slCtl = sender.getHost();
}
function Submit1(data) {
window.parent.slCtl.Content.mySLapp.Message(data);
}
- We can also use HTML control like this:
<button id="SubmitButton" onclick="window.parent.slCtl.Content.mySLapp.Message('sdsds');" style="width:100;height:50">Submit</button>