ProgrammingJavascript

Using Microsoft Silverlight to Fade an HTML Form

modified | by

Introduction

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.

Using Microsoft Silverlight to Fade HTML Form Controls

Fading an HTML Form

A favorite futuristic effect has always been fading. Fading objects, controls, screens, and pages. While fading a portion of a web page was always possible with Flash and other applet technology, accessing the DOM elements of a page with javascript has been out of reach. However, with Silverlight, we can achieve some interesting visual effects and still have the power to read the inner-most workings of the DOM.

Fading an HTML Form with Silverlight Demo

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.

View Fade Demo

The Scene.xaml File

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.

[Scene.xaml]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="1" Height="1" 
 >
 <Canvas.Resources>
    <Storyboard x:Name="Timeline1" Completed="Timeline1_Completed">
     <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
      <SplineColorKeyFrame KeyTime="00:00:01" Value="#ffffffff"/>
     </ColorAnimationUsingKeyFrames>
    </Storyboard>
 </Canvas.Resources>
 <Rectangle OpacityMask="#ff000000" Fill="#00ffffff" x:Name="rectangle" Width="300" Height="300" Canvas.Left="0" Canvas.Top="0" Canvas.ZIndex="0"/>
</Canvas>

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.

Creating our HTML Form

The HTML form is created in a basic Default.html file. We will create 3 div objects. The first will hold the form itself. The second will hold a result message. The final one will hold the Silverlight control. We use absolute positioning on the div objects so that we can layer them on top of each other. The result message and the Silverlight control are initially hidden. When the user clicks the submit button, we will invoke a javascript function called HideForm() which will start the fading effect.

[Default.html]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
 <title>FormFade</title>

 <script type="text/javascript" src="Silverlight.js"></script>
 <script type="text/javascript" src="Default.html.js"></script>
 <script type="text/javascript" src="Scene.xaml.js"></script>
    <style type="text/css">
  .silverlightHost {
   height: 200px;
   width: 300px;
  }
 </style>
</head>

<body>

<div id="Myformdiv" style="position:absolute; left:25px; top:100px;">
<form id="MyForm" name="MyForm">
<table>
<tr><td>Name:</td><td><input type="text" id="m_Name" name="m_Name" value="" /></td></tr>
<tr><td>&nbsp;</td><td><input type="button" id="m_Submit" name="m_Submit" value="Click Here" onclick="HideForm();" /></td></tr>
</table>
</form>
</div>

<div id="ResultDiv" style="position:absolute; left:25px; top:100px;"></div>

<div id="SilverlightControlHost" class="silverlightHost" style="position:absolute; left:25px; top:30px;">
 <script type="text/javascript">
  createSilverlight();
 </script>
</div>

<script language="javascript">
// Hide the Silverlight control initially.
document.getElementById('SilverlightControlHost').style.display='none';
</script>

</body>
</html>

Wiring in the Events

Now we need to create a function to handle the animation “Completed” event. Event handlers with Silverlight are defined with 2 parameters to take the sender and arguments. This javascript will be defined in the Default.html.js file, which is created by default with Microsoft Expressions when you save your project. Your custom code goes after the definition of the createSilverlight() function.

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:

isWindowless: “true”,
background: “#00000000”

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”).

[Default.html.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
function createSilverlight()
{
 var scene = new FormFade.Scene();
 Sys.Silverlight.createObjectEx({
  source: "Scene.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
   width: "100%",
   height: "100%",
   version: "0.9",
                        isWindowless: "true",
   background: "#00000000"
  },
  events: {
   onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
  }
 });
}

if (!window.Sys)
 window.Sys = {};

if (!window.Silverlight)
 window.Silverlight = {};

Sys.Silverlight.createDelegate = function(instance, method) {
 return function() {
        return method.apply(instance, arguments);
    }
}

function HideForm()
{
   document.getElementById('SilverlightControlHost').style.display='';

   var sl8 = document.getElementById("SilverlightControl");
   if (sl8)
   {
      var tt = sl8.content.findName("Timeline1");
      if (tt)
      {
         var MyRect = sl8.content.findName("rectangle");

         MyRect["Canvas.Top"] = 60;
         MyRect["Canvas.Left"] = 0;
         MyRect.Width = 300;
         MyRect.Height = 70;

         tt.begin();
      }
   }
}

function Timeline1_Completed(sender, args)
{
    //
    // Stop the animation.
    //
    var sl8 = document.getElementById("SilverlightControl");
    if (sl8)
    {
       var tt = sl8.content.findName("Timeline1");
       tt.stop();
    }

    //
    // Is this our initial form submit?
    //
    if (document.getElementById('ResultDiv').innerHTML == "")
    {
       //
       // Hide the form and animation. Show a "Thank You" message.
       //
       var m_Name = document.getElementById('m_Name');

       document.getElementById('Myformdiv').style.display = 'none';

       document.getElementById('SilverlightControlHost').style.display='none';

       document.getElementById('ResultDiv').innerHTML = "<B><font face=verdana size=2>Got your info! Thanks " + m_Name.value + "!</font></B><BR>&nbsp;&nbsp;&nbsp;<input type='button' id='m_Again' value='Again' onclick='HideForm();' />";
    }
    else
    {
       //
       // User clicked "Again" and finished fading out. Hide the animation. Show the form and start over.
       //
       document.getElementById('SilverlightControlHost').style.display='none';
       document.getElementById('ResultDiv').innerHTML = "";
       document.getElementById('Myformdiv').style.display = '';
       document.getElementById('m_Name').value = '';
    }
}

Other Requirements

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.

About the Author

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.

Share