Microsoft has recently released the beta version of Silverlight. For those unfamiliar with what Silverlight is, it is essentially a plug-in technology to create web pages and web applications that look much closer to desktop applications. It appears to combine the best of AJAX, DHTML, and Flash/applet technologies by providing stunning visual graphics, animations, programmability, and .NET integration that is compatible with many different web browsers. In a nutshell, it runs .NET in your web browser.
Silverlight is expected to include its own SDK of built-in graphical controls (buttons, drop-down lists, grids, etc). However, this article touches the very beginning of using Silverlight with standard HTML controls; using it more as a replacement for Ajax and DHTML to enhance a standard web page, rather than taking over the entire HTML screen with animated graphics.
If you have not yet installed the Silverlight web browser plug-in, you will be prompted to do so after clicking the submit button in the demo.
Making this effect is fairly easy. You begin by creating a very simple XAML file using a text editor or Microsoft Expressions. The below code was created with Expressions and tweaked with Notepad.
In general, this XAML defines a basic white rectangle that is made invisible with opacity. It also defines a simple animation that slowly alters the opacity of the rectangle until it is fully visible. The rectangle will be placed over an HTML form element to provide the fade effect.
A few important notes about the above XAML. A trigger is implemented on the animation “Timeline1” so that we can catch the “Completed” event, which signals the end of playing an animation.
An important note is that we have modified the createSilverlight() function to create the Silverlight control with two special properties to create a transparent canvas:
These two properties are required for transparency and to allow the HTML form controls to show through during the fade effect.
Another important note is the use of getElementById() to obtain a pointer to the Silverlight control. In the example below, our Silverlight control is named “SilverlightControl”. After obtaining a pointer to it in the DOM, we can access inner Silverlight elements by using MySilverlightControl.content.findName(“ObjectToGet”).
As with any Silverlight project, you will also need Scene.xaml.js and Silverlight.js in the same folder. These files are created by Microsoft Expressions when saving a new project.
You can download the source code for the full project.
This article was written by Kory Becker, software developer and architect, skilled in a range of technologies, including web application development, machine learning, artificial intelligence, and data science.