First XAML Program

We are starting the tutorial with a simple example that display the classical "Hello World!".
You have already created a XAML project in the previous chapter, you have an HTML page, mypage.html, and all necessary files in the directory of your project.

1) Creating a canvas

A XAML content is inserted into Canvas tags for Web pages and the Silverlight plug-in:

<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 put a text into the canvas:

<TextBlock>
  Hello World! 
</TextBlock>

3) Defining the attributes

You can choose a 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, Internet Explorer, Firefox or other.