Click here to Skip to main content
15,893,487 members
Articles / Silverlight
Tip/Trick

Load HMTL in Silverlight

Rate me:
Please Sign up or sign in to vote.
1.00/5 (1 vote)
7 Jan 2012CPOL 13.9K   1   1
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)


Written By
Web Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralReason for my vote of 1 Not enough description. Pin
dbaechtel9-Jan-12 13:25
professionaldbaechtel9-Jan-12 13:25 
Reason for my vote of 1
Not enough description.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.