Load HMTL in Silverlight





1.00/5 (1 vote)
Silverlight
- 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) { //sender.getHost().Content.mySLapp.Message('sdss'); slCtl = sender.getHost(); // slCtl.Content.mySLapp.Message(data); //alert(slCtl.Content.mySLapp.MyToUpper("Test String")); } </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>