Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Catching the (Silver) Light : Page 3

Find out how easy it is to add Silverlight 1.0 to your web pages with this step-by-step walkthrough.


advertisement
Creating the XAML
The XAML file that Silverlight uses to control the object is the last thing it needs to convert your HTML.

It would take a series of articles to fully explain XAML, so I'm going to explain only what I show. The Silverlight.chm file that you downloaded with the SDK and the examples in the QuickStart have a lot of good information about this as well.

For now, here's a good basic XAML template.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock x:Name="HelloText" FontSize="14" Canvas.Left="17" Canvas.Top="10" Foreground="Blue" Text="Hello CoDe Magazine" /> </Canvas>

"Canvas" is the basic container object for XAML, and as such, you need an outer canvas to hold anything.

The two xmlns lines define the XML syntax that you will use. The xmlns:x one allows you to give your objects names that you can reference in JavaScript.

TextBlock is one of the simpler objects in XAML; it displays text at a location on the canvas. As you can see, I've named this text block "HelloText," and I'm using the default font, size 14. The upper-left corner of the box bounding the text is 17 pixels to the left of the canvas border and 10 pixels from the top. The Foreground color is blue, and the Text is "Hello CoDe Magazine."

Since Beta 01, I've been giving my XAML files an .xml extension so my editor gives me nice color-coded template editing and lets me know if I've left off something important. You can also give the file the extension .xaml.

Putting It Together
If you have Silverlight.js in its js folder and HelloWorld.xml in its XAML folder, at this point, you should be able to double-click your HTML file and produce the screenshot shown in Figure 1.

 
Figure 1. Base HTML Page: Here's how the base HTML page looks initially with Silverlight added.
Feel free to play with this example some more, perhaps by changing the text color or placing a rectangle around the text. Browse through the QuickStart or Silverlight.chm and experiment a little with the XAML file to start getting familiar with the syntax and what you can do.

Considerations
When you download the SDK and install Silverlight 1.0, you can choose whether to install the Visual Studio 2005 template for Silverlight. As a general rule, I do this; however, as I've demonstrated here and in the next section, you don't have to fire up Visual Studio at all to use Silverlight.

If you are adding Silverlight to an existing web page, the template will be of no use, because you simply need to add the Silverlight.js link, the DIV tag that contains the control, and the JavaScript to instantiate it as shown above. However, if you're building a new page, by all means investigate the use of the template for Visual Studio 2005. The template places slightly different code in your page, but after what you've seen so far, you should have no problems understanding the template code.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap