Silverlight - Browser interaction

Reminder to myself

• Silverlight - How to use managed code to manipulate HTML DOM?
  • How to interact with the DOM of the hosting page from Silverlight?
    
• Silverlight – How to call a JavaScript from Silverlight
  • How to open a new browser window in code?
  • What about "htmlWindow.invoke" print from Silverlight?
    
• Browser – How to call a Silverlight function?
  • How to tell the Silverlight control to show next customer details from the HTML page?

All this is part of the Html bridge API of Silverlight, that allows talking to the browser
http://msdn.microsoft.com/en-us/library/cc645076(VS.95).aspx

 

How to use managed code to manipulate HTML DOM?

Add that to the HTML page or (ASPX page)

<div id="message"> 
    This is a placeholder ...
  </div> 

Call that from Silverlight – C#

private void SendMessage(string message)
        {
            HtmlDocument doc = HtmlPage.Document;
            HtmlElement element = doc.GetElementById("message");

            if (element != null)
            {
                element.SetProperty("innerHTML", message);
            }
        }

        private void button4_Click(object sender, RoutedEventArgs e)
        {
            SendMessage(textBox1.Text);
        }

 

 

How to open a new browser window in code?

In C#

if (HtmlPage.Window != null)
       {
           
           HtmlPage.Window.Navigate(
               new Uri(urlToBrowseTo),
               "_newWindow", 
               "toolbar=1,menubar=1,resizable=1,scrollbars=1,top=0,left=0");
       }

 

 

What about "htmlWindow.invoke" print from Silverlight?

Yeah that works… but its better to use the built in Printing API in Silverlight 4… PrintDocument etc.. more here from Shawn on Printing 

Note

Printing is still not very nice in Silverlight 4, basically you print a Bitmap (Large, huge and you lose font scaling etc…)

In Silverlight - C#

if (HtmlPage.Window != null)
            {
                HtmlPage.Window.Invoke("print");
            }

 

Test application in browser

 

Print preview invoked by HtmlPage.Window.Invoke(“print”)

 

 

How to call a Silverlight function from JavaScript?

Silverlight – C# – Create a class that exposes some methods to call from JavaScript

public class SalaryCalculator
    {
        [ScriptableMember()]
        public string CalculateSalary(string username)
        {
            decimal salary = WebService.GetSalaryForUser(username);
            return string.Format("{0:c}", salary);
        }
    }

Silverlight – C# – Expose the class via the HtmlPage class

private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            //Set up some scriptable managed types for access from Javascript.
            SalaryCalculator salaryCalculator = new SalaryCalculator();

            HtmlPage.RegisterScriptableObject("SalaryCalculator", salaryCalculator);
        }

In your HTML add the following – This will save the reference to the Silverlight object for later usage

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="ClientBin/SilverlightApplication-with-Browser.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50401.0" />
            <param name="onLoad" value="pluginLoaded" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>

JavaScript - that saves reference to Silverlight and calls function / method

<script type="text/javascript">
        var silverlightControl = null;

        function pluginLoaded(sender, args) {
            silverlightControl = sender.getHost();
            alert(silverlightControl.Content.SalaryCalculator.CalculateSalary("Peter Gfader"));
        }
    </script>

 

 

from
http://www.silverlightshow.net/items/Interaction-between-Silverlight-and-HTM.aspx

and from
http://forums.silverlight.net/forums/t/21257.aspx

and some is “stolen” from
http://www.davidezordan.net/blog/?p=700