Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Silverlight

Load HMTL in Silverlight

1.00/5 (1 vote)
7 Jan 2012CPOL 14K  
Silverlight
  1. Create one XAML page:

    HTML
    <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>


  2. XAML page cs file:

    C#
    namespace HtmlExample
    {
        public partial class MainPage
        {
            public MainPage()
            {
                InitializeComponent();
            }
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                HtmlHostCtrl.Url = txtUrl.Text;
          }
        }
    }


  3. 2nd XAML Page:

    HTML
    <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>


  4. 2nd XAML Page cs

    C#
    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)
            { }
     }
    }


  5. 1 HTML page
    HTML
    <!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>

  6. Another html page:

    HTML
    <!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>


  7. Message JS file

    JavaScript
    var slCtl = null;
    function pluginLoaded(sender, args) {
        slCtl = sender.getHost();
    }
    
    function Submit1(data) {
        window.parent.slCtl.Content.mySLapp.Message(data);
    }


  8. We can also use HTML control like this:

    HTML
    <button id="SubmitButton" onclick="window.parent.slCtl.Content.mySLapp.Message('sdsds');" style="width:100;height:50">Submit</button>
    

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)