XAML.FR

First XAML Program

Getting started with a simple example that displays the classical Hello World! sentence.

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 (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.