First XAML Program

We are starting the tutorial with a simple example that displays the classical "Hello World!" sentence.

We must have already created a project as described in the Silverlight tutorial, we have an HTML page, mypage.html, and all necessary files in the directory of the project.

1) Creating a canvas

A XAML content is inserted into Canvas tags for Web pages (when used in Silverlight, see syntax of XAML):

<Canvas  
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      
</Canvas>    

2) Adding a block of text

The TextBlock tag allows to add a text into the canvas:

<TextBlock>
  Hello World! 
</TextBlock>

3) Defining the attributes

You can choose the font, the size, color and other attributes of the text.

<TextBlock
 FontFamily="Verdana"
 FontSize="30" >
     Hello World! 
</TextBlock>

4) The full XAML code

<Canvas  
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      

 <TextBlock
   FontFamily="Verdana"
   FontSize="30" >
       Hello World! 
 </TextBlock>
</Canvas>      

5) Displaying the page

You can now display the mypage.html page with a browser.