Please use FireFox to view this page

This website has been designed for use with the FireFox browser. Please use FireFox to view this page.

XAML Schemas

The primary use of XAML is in the definition of Client User Interfaces, both describing the graphical layout of the interface, and tying user-Interface generated events to code. The introduction of XAML should hopefully replace the hidden block of “Windows Form Designer Generated Code” with structured XML.XAML will be fully supported in the Longhorn build of .NET, but until then, you can use a third-party Xaml viewer such as that from xamlon.
As with all programming languages, the best place to start is with a simple “Hello World” example, XAML should be no exception. Simply create a file named HelloWorld.xaml with the following content:

<?xml version="1.0" standalone="yes"?>
<Window>
   <Button>Hello World</Button>
</Window>

To test the XAML, double click on the file (assuming you have a xaml viewer installed), and you should see an application as in figure 1.0 appear.

Figure 1.0: Hello World

You can attach code to XAML events in one of two ways, (1) by writing C# (or another managed language) directly into the XAML within a CDATA tag, or (2) by writing the code in a separate file. This is analogous to the inline-code and code-behind methodologies of ASP.net. Unfortunately Xamlon v0.7 does not properly support either inline or code behind C#, however, the XAML structure for inline code is as follows:

<Canvas ID="root"
xmlns="http://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition">
	<Button Click="Button_Click">Click Me!</Button>	
<def:Code>
  <![CDATA[
  
    void Button_Click(object sender, ClickEventArgs e)
    {
        btn1.Background = Brushes.Red;
    }
  ]]>
</def:Code>
</Canvas>

The code-behind version would use the same XAML as above (less the <![CDATA section), and a separate .cs file containing the following code:

using System;
using MSAvalon.Windows;
using MSAvalon.Windows.Controls;
using MSAvalon.Windows.Media;

namespace Button
{
	public class Default : Panel
	{
    	  // Event handler
	  void Button_Click(object sender, MSAvalon.Windows.Controls.ClickEventArgs e)
         {
          btn1.Background = MSAvalon.Windows.Media.Brushes.Red;
         }
	}
}

Every user interface element in XAML has a number of properties that you may change in order to change the appearance or behaviour of any the respective control. The following example demonstrates how to specify the width and height of a button. You can refer to Longhorn documentation at http://longhorn.msdn.microsoft.com/lhsdk/ref/ns/msavalon.windows.controls/c/button/button.aspx for the full list of properties supported by Button.
Enter the following code as WideButton.xaml. It should appear as figure 1.1 when viewed with Xamlon.

<Canvas ID="root"
xmlns="http://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition">		
<Button Width="500" Height="50" >This is a wide button</Button>
</Canvas>

Figure 1.1

Page 2  Page 3