RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


A Straightforward Approach to Silverlight Component Design : Page 2

You can build rich Silverlight controls without monolithic IDEs; all you need is a little JavaScript, Notepad, and your imagination.

Build a Basic Example
All HTML files that host Silverlight controls have a few common characteristics that you'll need to include those in your code. First, you need to include a <script> reference to Silverlight.js. Next, you need to have a named HTML element such as a <div> that has an id attribute. That's the ID you'll use to initialize the Silverlight XAML. Finally, you need to define a JavaScript function that initializes your Silverlight control; in the following example that function is called createMySilverlightControl():

   <title>Silverlight Test</html>
   <script type="text/javascript" src="Silverlight.js"></script>
   <script language="javascript">
   function createMySilverlightControl()
         "Simple.xaml", // Your XAML object.
         // DOM reference to hosting DIV tag.
         "SimpleEllipse", // Unique control ID value.
            //If true, will prompt user to install 
            // if they don't have Silverlight.
            background:'#FFFFFFFF', // ARGB Background color of control.
            isWindowless:'false', //False, opaque bg
            framerate:'24', // MaxFrameRate property value.
            version:'0.9' // Control version to use.
            onError:null,//JS method to call on error
            onLoad:null//JS method to call on load
         null);// Parameters
   <div id="Holder"></div>
   <script type="text/javascript">
In your createMySilverlightControl function, call Sys.Silverlight.createObject(), which accepts parameters that define what XAML file to use, some properties specifying where and how you want your Silverlight application to run, and any custom parameters you want to pass in to it. The Simple.html file shown above references the Simple.xaml file shown below:

   <Canvas Width="100" Height="40"   
Figure 1. Simple Ellipse: Here's a simple ellipse drawn by Silverlight in Firefox.
<Ellipse Width="100" Height="40" Stroke="Black" StrokeThickness="2" Fill="Green" /> </Canvas>
Together, these two XAML and HTML files provide a minimal example of a Silverlight application. This simple demo doesn't do much—but it does display the green ellipse shown in Figure 1.

The XAML code creates a 100 x 40-pixel Canvas control containing a green ellipse with a black border. It has no defined interactivity; in other words, clicking on it or mousing over it doesn't do anything. For a primer on how XAML is structured, take a look at the article Developing Lookless controls with WPF. For a list of elements supported in Silverlight—a fairly small subset of those supported in WPF—take a look at the Silverlight 1.0 reference.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date