Code Interaction in Silverlight

So far, you have seen how a Silverlight application can reach into the browser to perform navigation and manipulate HTML elements. The one weakness of this approach is that it creates tightly bound code–in other words, a Silverlight application that has hard-coded assumptions about the HTML elements on the current page and their unique IDs. Change these details in the HTML page, and the Silverlight code for interacting with them won’t work anymore.

One alternative that addresses this issue is to allow interaction between code, not elements.

For example, your Silverlight application can update the content of the HTML page by calling a JavaScript method that’s in the page. Essentially, the JavaScript code creates an extra layer of flexibility in between the Silverlight code and HTML content. This way, if the HTML elements on the page are ever changed, the JavaScript method can be updated to match at the same time and the Silverlight application won’t need to be recompiled. The same interaction can work in the reverse direction–for example, you can create JavaScript code that calls a Silverlight method that’s written in managed C# code.

In this article, we’ll learn how Silverlight can fire off JavaScript code,and how JavaScript code can trigger a method in your Silverlight application.

Calling Browser Script from Silverlight

Using the Silverlight classes in the System.Windows.Browser namespace, you can invoke a JavaScript function that’s declared in a script block. This gives you a disciplined, carefully controlled way for Silverlight code to interact with a page.

For example, assume you have this function defined in the <head> section of your HTML page:

<script type="text/javascript">
function changeParagraph(newText) {
var element = document.getElementById("paragraph");
element.innerHTML = newText;
}
</script>

To call this method, you need to use the HtmlWindow.GetProperty() method and pass in the name of the function. You receive a ScriptObject, which you can execute at any time by calling InvokeSelf().

ScriptObject script = (ScriptObject)HtmlPage.Window.GetProperty("changeParagraph");

When you call InvokeSelf(), you pass in all the parameters. The changeParagraph() function requires a single string paragraph, so you can call it like this:

script.InvokeSelf("Changed through JavaScript.");

Calling Silverlight Methods from the Browser

This process is a bit more involved. In order to make it work, you need to take the following steps:

  1. Create a public method in your Silverlight code that exposes the information or functionality you want the web page to use. You can place the method in your page class or in a separate class. You’ll need to stick to simple data types, like strings, Boolean values, and numbers, unless you want to go through the additional work of serializing your objects to a simpler form.
  2. Add the ScriptableMember attribute to the declaration of the method that you want to call from JavaScript.
  3. Add the ScriptableType attribute to the declaration of the class that includes the scriptable method.
  4. To expose your Silverlight method to JavaScript, call the HtmlPage.RegisterScriptableObject() method.

Provided you take all these steps, your JavaScript code will be able to call your Silverlight method through the <object> element that represents the Silverlight content region. However, to make this task easier, it’s important to give the <object> element a unique ID. By default, Visual Studio creates a test page that assigns a name to the <div> element that contains the <object> element (silverlightControlHost), but it doesn’t give a name to the <object> element inside. Before continuing, you should create a test page that adds this detail, as shown here:

<div id="silverlightControlHost">
<object data="data:application/x-silverlight,"
type="application/x-silverlight-2-b1" width="400" height="300"
id="silverlightControl">
...
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>

After you’ve named the Silverlight control, you’re ready to create the scriptable Silverlight method.

To create this example, you need the custom page class shown here. It includes a single scriptable method, which is registered when the page is first created:

[ScriptableType()]
public partial class ScriptableSilverlight: UserControl
{
  public ScriptableSilverlight()
  {
    InitializeComponent();
    HtmlPage.RegisterScriptableObject("Page", this);
  }
  [ScriptableMember()]
  public void ChangeText(string newText)
  {
    lbl.Text = newText;
  }
}

When registering a scriptable type, you need to specify a JavaScript object name and pass a reference to the appropriate object. Here, an instance of the ScriptableSilverlight class is registered with the name Page. This tells Silverlight to create a property named Page in the Silverlight control on the JavaScript page. Thus, to call this method, the JavaScript code needs to use the find the Silverlight control, get its content, and then call its Page.ChangeText() method.

Here’s an example of a function that does exactly that:

<script type="text/javascript">
function updateSilverlightText()
{
var control = document.getElementById("silverlightControl");
control.content.Page.ChangeText(
"This TextBlock has been updated through JavaScript.");
}
</script>

You can trigger this JavaScript method at any time. Here’s an example that fires it off when a paragraph is clicked:

<p onclick="updateSilverlightText()">Click here to change the Silverlight
TextBlock.</p>

Now, clicking the paragraph triggers the updateSilverlight() JavaScript function, which in turn calls the ChangeText() method that’s a part of your ScriptableSilverlight class.

Example : here

Hope this helps !!!

Jay Ganesh (.j.)

Shout it

Animation in Silverlight

In this Article, you will be learning the fundamental concepts of Animations in Silverlight Application, which includes Animation Types, namespace details, classes, objects used, implementation of different types of animations with XAML and with C# code.

Table of Content:

  1. Overview
  2. Introduction to Silverlight Animations
  3. What is Silverlight Animation?
  4. What is the namespace used in Silverlight Animations?
  5. Timeline
  6. What are the Types of Animations in Silverlight?
  7. Define Animation types
  8. What is Storyboard?
  9. Storyboard Properties
  10. Storyboard Methods
  11. How to implement the Animation?
  12. What are the important properties/Methods used in the Animation?
    1. Duration
    2. BeginTime
    3. AutoReverse
    4. RepeatBehavior
    5. FillBehavior
    6. SpeedRatio
  13. How to trigger the Storyboard Begin event with XAML?
  14. Example of ColorAnimation
  15. Example of DoubleAnimation
  16. Example of PointAnimation
  17. Example of Animation with Code behind
  18. Animation in XAML versus Animation in Code
  19. Start, Stop, Pause, and Resume an Animation

Read Full Article -> click here

Hope this helps !!!

Jay Ganesh

Shout itkick it on DotNetKicks.com

Important Silverlight/WPF tutorials by Anoop Madhusudanan

1. Silverlight and WPF Behaviours and Triggers

The objective of this article series is to give a quick overview of Behaviors, Triggers and Actions in Silverlight and WPF. Together, they enable a great deal of design time interactivity for your UI. They also make possible re-use and re-distribution of interaction logic.

Read more

2. WPF Extensibility Hacks or WEX – Includes EventTrigger, ReactiveTrigger, InvokeMethodAction, InvokeCommandAction etc.

A set of extensibility hacks for WPF. A few interesting triggers and actions, including EventTrigger, ReactiveTrigger, InvokeMethodAction, and InvokeCommandAction. Also allows invoking Triggers and Actions based on Conditions.

Read more

3. Silverlight Experimental Hacks (SLEX) – EventTrigger, PropertyTrigger, ReactiveTrigger, InvokeMethodAction, StoryBoardAction, etc. for Silverlight

A set of Silverlight Experimental Hacks (1) A custom implementation of EventTrigger and PropertyTrigger (2) Invoking methods in your view model in MVVM (3) Conditionally invoking triggers and behaviors (4) ReactiveTrigger for exporting your custom events.

Read more

 

Hope this will Help

Jay Ganesh

How to Programmatically detect Silverlight version?

Two questions that often arise when building Silverlight based websites are:

A. How do I detect if Silverlight is installed on a visitor’s browser?

B. How do I detect what version of Silverlight is installed on a visitor’s browser?

The answer to A is relatively simple since Silverlight.js (the standard Silverlight javaScript include file) contains a function that we can use. The function is called isInstalled and it returns true/false. You can use it the following way to detect if there is any Silverlight version installed:

<script src="Silverlight.js" type="text/javascript"></script>

var isSLInstalled = Silverlight.isInstalled(null)

The answer to B is a little more complex since for some reason there is no direct way to get Silverlight’s version number. Basically the only documented way to answer this question is to repeatedly call isInstalled with different version numbers until you get the right version.

Example:

Silverlight.isInstalled(‘3.0’)

Silverlight.isInstalled(‘2.0’)

Silverlight.isInstalled(‘1.0’)

Read Full article: click here

Related useful post: How to add Silverlight version detection to Google Analytics ??

WPF vs. Silverlight

Microsoft feels that user experience is important, and invested in multiple technologies to promote better user experience.  Both WPF and Silverlight use XAML (Extensible Application Markup Language) under the covers. 

Let’s look at some of the different characteristics of each technology: 

WPF:

  • Ships as part of the .NET Framework (version 3.0 and onward)
  • Runs as Windows application or as web "browser application" (called XBAP, for "XAML Browser Application").  Note that XBAPs run only in Internet Explorer with .NET 3.0 and in both Internet Explorer and Firefox with .NET 3.5.  
  • Runs on Windows machines only (Windows XP, Windows Server 2003, Windows Vista, and Windows Server 2008)
  • Richest functionality, including 3D graphics

Silverlight:

  • Ships independently
  • Runs in web browsers only (Internet Explorer, Firefox, Safari)
  • Runs on Windows or Mac operating systems (also on Linux via Moonlight, which is an open source implementation of Silverlight based on Mono)
  • Functionality is a subset of WPF’s feature set

When should you use each?  The maddening answer is (of course): it depends! 

WPF is a more mature technology and was designed with a richer feature set.  It also has the advantage of being able to run in a browser or as an installed Windows-Form-type app. 

Silverlight has a broader reach.  You can access Silverlight from many operating systems and web browsers

The most important reason to choose one over the other should be based on the intended audience for the application.  For example, if a corporation is designing an application for internal use only and every employee has Windows XP as the company standard OS, then go with WPF to leverage the richer feature set.  If a corporation is designing an external-facing website, then Silverlight is the better choice because potential customers can access the website from a variety of different operating systems and browsers.