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.
Text="Hello CoDe Magazine" />
"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
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.
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